Unmöglich, mehrere Diagramme mit chart.js zu rendern

Question

Ich versuche, mehrere Diagramme auf einer einzelnen Seite mit Chart.js zu erstellen Ich erstelle dynamisch mehrere Canvas, um diese Diagramme zu hosten.

Die Informationen zu den einzelnen Diagrammen sind in JSON-Objekten enthalten, die in 'allDatas' enthalten sind.

Beachten Sie, dass die Daten von allDatas korrekt formatiert sind und jeder von ihnen getestet wurde, können wir ein Diagramm ohne Probleme mit ihnen erstellen. Es ist das gleiche für die Leinwand, sie sind alle korrekt und wir können ein Diagramm in jedem von ihnen anzeigen. Das Problem tritt auf, wenn ich versuche, mehrere Diagramme zu erstellen.

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

Hier ist, was ich in der Konsole zu erhalten, angemeldet ich die beiden Objekte, so können Sie sehen, dass sie richtig sind, und Sie können auch sehen, dass die erste Karte (völlig zufällig) funktioniert gut.

ich versuchte, sie von Hand und das gleiche Problem tritt zu erstellen.

Danke für Ihre Hilfe.

Answer 1

diesem Grund, warum es ‚s nicht funktioniert, weil Sie alle Diagramm Instanzen auf eine einzelne Variable (myChart) speichern, die alle anderen Diagramm Fällen verzerrt, mit einer Ausnahme.

dies zu beheben ...

fügen Sie eine weitere Parameter an die reCreateDataviz Funktion (zum Beispiel - chartID), die für jedes Diagramm eine eindeutige ID enthalten:

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

Deklarieren Sie dann die Variable, die die Diagramminstanz speichert, wie folgt:

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

und schließlich, wenn reCreateDataviz Funktion innerhalb der for Schleife aufrufen, i als drittes Argument übergeben, etwa so:

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