ChartJS折線圖導致瀏覽器崩潰

我正在使用HTTP獲取通過ngResource和其餘API獲取折線圖。我的技術是獲取JSON數據集並在用戶每次點擊按鈕時創建一個新圖表。它工作的很好，但一度導致瀏覽器崩潰。我已經在Windows和Linux上的Chrome，Firefox上進行了測試。ChartJS折線圖導致瀏覽器崩潰

在我的控制器：

$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 
      } 
     }] 

    } 

};

在我的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>

有沒有辦法只更新或刷新折線圖與$ scope.dataFromREST收到的數據，而不是每次都創建一個新的Chart對象？（因爲我認爲，崩潰來自每次創建新圖表）我看到「.update（）」函數，但似乎無法使其工作。我也嘗試了「.destroy（）」，我仍然讓瀏覽器風暴崩潰。

我該如何擺脫這種崩潰？請幫忙！

來源

2017-02-24 kabrice

讓我知道。如果我的答案不適合你，那麼當你說'update'函數不起作用時，理解你嘗試過的是什麼樣的事情會很好。 – jordanwillis

是的，有一種方法可以簡單地更新底層chart.js圖表數據，而無需每次都重新實例化圖表。你只需要使用API中的update(duration, lazy)函數。

以下是我在其中一個應用中使用的示例（針對您的特定情況進行了修改）。注意，chart是我chart.js之對象（什麼是從new Chart()...返回：

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();

根據圖表的行爲，你可能不會對每次更新重新定義colors和labels

來源

2017-02-27 16:56:44 jordanwillis

ChartJS折線圖導致瀏覽器崩潰

回答

相關問題