Динамическое обновление данных о времени на графике. js замораживает график - PullRequest
Новая
       8

Динамическое обновление данных о времени на графике. js замораживает график

0 голосов
/ 02 февраля 2020

Я использую диаграмму. js через ng2-диаграммы для отображения простой линейной диаграммы, которая снабжена динамическими c данными, значение X которых является временной меткой. Поэтому я использую временную декартову ось графика. js

Когда я начинаю помещать данные в график, все в порядке, но я хочу ограничить количество отображаемых данных максимальным значение, поэтому я реализовал простой механизм, при котором самый старый элемент удаляется из массива при его заполнении.

Такое поведение приводит к зависанию диаграммы и, как следствие, показывает ошибку .

Проблема показывается в этом стеке стека: просто подождите несколько секунд, чтобы массив имел три значения (макс.):

https://stackblitz.com/edit/ng2-charts-line-template-gzhikq

Если я удаляю конфигурацию «времени» из диаграммы. js и подаю метки вручную, проблема не появляется (но это не то, что я хочу!).

https://stackblitz.com/edit/ng2-charts-line-template-rs6enh

Таким образом, проблема, похоже, связана с использованием оси времени. Я пробовал решения, описанные в вышеупомянутой ошибке, но ни одна из них не работает (вероятно, потому, что они имеют дело с симптомом, а не с причиной root). Любая помощь с благодарностью.

1 Ответ

1 голос
/ 03 февраля 2020

В своем коде вы добавляете элемент в ваш массив data и удаляете самый старый, как только будет превышен лимит в три элемента. Проблема с этим подходом состоит в том, что Angular не замечает изменений в вашем массиве data, потому что его ссылка не изменяется, а его размер остается тем же.

Проблема может быть решена путем замены массива data внутри ChartDataSets при каждом изменении данных. Вместо использования Array.shift() вы можете использовать Array.slice(). 

lineChartData: ChartDataSets[] = [{
    data: [],
    label: 'Series A'
}];

...

ngOnInit() {
    this.interval = setInterval(() => {
        const data = this.lineChartData[0].data;
        data.push({ y: Math.random(), x: new Date() });
        this.lineChartData[0].data = data.slice(data.length > 3 ? 1 : 0);
    }, 2000);
    ...
}

Пожалуйста, посмотрите на следующее StackBlitz

...