如何从 CanvasJS 中的数组加载数据点以制作图表?

问题描述

我想用数组中的数据制作图表。但无法弄清楚为什么我的图表中没有显示任何数据。 你们能帮我解决这个问题吗?

   
   var dataset = [];
   
   
   
   $(data.items).each(function (index,item) 
   {

dataset.push(item.SQA);
   });
   

   console.log("5. item: " + dataset[5]);
   console.log("array items: " + dataset);
   
   var chart = new CanvasJS.Chart("wrapper_dia",{
   animationEnabled: true,theme: "light2",title:{
       text: "Simple Line Chart"
   },data: [{        
       type: "line",indexLabelFontSize: 16,dataPoints: dataset
       
   }]
   
   
});
chart.render();

Here is the picutre of the console.log with the data that i want to put on the line chart:

解决方法

您可以遍历数组并将其解析为 CanvasJS 接受的格式,然后再传递给图表选项。检查以下代码片段是否相同。

var dps = [];    
function parseDataPoints () {
    for (var i = 0; i <= dataArray.length; i++)
      dps.push({y: dataArray[i]});     
};
    
parseDataPoints();
chart.options.data[0].dataPoints = dps;
chart.render();

查看此 JSFiddle 以获取相同示例。