Frage chart.js lädt völlig neue Daten


Die API für chart.js erlaubt es einem, Punkte der darin geladenen Datensätze zu bearbeiten, zum Beispiel:

.update( )

Wenn Sie update () auf Ihrer Chart-Instanz aufrufen, wird das Diagramm erneut gerendert   Alle aktualisierten Werte, mit denen Sie den Wert von mehreren bearbeiten können   vorhandene Punkte und rendert diese dann in einer animierten Render-Schleife.

.addData( valuesArray, label )

Aufrufen von addData (valuesArray, label) in Ihrer Chart-Instanz durch Übergabe eines   Array von Werten für jedes Dataset, zusammen mit einer Beschriftung für diese Punkte.

.removeData( )

Durch den Aufruf von removeData () in Ihrer Chart-Instanz wird die erste Instanz entfernt   Wert für alle Datensätze im Diagramm.

All das ist großartig, aber ich kann nicht herausfinden, wie man ein komplett neues Dataset einliest und das alte löscht. Die Dokumentation scheint dies nicht zu erfassen.


66
2017-07-16 16:15


Ursprung


Antworten:


Ich hatte große Probleme damit

Zuerst habe ich es versucht .clear() dann habe ich es versucht .destroy() und ich habe versucht, meine Diagrammreferenz auf null zu setzen

Was hat das Problem endgültig für mich gelöst: Löschen der <canvas> Element und dann erneut ein neues <canvas> zum übergeordneten Container


Es gibt eine Million Möglichkeiten, dies zu tun:

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph'); // why use jQuery?
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

74
2017-07-31 16:14



Du musst zerstören:

myLineChart.destroy();

Dann initialisiere das Diagramm neu:

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

50
2017-11-17 22:34



Mit Chart.js V2.0 können Sie Folgendes tun:

websiteChart.config.data = some_new_data;
websiteChart.update();

29
2018-04-29 18:51



Meine Lösung dafür ist ziemlich einfach. (VERSION 1.X)

getDataSet:function(valuesArr1,valuesArr2){
        var dataset = [];
        var arr1 = {
            label: " (myvalues1)",
            fillColor: "rgba(0, 138, 212,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(0, 138, 212,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr1
        };
        var arr2 = {
            label: " (myvalues2)",
            fillColor: "rgba(255, 174, 087,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(255, 174, 087,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr2
        };
        /*Example conditions*/
        if(condition 1)
          dataset.push(arr1);
        }
        if(condition 2){
          dataset.push(arr1);
          dataset.push(arr2);
        }

        return dataset;
    }

var data = {
    labels: mylabelone,
    datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
    myBarChart.destroy(); // if not null call destroy
    myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...

Kein Flackern oder Probleme. getDataSet ist eine Funktion, um zu steuern, welchen Datensatz ich präsentieren muss


10
2018-01-18 10:36



Es ist ein alter Thread, aber in der aktuellen Version (ab dem 1. Februar 2017) ist es einfach, die in chart.js geplotteten Datensätze zu ersetzen:

Angenommen, Ihre neuen x-Achsen-Werte sind in Array x und y-Achsen-Werte sind in Array y, Sie können den Code unten verwenden, um das Diagramm zu aktualisieren.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

10
2018-02-01 13:44



Ich habe das hier beantwortet Wie lösche ich ein Diagramm aus einem Canvas, so dass Hover-Ereignisse nicht ausgelöst werden können?

Aber hier ist die Lösung:

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

6
2018-06-05 23:19



Laut den Unterlagen, clear() löscht die Leinwand. Stellen Sie es sich als das Radiergummi-Werkzeug in Paint vor. Es hat nichts mit den Daten zu tun, die aktuell in der Chart-Instanz geladen sind.

Die Instanz zu zerstören und eine neue zu erstellen, ist verschwenderisch. Verwenden Sie stattdessen API-Methoden removeData() und addData(). Diese fügen der Chart-Instanz ein einzelnes Segment hinzu oder entfernen es. Wenn Sie also völlig neue Daten laden möchten, führen Sie einfach ein Diagrammdatenfeld durch und rufen Sie dann auf removeData(index) (Array-Indizes sollten aktuellen Segmentindizes entsprechen). Dann benutze addData(index) um es mit den neuen Daten zu füllen. Ich schlage vor, die beiden Methoden zum Schleifen der Daten zu umhüllen, da sie einen einzelnen Segmentindex erwarten. ich benutze resetChart und updateChart. Bevor Sie fortfahren, stellen Sie sicher, dass Sie überprüfen Chart.js neueste Version und Dokumentation. Sie haben möglicherweise neue Methoden hinzugefügt, um die Daten vollständig zu ersetzen.


5
2017-11-18 18:56



Ich habe das gleiche Problem, ich habe 6 Kreisdiagramme auf einer Seite, die alle gleichzeitig aktualisiert werden können. Ich verwende die folgende Funktion, um Diagrammdaten zurückzusetzen.

// sets chart segment data for previously rendered charts
function _resetChartData(chart, new_segments) {
    // remove all the segments
    while (chart.segments.length) {
        chart.removeData();
    };

    // add the new data fresh
    new_segments.forEach (function (segment, index) {
        chart.addData(segment, index);
    });
};

// when I want to reset my data I call
_resetChartData(some_chart, new_data_segments);
some_chart.update();


4
2017-09-30 23:28