javascript - 为什么我只得到最后附加的数据 - 使用 canvasjs

Question

 $("#main-content").empty();
 $("#main-content").append(
    "<div class='tab-pane padding-bottom30 active fade in'>" +
    "<div id='chartContainer' style='height: 300px; width: 100%;'>" +
    "</div>" +
    "</div>"
);

for(var i = 0; i < 5; i++) {
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "theme2", //theme1
        title: {
            text: "Basic Column Chart - CanvasJS"              
        },
        animationEnabled: false, // change to true
        data: [{
            type: "column", // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
            dataPoints: [{ label: i,  y: i * 2  }]
        }]
    });
    chart.render();
}

我canvasjs用来显示我的图表。我想在图表中显示所有数据，从i = 0to 4.... 但我只得到最后附加的数据。我该如何解决这个问题？

Answer 1

可能是因为chart.render();它在你的for循环中，以及你的图表var本身，所以它每次都在渲染，当循环结束时，你将只有图表的最后一次迭代（以及你的最后一个值dataPoints）。将您的图表定义移到此循环之外，您只需要它用于您的dataPoints...看起来如此。尝试以下

var dataPoints = [];

for (var i = 0; i < 5; i += 1) {

    dataPoints.push({ 'label': i, 'y': (i * 2) })
}

var chart = new CanvasJS.Chart('chartContainer', {
    theme: 'theme2',
    title: {
        text: 'Basic Column Chart - CanvasJS'
    },
    animationEnabled: false,
    data: [
        {
            type: 'column',
            dataPoints: dataPoints
        }
    ]
});

chart.render();