Wie pusht man Datensätze dynamisch für chart.js (Balkendiagramm)?

Question

Ich verwende chartjs (Balkendiagramm), um einige Daten anzuzeigen. Ich versuche, Daten zu Datasets Array dynamisch hinzuzufügen, aber es funktioniert nicht.

zum Beispiel sagen wir, ich habe 2 Objekte in Arrays Array, und ich erstelle dynamisch dieses Objekt und versuche, ihn in Datensätze (von der Chrome-Konsole) nach der Seite geladen und Diagramm ist bereits hoch.

var e = { 
       fillColor : "#efefef", 
       strokeColor : "#efefef", 
       highlightFill: "#efefef", 
       highlightStroke: "#efefef", 
       data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
      } 

und dann

barChartData.datasets.push(e) 

Ich habe auch versucht window.myBar.update() zu tun, aber wieder nichts passiert.

Kennen Sie dieses Problem? Danke,

Answer 1

Ich glaube nicht, dass Sie AddData verwenden können, um eine Serie hinzuzufügen - es ist für das Hinzufügen von Punkten/Bars zu bestehenden Serien.

Sie können jedoch Ihre neue Serie direkt in das Diagrammobjekt einfügen. Mit dem Diagrammobjekt und neuen Datensatz wie so

var ctx = document.getElementById("chart").getContext("2d"); 
var myBarChart = new Chart(ctx).Bar(data); 

var myNewDataset = { 
    label: "My Second dataset", 
    fillColor: "rgba(187,205,151,0.5)", 
    strokeColor: "rgba(187,205,151,0.8)", 
    highlightFill: "rgba(187,205,151,0.75)", 
    highlightStroke: "rgba(187,205,151,1)", 
    data: [48, 40, 19, 86, 27, 90, 28] 
} 

der Code ein neuer Datensatz wurden

var bars = [] 
myNewDataset.data.forEach(function (value, i) { 
    bars.push(new myBarChart.BarClass({ 
     value: value, 
     label: myBarChart.datasets[0].bars[i].label, 
     x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i), 
     y: myBarChart.scale.endPoint, 
     width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1), 
     base: myBarChart.scale.endPoint, 
     strokeColor: myNewDataset.strokeColor, 
     fillColor: myNewDataset.fillColor 
    })) 
}) 

myBarChart.datasets.push({ 
    bars: bars 
}) 

myBarChart.update(); 

Fiddle einzufügen sein - http://jsfiddle.net/pvak6rkx/ (fügt den neuen Datensatz nach 3 Sekunden)

Answer 2

In Version 2.x, können Sie Daten direkt zum Diagramm hinzufügen (oder entfernen) und dann update() aufrufen, z

barChart.data.datasets.push({ 
    label: 'label2', 
    backgroundColor: '#ff0000', 
    data: [1,2,3] 
}); 
barChart.update(); 

Hier ist ein jsfiddle example.