Angular 7 - 动态 HighChart 更新

Question

在我的 angular 解决方案中，我需要使用 Highcharts 显示一些图表。在我的 component.ts 中，我有以下代码：

import * as Highcharts from "highcharts";

highcharts = Highcharts;
  chartOptions = {
    chart: {
       type: "spline",
       title: "Reach/TRP"
    },
    xAxis: {
      title: {
        text: this.xAxis.name
      }
    },
    yAxis: {
       title: {
          text: "Reach"
       }
    },
    series: [
       {
          name: this.xAxis.name,
          data: this.xAxis.data
       }
    ]
 };

然后在我的.html中我这样使用它：

<highcharts-chart
  [Highcharts] = "highcharts"
  [options] = "chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

在我的 html 上，我还有以下下拉菜单：

<p-dropdown [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'"
  dropdownIcon="fa fa-angle-down" class= "nextgen-dropdown" 
  [options]="optionsLookup"
  [(ngModel)]="selectedOption" (onChange)= "onOptionChange($event)">
</p-dropdown>

有 "OnOptionChange" 方法应该像这样更新 Chart：

 onOptionChange() {
    this.xAxis.name = this.selectedOption;
    this.xAxis.data = [100, 100, 200, 200, 350, 250];
    this.chartOptions.series[0] = this.xAxis;
  }

这里的问题是正确调用了方法，但是图表根本没有更新。

我在这里缺少什么？

Answer 1

您应该传递新的选项参考：

onOptionChange() {
  this.xAxis.name = this.selectedOption;
  this.xAxis.data = [100, 100, 200, 200, 350, 250];
  this.chartOptions.series[0] = this.xAxis;

  this.chartOptions = { ...this.chartOptions }; // this should do the trick
}

Angular 7 - 动态 HighChart 更新

Angular 7 - Dynamic HighChart update

highcharts

typescript

angular

angular-highcharts