[英]Dynamic Chart with JSON data - CanvasJS
我在使用CanvasJS生成图表时遇到问题。
基本上我从 API 获取数据,我可以查看并检查 JSON 数组,但是当我要为图形生成数据点时,我收到 2 个错误:数据字段上的数据无效和值字段上的 NaN。
有人可以给我提示吗?
// Fetching the data
fetch('https://example.com/my/endpoint').then(response => {
return response.json();
}).then(data => {
// Work with JSON data here
var jsonData = data;
// Generating Data Points
var dataPoints = [];
for (var i = 0; i <= jsonData.length - 1; i++) {
dataPoints.push({ y: new Date(jsonData[i].source_ts), x: Number(jsonData[i].xyzw) });
console.log(dataPoints);
}
var chart = new CanvasJS.Chart("chartContainer", {
data: [
{
dataPoints: dataPoints,
type: "line",
}
]
});
chart.render();
}).catch(err => {
throw new Error( 'Impossible to get data' );
});
干杯
由于您得到y:null
和x:NaN
,您没有正确处理data
。
data
中的内容是数组中的对象数组,即[[{}, {}, {}...]]
因此您需要相应地进行迭代。
使用此代码:
data.forEach(function(array) {
array.forEach(function(arrayItem) {
dataPoints.push({
y: new Date(arrayItem.source_ts),
x: Number(arrayItem.renewablesobligationconsumption)
});
});
});
下面是完整的工作示例。 现在您的dataPoints
已准备就绪,您可以在任何地方使用它:
// Fetching the data fetch('https://example.com/my/endpoint').then(response => { return response.json(); }).then(data => { // Generating Data Points var dataPoints = []; data.forEach(function(array) { array.forEach(function(arrayItem) { dataPoints.push({ y: new Date(arrayItem.source_ts), x: Number(arrayItem.xyzw) }); }); }); console.log(dataPoints); var chart = new CanvasJS.Chart("chartContainer", { data: [{ dataPoints: dataPoints, type: "line", }] }); chart.render(); }).catch(err => { throw new Error('Impossible to get data'); });
<br/> <:-- Just so that JSFiddle's Result label doesn't overlap the Chart --> <div id="chartContainer" style="height; 300px: width; 100%;"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.