Pixelbart

Diagramme mit Chart.js nachträglich bearbeiten

Viele Plugins, Themes und auch andere Tools, verwenden Chart.js und das ist großartig. Chart.js ist meiner Meinung nach die beste Möglichkeit, wenn man schnell ein paar Diagramme erstellen möchte. Dazu ist es auch noch sehr einfach einzubinden und zu verwenden. Manchmal erreicht man einen Punkt, da möchte man ein bestehendes Diagramm, welches mit Chart.js betrieben wird, verändern. In der Regel sind das bspw. die Daten, die das Diagramm darstellt, aber auch die Konfiguration. Hier erfährst du, wie das mit zwei Methoden funktioniert.

Chart.js Diagramm mit bestehendem Objekt bearbeiten

Die einfachste Möglichkeit ein Diagramm zu bearbeiten ist es, wenn man Zugriff auf das bestehende Chart.js-Objekt hat, also die Initialisierung unseres Diagramms. Das sieht dann bspw. so aus:

let myChart = new Chart();

// Neue Daten einfügen

myChart.data.labels.push('Neues Label');
myChart.data.datasets.forEach(function(dataset) {
    dataset.data.push([10, 20, 30, 40, 50, 60, 70]);
});
myChart.update();

// Konfiguration bearbeiten

myChart.options.scales.xAxes[0].ticks.beginAtZero = true;
myChart.options.maintainAspectRatio = true;
myChart.update();Code-Sprache: JavaScript (javascript)

Hier haben wir jetzt neue Daten hinzugefügt und unsere Konfiguration angepasst, sodass die Diagramme jetzt immer bei 0 starten. In unserem Beispiel möchten wir das für die x-Achse des Diagramms anwenden. Möchtest du stattdessen die y-Achse ansprechen, reicht die Umbenennung von xAxes in yAxes.

Das funktioniert immer hervorragend, vorausgesetzt, man hat Zugriff auf das bestehende Objekt. Was ist denn, wenn man die Charts bearbeiten möchten, zu denen man keinen Zugriff auf das Objekt hat?

Chart.js Diagramme bearbeiten, ohne Zugang zum Objekt

Das wird nicht so wirklich in der Dokumentation erklärt, obwohl es möglich. Chart.js erstellt für jedes Diagramm eine Instanz, auf die man zugreifen kann. Dazu stellt uns Chart.js zwei nützliche Helfer zur Verfügung: Chart.helpers und Chart.instances

Mit Chart.helpers stellt uns Chart.js nützliche Helfer zur Verfügung, die du dir mit console.log anschauen kannst. Für uns interessant sind die Chart.instances. Das sind all unsere Instanzen von Chart.js, auch die, die gar nicht von uns erstellt wurden, bspw. durch Plugins. Wenn wir also die oben genannten Dinge anwenden wollen, müssen wir alle Instanzen durchlaufen und bearbeiten. Dies kann so aussehen:

Chart.helpers.each(Chart.instances, function (instance) {
    // Neue Daten einfügen

    instance.chart.data.labels.push('Neues Label');
    instance.chart.data.datasets.forEach(function(dataset) {
        dataset.data.push([10, 20, 30, 40, 50, 60, 70]);
    });
    instance.chart.update();

    // Konfiguration bearbeiten

    instance.chart.options.scales.xAxes[0].ticks.beginAtZero = true;
    instance.chart.options.maintainAspectRatio = true;
    instance.chart.update();
});Code-Sprache: PHP (php)

Hiermit erzielen wir dasselbe wie oben, nur eben für alle Diagramme, die mit Chart.js erstellt wurden. Erst nutzen wir die Helfer, um unsere Instanzen zu durchlaufen, danach bearbeiten wir die einzelnen Instanzen. Innerhalb des Loops hast du mit instance.chart Zugriff auf das Chart.js-Objekt und kannst damit machen, was du willst. Wichtig ist am Ende, dass instance.chart.update() damit das Chart auch aktualisiert wird.

Jetzt weißt du, wie du deine, oder aber auch andere Diagramme, die mit Chart.js erstellt wurden, bearbeitest und manipulierst. Diese Methoden sollten mit der Version 2 und Version 3 von Chart.js funktionieren. Wenn du Chart.helpers und Chart.instances mit console.log überprüfst, erfährst du, welche Daten die beiden Objekte enthalten.

In

,
,