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

Question

我正在尝试使用Chart.js在一个页面上创建多个图表。我正在动态创建几个画布来承载这些图表。

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

请注意，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）中，这会扭曲除一个之外的所有其他图表实例。

要解决这个问题。。。

将另一个参数添加到重新创建数据viz函数（例如-图表id），该参数将包含每个图表的唯一id：

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

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

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

最后，当调用for循环的内的重新创建dataviz函数时，将i作为第三个参数传递，如下所示：

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