Ich habe mit chartjs ein einfaches Balkendiagramm erstellt, das einwandfrei funktioniert. Jetzt möchte ich die Werte in einem zeitbasierten Intervall aktualisieren. Mein Problem ist, dass ich nach dem Erstellen des Diagramms nicht weiß, wie ich seine Werte korrekt aktualisieren kann ...
Mein Code:
var ctx = $("#myChart").get(0).getContext("2d");
var dts = [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [0, 0, 0, 0, 0]
}
];
var data = {
labels: ["Core#1", "Core#2", "Core#3", "Core#4", "Total"],
datasets: dts
};
var chart = new Chart(ctx);
chart.Bar(data);
//test code
setInterval( function () {
data.datasets[0].data = [random(), random(), random(), random(), random()];
chart.Bar(data);
},2000);
Im Testcode aktualisiere ich die Werte mit datasets[0].data
- ist dies der richtige Weg, dies zu tun? Das Problem dabei ist, dass bei jedem Aufruf chart.Bar()
die Werte auf 0 zurückgesetzt und dann auf den Zufallswert animiert werden (so wie ich das Diagramm neu erstelle ). Auf diese Weise sind alle Animationen immer von 0 bis zum Wert, was seltsam aussieht. Ich würde erwarten, dass wenn ich einen Wert von 50 auf 10 aktualisiere, der Balken von 50 auf 10 sinkt und nicht auf 0 gesetzt und dann auf 10 animiert wird.
Ich habe in den Dokumenten nichts darüber gefunden ... mache ich etwas falsch oder ist dies mit dieser Bibliothek unmöglich?
quelle
Antworten:
Update: Es sieht so aus, als ob chartjs aktualisiert wurde (siehe Kommentar unten). Es gibt einige Beispiele, die sehr schön aussehen:
Ursprünglicher Beitrag
Ab November 2013 gibt es anscheinend nur sehr wenige Optionen zum Aktualisieren von Diagrammen.
Hier gibt es ein gutes Beispiel (unten dupliziert) für das Hinzufügen neuer Punkte zu einem Liniendiagramm. Immer noch etwas nervös, aber nicht schlecht. Ich denke jedoch, dass der Effekt wahrscheinlich von dem Diagramm abhängt, das Sie verwenden.
Es sieht so aus, als ob dies irgendwo in der Entwicklungspipeline ist. Ich sehe jedoch noch keinen Hinweis auf ein Veröffentlichungsdatum: https://github.com/nnnick/Chart.js/issues/13 [Ab 26. Juli 2014 geschlossen]
JS
HTML
quelle
Das
update()
löst eine Aktualisierung des Diagramms aus. chart.update ()update()
kann sicher aufgerufen werden, nachdem die Werte eines oder mehrerer vorhandener Punkte im Datenobjekt aktualisiert wurden, wodurch die Änderungen in einer animierten Renderschleife gerendert werden.quelle
So geht's in der letzten Version von ChartJs:
Schauen Sie sich dieses klare Video an
oder testen Sie es in jsfiddle
quelle
chart.update()
animiert von der vorherigen Position der Punkte wie das OP wollte.Sie können auch die Funktion destroy () verwenden. So was
quelle
Sie müssen nur den
chartObject.data.datasets
Wert ändern undupdate()
wie folgt aufrufen :quelle
Entfernen Sie den Canvas-Dom und fügen Sie ihn erneut hinzu.
quelle
Ich denke, der einfachste Weg ist, eine Funktion zu schreiben, um Ihr Diagramm einschließlich der
chart.update()
Methode zu aktualisieren . Schauen Sie sich dieses einfache Beispiel an, das ich in jsfiddle für ein Balkendiagramm geschrieben habe.Hoffe das hilft.
quelle
Ich denke nicht, dass es jetzt möglich ist.
Dies ist jedoch eine Funktion, die bald verfügbar sein sollte, wie der Autor hier angedeutet hat: https://github.com/nnnick/Chart.js/issues/161#issuecomment-20487775
quelle
Wenn destroy () und clear () nicht funktionieren (genau wie ich es erlebt habe), können Sie mit jquery die Zeichenfläche entfernen und erneut anhängen.
quelle
Am einfachsten ist es, das Canvas-Element zu ersetzen und dann erneut neues Chart () aufzurufen:
Natürlich müssen Sie IhreChartData, IhrenChartType und IhreChartOptions durch die richtigen Werte ersetzen, die zum Initialisieren von Chart.js erforderlich sind. Siehe Chart.js Docs .
Sie können die Funktion reloadMyChart bei einem Klick auf eine Schaltfläche oder einem anderen von Ihnen benötigten Ereignis aufrufen. Wahrscheinlich fügen Sie dieser Funktion Parameter hinzu und verwenden diese, um einen REST-Aufruf zum dynamischen Aktualisieren Ihres Diagramms durchzuführen:
Ich hoffe es hilft! =)
quelle
Anzeigen des Echtzeit-Update-DiagrammsJS
Den vollständigen Code können Sie im Beschreibungslink herunterladen
quelle
Es gibt mindestens zwei Möglichkeiten, dies zu lösen:
1)
chart.update()
2) Löschen Sie das vorhandene Diagramm mit chart.destroy () und erstellen Sie ein neues Diagrammobjekt.
quelle
Sie können die Instanz
Chart
von mit überprüfenChart.instances
. Dadurch erhalten Sie alle Diagramminstanzen. Jetzt können Sie diese Instanzen iterieren und die Daten ändern, die in der Konfiguration vorhanden sind. Angenommen, Sie haben nur ein Diagramm auf Ihrer Seite.quelle
So einfach: Ersetzen Sie einfach das Diagramm-Canvas-Element.
quelle