创建的高级图表实例，其中角生命周期钩子

Question

我目前使用的是角7+与高级图表API。

我使用下面的官方Github链接集成了高级图表。

高图表中有一个callbackFunction，我们可以使用它来获取图表实例。然而，我还没有搞清楚两件事：

1. 图表的实际实例是什么时候与options一起创建的，比如在哪个生命周期中以角度挂钩？或者它是否独立于生命周期挂钩。
2. 我看到了一个开发人员的例子，他在ngOnInit生命周期钩子中使用了ngOnInit，它起作用了(也就是说，我们从回调中得到了一个图表实例)。然而，对于ngOnChanges钩子来说，同样的情况并不适用。 因此，我的观点是，假设有一个与graph data相关的graph data属性，它将由Highcharts.chart呈现(比如追加一个新的系列)，那么我必须使用ngOnChanges方法来检测输入属性的变化，并且在ngOnInit之前调用ngOnChanges。那么我如何得到图表实例呢？那我该怎么做addSeries呢？
3. 为什么addSeries只在button click上工作，而在ngOnInit中不起作用？取消注释行号59在hello.component.ts内查看它。

链接到代码。

如需详细资料，请参阅hello.component.ts。

Answer 1

这里的演示 --如果您想要更新数据，只需要更新图表

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

如果您想添加新的系列

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

1. 海图是在你设置海图的图表之后创建的。
2. 您可以定义回调ngOnchange或ngOnInit.In，它们都可以工作。但是您忽略了your this.chartCreated.addSeries(this.newData)没有在那里工作，因为它是异步函数，所以在回调之外，您可能不会定义chartCreated。如果将此代码放入回调函数中，您将看到它将添加新的系列。你的第一个系列是用字符创建的。
3. 它适用于onclick，因为在单击之前，您的回调已经定义了您的chartCreated，这就是为什么单击有效。

最后，您不需要创建额外的变量，您可以使用图表来更新或添加新的系列。

Answer 2

根据addSeries给出的解释，我删除了addSeries并在ngOnChanges中实现了它。

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”，以及“图表实例是在设置了的选项之后创建的”。