使用 json 数据的 CanvasJs 图表

Question

我正在尝试使用 json 文件中的数据绘制 CanvasJs 图表，但由于某种原因它不起作用。

我要显示的数据是 json 文件中的数据，表示为数字“####”和值“#”

请看下面的代码。

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
 animationEnabled: true,
 theme: "light2",
 title: {
  text: "Years"
 },
 axisY: {
  title: "Value",
  titleFontSize: 24
       
 },
 data: [{
  type: "column",
  yValueFormatString: "# Value",
  dataPoints: dataPoints
 }]
});

function addData(data) {
 for (var i = 0; i < data.length; i++) {
  dataPoints.push({
   x: new Year(data[i].date),
   y: data[i].value
  });
 }
 chart.render();

}

$.getJSON("https://api.worldbank.org/v2/countries/gbr/indicators/UIS.FOSEP.56.F600?format=json", addData);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

首先你需要调用 json，$.getJson 给出一个回调，所以一旦 api 给出你需要创建数据点的数据，一旦它创建创建图表.

希望以下解决方案能够解决问题。

注意: 如果需要你可以在加载的同时添加一个加载器，这样用户就会知道有东西正在加载

const chartCreation = (data) => {
$("#chartContainer").CanvasJSChart({
 animationEnabled: true,
 theme: "light2",
 title: {
  text: "Years"
 },
 axisY: {
  title: "Value",
  titleFontSize: 24
       
 },
 data: [{
  type: "column",
  yValueFormatString: "# Value",
  dataPoints: dataPoints
 }]
});

}

let dataPoints = [];


const addData = (data) => {
  dataPoints = data[1].filter(obj => +(obj.date) >= 2010 && +(obj.date) <=2018 
  ).map(obj => ({x: +(obj.date),
     y: obj.value ? obj.value :  0}))
  // once we have the data pass it to chart creation 
  // function
  chartCreation(dataPoints);
}  



$.getJSON("https://api.worldbank.org/v2/countries/gbr/indicators/UIS.FOSEP.56.F600?format=json", (data) =>{
  // pass the data to function
  addData(data);
});

return{
     
   }

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
 <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

已更新

根据评论，首先您可以 array.filter , once you filter you will get a new array where you can return the properties whatever that you want. using array.map 到 return 任何属性。

使用 json 数据的 CanvasJs 图表

CanvasJs chart using json data

javascript

ajax

canvasjs