Блог

Я работаю над приложением Angular, которое использует пузырьковую диаграмму ngx-charts. Содержимое диаграммы обновляется по мере того, как пользователь сужает временной диапазон.

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

Иногда при обновлении диаграммы я получаю большой разрыв между осью y и началом оси x. Время начала / окончания диаграммы правильное, у меня просто проблема с интервалом.

Я добавляю данные на диаграмму, помещая данные в новый массив, а затем присваивая новый массив отображаемому массиву данных.

 let newData: object[] = [];
newData.push(foo);
displayedData = newData;
  

Я попытался принудительно выполнить повторный рендеринг диаграммы, чтобы данные отображались правильно.

 showChart = false; // this is attached to an *ngIf in the component HTML file
displayedData = [...displayedData];
showChart = true;
  

Время на графике корректируется с помощью подписки на значение хранилища NGXS, которое обновляется другим компонентом.

 times$.subscribe(times => {
   if (times) {
      xScaleMin = times.start;
      xScaleMax = times.stop;
   }
}
  

Есть идеи? Заранее спасибо!

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