Диаграмма CanvasJs с использованием данных JSON - PullRequest
Новая
       7

Диаграмма CanvasJs с использованием данных JSON

0 голосов
/ 29 ноября 2018

Я пытаюсь нарисовать диаграмму CanvasJs, используя данные из файла json, но по какой-то причине это не работает.

Данные, которые я пытаюсь отобразить, представляют собой данные в файле 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>

1 Ответ

0 голосов
/ 29 ноября 2018

Сначала вам нужно вызвать json, $. GetJson выдает обратный вызов, поэтому, как только API выдаст данные, необходимые для создания 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 для возврата любых свойств.

...