Блог

Главная - Вопросы по программированию - Angular: древовидная карта HighChart не обновляется с новыми данными

Angular: древовидная карта HighChart не обновляется с новыми данными

#angular #highcharts #treemap #angular2-highcharts

#angular #верхние диаграммы #древовидная карта #angular2-верхние диаграммы

Вопрос:

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

Также вариант, который был предложен на нескольких страницах, похоже, не работает:

 this.chartOptions.series[0].data = this.datatable; // ERROR

Вот весь код в stackblitz и метод обновления:

 handleUpdate() {
this.chartOptions.title = {
  text: 'updated'
};
this.datatable = [{
  name: 'A',
  value: 6,
  colorValue: 1
}, {
  name: 'B',
  value: 6,
  colorValue: 2
}];
this.chartOptions.data = this.datatable;
this.updateFlag = true;
}

Любое предложение приветствуется.

Ответ №1:

Новые данные должны быть последовательно введены в объект chartOption. Основываясь на вашем коде, я изменил код handleUpdate.

 handleUpdate() {
  this.chartOptions.title = {
    text: 'updated',
  };
  this.datatable = [
    {
      name: 'A',
      value: 4,
      colorValue: 1,
    },
    {
      name: 'B',
      value: 6,
      colorValue: 2,
    },
  ];

  // modified code 1
  this.chartOptions.series[0] = {
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    alternateStartingDirection: true,
    data: this.datatable,
  };
  
  // modified code 2
  this.chartOptions.series[0]['data'] = this.datatable;

  this.updateFlag = true;
}

Используйте измененный код 1 или 2.

Если вы напишете код, как показано ниже, вы столкнетесь со следующей ошибкой.

 this.chartOptions.series[0].data = this.datatable;

Свойство ‘data’ не существует для типа ‘SeriesOptionsType’.
Свойство ‘data’ не существует для типа ‘SeriesAbandsOptions’.

Это связано с тем, что объект ‘data’ определен как необязательный.

 export interface SeriesTreemapOptions extends PlotTreemapOptions, SeriesOptions {
    data?: Array<(number|null|PointOptionsObject)>;
    dataParser?: undefined;
    dataURL?: undefined;
    stack?: undefined;
    type: "treemap";
}

Ответ №2:

Вы пропустили ссылку на диаграмму, нет обратного вызова, который устанавливает ссылку на диаграмму. Если вы хотите обновить диаграмму, обратитесь к chartRef, и она будет работать.

   chartCallback: Highcharts.ChartCallbackFunction = chart => {
    this.chartRef = chart;
  };

Живая демонстрация:
https://stackblitz.com/edit/highcharts-angular-basic-line-nteedw?file=src/app/app.component.ts

Оболочка Highcharts для Angular: https://github.com/highcharts/highcharts-angular#installing

Метки: