Javascript 带有JSON数据的动态图表-CanvasJS

我在生成图表时遇到问题

基本上，我是从API获取数据的，我可以查看并检查JSON数组，但是当我要为图形生成数据点时，我得到了两个错误： 数据字段中的数据无效，值字段中的数据为NaN

有人能给我一个提示吗

// Fetching the data
fetch('url').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' );
});

//获取数据
获取（'url'）。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
//在这里使用JSON数据
var jsonData=数据；
//生成数据点
var数据点=[]；
对于（var i=0；i{
抛出新错误（“无法获取数据”）；
});

这是密码

---

干杯

您没有正确输入

数据

，因此您得到了

y:null

和

x:NaN

数据中的内容

是数组中的对象数组，即

[[[{}，{}，{}，{}…]

，因此需要相应地迭代

使用此代码：

  data.forEach(function(array) {
    array.forEach(function(arrayItem) {
      dataPoints.push({
        y: new Date(arrayItem.source_ts),
        x: Number(arrayItem.renewablesobligationconsumption)
      });
    });
  });

下面是完整的工作示例。现在您的

数据点已准备就绪，您可以在任何地方使用它：


//获取数据
取（'https://appbe-dev.clearvuesystems.co.uk/demandForecast/getLiveLineDataEverySecRestApi）。然后（响应=>{
返回response.json（）；
})。然后（数据=>{
//生成数据点
var数据点=[]；
data.forEach（函数（数组）{
forEach（函数（arrayItem）{
数据点推送({
y：新日期（arrayItem.来源），
x：数量（阵列项目可续费消费）
});
});
});
console.log（数据点）；
var chart=new CanvasJS.chart（“chartContainer”{
数据：[{
数据点：数据点，
键入：“行”，
}]
});
chart.render（）；
}).catch（错误=>{
抛出新错误（“无法获取数据”）；
})；


Downvoter请在一个已经被接受的答案中说明拒绝投票的原因。谢谢