Question

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

在我的控制器中：

$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（）”，我仍然让浏览器崩溃。

我怎样摆脱那次崩溃？请帮忙！

Answer 1

是的，有一种方法可以简单地更新基础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。

ChartJS折线图导致浏览器崩溃

1 个答案: