Highchart更新图表问题答案

【问题标题】：Highchart update chart issueHighchart更新图表问题
【发布时间】：2020-07-09 14:30:17
【问题描述】：

我正在根据某些场景从 API 获取系列数据，如果其中一个场景数据为空数组，图表未刷新，它仍会显示先前的值，没有得到刷新图表的正确方法

ngAfterViewInit() {
this.sink.add(this._store.pipe(select(coreSelector)).
  subscribe((data: ICore) => {
    if (data && data.hasOwnProperty(this.selectedZone)) {
      this.chartComponent.chartInstance.xAxis[0].
        setCategories(data[this.selectedZone].categories, false);
      this.updateSeries(data);
    } else {
      // this.chartComponent.chartInstance.xAxis[0].setCategories([], false);
      // this.chartComponent.chartInstance.series.forEach((chartSeries, index) => {
      //     this.chartComponent.chartInstance.series[index].setData([], false);
      // });
    }
  }));
}

updateSeries(data) {
    data[this.selectedZone].seriesData.forEach((series) => {
     this.chartComponent.chartInstance.series.forEach((chartSeries, index) => {
    if (seriesKeyMapping[series.seriesName] === chartSeries.name) {
      this.chartComponent.chartInstance.series[index].setData(series.data, false);
    }
  });
});
this.chartComponent.chartInstance.redraw();
}

我尝试将 setData 设置为空数组，但这也没有按预期工作。实现它的最佳方法是什么？

【问题讨论】：

标签： angular highcharts

【解决方案1】：

如果您在 Angular 中使用 Highcharts，建议使用官方的 highcharts-angular 包装器。使用包装器，您不必创建自己的方法来处理更新。

在这里您可以找到一个简单的演示，它将向您展示使用 highcharts-angular 更新图表的最佳方式：
https://stackblitz.com/edit/highcharts-angular-optimal-way-to-update-gd7vv2

文档参考：
https://github.com/highcharts/highcharts-angular

【讨论】：