我有一个问题,生成CanvasJS图表。
基本上我从API获取数据,我可以看到并检查JSON数组,但是当我要为图形生成dataPoint时,我得到2个错误:数据字段上的数据无效,值字段上的NaN。
有人能给我一个暗示吗?
// Fetching the data
fetch('https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').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].renewablesobligationconsumption) });
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' );
});
这里代码https://jsfiddle.net/azacrown/qkhb0dv3/
干杯
你没有正确地在data
上进行正确的比赛,因为你得到了y:null
和x:NaN
。
data
中的内容是数组内的对象数组,即[[{}, {}, {}...]]
so,您需要相应地进行迭代。
使用此代码:
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://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi').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.renewablesobligationconsumption)
});
});
});
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>