无法使用chart.js呈现多个图表

Question

我正在尝试使用Chart.js在单个页面上创建多个图表，我正在动态创建多个画布来托管这些图表。

有关每个图表的信息包含在JSON对象中，而JSON对象包含在“ allDatas”中。

请注意，来自allDatas的数据已正确格式化，并且每个数据均已通过测试，我们可以正确创建一个Chart，而不会出现任何问题。 画布是相同的，它们都是正确的，我们可以在其中的任何一个中显示图表。 当我尝试创建多个图表时，会出现问题。

var displayDataviz = function(){
    var datavizCanvas = document.querySelectorAll('.js-datavizCanvas');

    for(var i=0; i<datavizCanvas.length;i++){
        var canvas = datavizCanvas[i];
        var data = allDatas[i];
        data = data.replace(/&quot;/g,'\"');

        data = JSON.parse(data);
        reCreateDataviz(canvas,data);

    }
}

var reCreateDataviz = function(canvas, previousDataviz) {
    console.log(canvas);
    console.log(previousDataviz);
    var myChart = new Chart(canvas, previousDataviz);
    return myChart;
}

这是我在控制台中获得的结果，我记录了两个对象，因此您可以看到它们是正确的，并且还可以看到第一个图表（完全随机）可以正常工作。

我试图手动创建它们，并且发生相同的问题。

谢谢你的帮助。

Answer 1

这原因，它的不工作是因为你存储所有的图表实例单个变量（ myChart ），扭曲了所有其他的图表情况下，只有一个除外。

为了解决这个问题...

向reCreateDataviz函数添加另一个参数（ 例如chartID ），该参数将包含每个图表的唯一ID：

var reCreateDataviz = function(canvas, previousDataviz, chartID) {
  ...
}

然后，声明存储图表实例的变量，如下所示：

window['myChart' + chartID] = new Chart(canvas, previousDataviz);

最后，在for循环内调用reCreateDataviz函数时，将i作为第三个参数传递，如下所示：

...
reCreateDataviz(canvas, data, i);
...