angularjs - ChartJS折线图导致浏览器崩溃

Question

我正在使用 HTTP get 通过 ngResource 和 REST API 更新折线图。我的技术是获取 JSON 数据集并在用户每次单击按钮时创建一个新图表。它工作得很好，但有一次，它会导致浏览器崩溃。我已经在 Windows 和 Linux 上的 Chrome、Firefox 上进行了测试。

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

    }

};

在我的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 数据更新或刷新折线图，而不是每次都创建新的图表对象？ (因为我认为崩溃来自每次创建新图表)我看到“.update()”函数，但我似乎无法让它工作。我也尝试过“.destroy()”，但浏览器仍然崩溃。

我怎样才能摆脱这个崩溃？请帮忙!

Answer 1

是的，有一种方法可以简单地更新底层的chart.js图表​​数据，而不必每次都重新实例化图表。您只需要使用 update(duration, lazy)来自 API 的函数。

这是我在我的一个应用程序中使用的示例(根据您的具体情况进行修改)。请注意，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();

根据图表的行为方式，您可能不必在每次更新时重新定义颜色和标签。