Highcharts 实例在其中创建 Angular 生命周期钩子

Question

我目前正在使用带有 Highcharts API 的 Angular 7+。

我使用以下 Official Github Link 集成了 Highcharts。

Highcharts 中有一个callbackFunction，我们可以使用它来获取图表实例。 但是，我还没有弄清楚两件事：

1. chart 的实际实例 何时与options 一起创建，例如Angular 中的哪个生命周期挂钩？还是它独立于生命周期钩子。

2. 我看到了一个开发者的例子，他在 ngOnInit 生命周期钩子中使用了 callbackFunction 并且它起作用了（即我们从打回来 ）。但是，对于 ngOnChanges 钩子，同样的方法不起作用。

   所以我的意思是，假设有一个与 graph data 相关的 @Input 属性将由 Highcharts.chart 呈现（比如附加一个新系列），那么我将不得不使用 ngOnChanges 方法为了检测输入属性的变化，ngOnChanges 将在 ngOnInit 之前按照this 调用。那么我将如何获得图表实例？那么我将如何做一个 addSeries 呢？

3. 为什么 addSeries 仅在 button click 上有效，而在 ngOnInit 中无效？取消注释hello.component.ts 内的第 59 行以查看它。

Link to the code.

详情请见hello.component.ts。

Answer 1

根据@pc_coder 给出的解释，我删除了 ngOnInit，并在 ngOnChanges 内部实现了 addSeries 并且它起作用了.

export class HelloComponent implements OnChanges {
  @Input() name: string;
  @Input() newData: any;
  title = 'AngularTest';
  chartCreated;


  Highcharts: typeof Highcharts = Highcharts;
  chartCallback: Highcharts.ChartCallbackFunction;
  updateFlag: boolean = false;
  clicked:boolean = false;

  chartOptions: Highcharts.Options = {
    series: [{
      data: [1, 2, 3],
      type: 'line'
    }]
  };

  // ngOnInit(){
  //   console.log('Inside ngOnInit');
  //   this.chartCallback = (chart) => {
  //               this.chartCreated = chart;
  //               console.log('chart: ' + chart); // shows object
  //           }
  //  
  // }

  ngOnChanges(){
    console.log('Inside ngOnchanges');
    this.chartCallback = (chart) => {                  
                this.chartCreated = chart;
                console.log('chart: ' + chart);
                this.chartCreated.addSeries(this.newData); // This worked :)
            }

  }


  onClick(){
    if(this.clicked==false){
      this.chartCreated.series[0].data[0].update(4);
      this.clicked = true;
    //this.chartCreated.addSeries(this.newData); // works on uncommenting  
    }
    else{
      this.chartCreated.series[0].data[0].update(1);
      this.clicked = false;
    }
  }
}

它支持他的观点：“回调是异步的，不依赖于 OnInit/OnChanges”，并且“图表实例是在设置选项后创建的 ”。

Answer 2

Demo 在这里你只需要更新chartoptions 如果你想更新数据

ngOnChanges(){
    console.log(this.newData); 
    this.chartOptions.series[0]=this.newData;      
  }

如果你想添加新系列

ngOnChanges(){
    console.log('Inside ngOnchanges');
    this.chartOptions.series.push(this.newData)   
  }

1. 设置Highchart的图表选项后创建Highchart

2. 您可以定义回调 ngOnchange 或 ngOnInit。在这两者中它都有效。但是您错过了your this.chartCreated.addSeries(this.newData) 在那里不起作用，因为它是异步函数，因此在回调之外您可能无法定义chartCreated。如果将此代码放入回调函数中，您将看到它将添加新系列。您使用图表选项创建的第一个系列。

3. 它适用于 onclick，因为在点击之前，您的回调已经定义了您的 chartCreated 这就是点击有效的原因。

作为final你不需要创建额外的变量，你可以使用chartoptions来更新或添加新的系列。