Блог

Что у меня есть:

На chart.js существует холст, который имеет точные значения по оси x, например, от 1 до 9, У пользователя будет возможность ввести новый диапазон, который пользователь, который заинтересован в просмотре другого представления, допустим, это ограниченный объем. В моем репозитории я ограничил эту функцию и ввел значения start = 3 и end = 6 (это новое ограничение — от 3 до 6, которое я хочу видеть).

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

Что мне нужно: как принудительно обновить диаграмму?

мой репозиторий:https://stackblitz.com/edit/angular-ng2-charts-new-range-x-axis

При обновлении диаграммы labels вам также необходимо обновить соответствующие значения в data массиве вашего dataset .

Однако нет необходимости вызывать chart.update() , ng2-charts построен таким образом, что обнаружение изменений Angular позаботится об обновлении диаграммы, как только ее данные или параметры изменятся.

Вы могли бы изменить updateChart метод следующим образом, чтобы заставить его работать:

 updateChart(start, end) {
  const labels = [];
  const data = []; 
  this.lineChartLabels.forEach((l, i) => {
    if (l >= start amp;amp; l <= end) {
      labels.push(l); 
      data.push(this.seriesB[i]);
    }
  });
  this.lineChartLabels = labels;
  this.lineChartData[0].data = data;
}
  

Пожалуйста, взгляните на свой исправленный StackBlitz.