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

Question

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

有关每个图表的信息都包含在'allDatas'中包含的JSON对象中。

请注意，来自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); 

最后，调用for循环内reCreateDataviz功能时，通过i作为第三个参数，就像这样：

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