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提供了创建dataPoints所需的数据，一旦创建了dataPoints，便会创建图表。

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

注意：如果需要，您可以在加载的同时添加一个加载器，以便用户知道正在加载某些东西

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，一旦过滤，您将获得一个新数组，您可以在其中返回所需的任何属性。使用array.map返回属性。

使用json数据的CanvasJs图表

1 个答案: