chart canvas js set dynamic array

时间:2018-02-04 20:22:34

标签: javascript canvas canvasjs

我收到json,并尝试将动态数组设置为图表canvasJS的dataPoints,也许有人可以提供帮助,

这个代码:

for(var i=0;i<cars.length; i++) {
    cars[i] =100 * (cars[i]/cars.length);
}

for(var j=0;j<cars.length; j++){
    dps.push({
        y: cars[j], label: models[j]
    });
}

这段代码我如何构建canvasJS图表:

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title: {
        text: "Sum of Cars"
    },
    data: [{
        type: "pie",
        startAngle: 240,
        yValueFormatString: "##0.00\"%\"",
        indexLabel: "{label} {y}",
        dataPoints: dps
    }]
});    

chart.render();

1 个答案:

答案 0 :(得分:2)

更新dps不会对CanvasJS图表选项产生任何影响。您将需要自己update the chart options并重新渲染图表。

for(var i = 0; i < data.length; i++) {
    chart.options.data[0].dataPoints.push(data[i]);
}

第二种方法是使用set() method更新dataPoints。

chart.data[0].set("dataPoints", data);

注意必须先渲染图表,然后才能使用任何set()方法。

看看这些例子:

  1. Updating dataPoints using chart options
  2. Updating dataPoints using set method