ChartJS Liniendiagramm führt zum Absturz des Browsers

Question

Ich aktualisiere ein Liniendiagramm mit Hilfe von HTTP get durch ngResource und eine Rest-API. Meine Technik besteht darin, das JSON-Dataset zu erhalten und jedes Mal ein neues Diagramm zu erstellen, wenn ein Benutzer auf eine Schaltfläche klickt. Es funktioniert gut, aber auf einmal verursacht es den Absturz des Browsers. Ich habe Chrome, Firefox sowohl unter Windows als auch unter Linux getestet.

In meinem Controller:

$scope.labels = $scope.dataFromREST; 
$scope.series = ['Series A']; 
$scope.data = [$scope.dataFromREST2]; 
$scope.onClick = function (points, evt) { 
    console.log(points, evt); 
}; 
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }]; 
$scope.options = { 
    scales: { 
     yAxes: [ 
      { 
       id: 'y-axis-1', 
       type: 'linear', 
       display: true, 
       position: 'left' 

      } 
     ], 
     xAxes: [{ 
      responsive: true, 
      ticks: { 
       autoSkip: true, 
       maxTicksLimit: 20 
      } 
     }] 

    } 

}; 

In meiner index.html:

<canvas id="line" class="chart chart-line" chart-data="data" 
        chart-labels="labels" chart-series="series" chart-options="options" 
        chart-dataset-override="datasetOverride" chart-click="onClick"> 
      </canvas> 

Gibt es eine Möglichkeit, nur zu aktualisieren oder die Liniendiagramm mit den $ scope.dataFromREST Daten zu aktualisieren empfangen und nicht Jedes Mal ein neues Chart-Objekt erstellen? (Weil ich denke, der Absturz kommt von der Erstellung eines neuen Diagramms jedes Mal) Ich sehe die Funktion ".update()", aber ich kann nicht scheinen, um es zum Laufen zu bringen. Ich habe auch versucht ".destroy()" und ich bekomme immer noch den Browser zum Absturz bringen.

Wie kann ich diesen Absturz loswerden? Bitte helfen Sie!

Answer 1

Ja, es gibt eine Möglichkeit, die zugrunde liegenden Daten des chart.js-Diagramms einfach zu aktualisieren, ohne das Diagramm jedes Mal erneut instanziieren zu müssen. Sie müssen nur die Funktion von der API verwenden.

Hier ist ein Beispiel, das ich in einer meiner Apps (für Ihren speziellen Fall modifiziert) verwenden. Beachten Sie, chart ist mein chart.js Objekt (was von new Chart()... zurückgegeben wurde:

assembledData = {}; 
assembledData.data = // data from api call in an acceptable data format that chart.js understands 
assembledData.colors = // new color definition for your data so it will update correctly 
assembledData.labels = // new label definition for your data so it will update correctly 

chart.data.datasets[0].data = assembledData.data; 
chart.data.datasets[0].backgroundColor = assembledData.colors; 
chart.data.labels = assembledData.labels; 
chart.update(); 

Je nachdem, wie Ihr Diagramm verhält sich möglicherweise nicht neu definieren müssen colors und labels auf jedem Update