无法使用chart.js渲染多个图表

Question

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

有关每个图表的信息都包含在JSON对象中，这些对象包含在＆＃39; allDatas＆＃39;。

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

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);

最后，在reCreateDataviz循环中调用 for 函数时，将 i 作为第三个参数传递，就像这样：

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