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

Я пытаюсь нарисовать диаграмму 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>

javascript ajax canvasjs

29.11.2018 16:07

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 546

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вам нужно вызвать 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 для возврата любых свойств.

спасибо, работает отлично. Один быстрый вопрос: как мне отфильтровать данные, чтобы отобразить годы с 2010 по 2018?

— 30.11.2018 16:48

Добро пожаловать, мат. Пожалуйста, проверьте обновленное сообщение на основе комментария. Надеюсь, это решит вопрос :)

— 02.12.2018 11:32

29.11.2018 16:36