Angular：HighChart TreeMap 未使用新数据进行更新答案

【问题标题】：Angular: HighChart TreeMap is not updating with the new dataAngular：HighChart TreeMap 未使用新数据进行更新
【发布时间】：2021-12-08 23:27:52
【问题描述】：

我正在尝试使用新数据更新我的 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;
}

非常感谢任何建议。

【问题讨论】：

标签： angular highcharts treemap angular2-highcharts

【解决方案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;

“SeriesOptionsType”类型上不存在属性“数据”。类型“SeriesAbandsOptions”上不存在属性“数据”。

这是因为“数据”对象被定义为可选。

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

Angular 的 Highcharts 包装器： https://github.com/highcharts/highcharts-angular#installing

【讨论】：