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

问题描述

我目前正在将Angular 7+与 Highcharts API 一起使用.

I am currently using Angular 7+ with Highcharts API.

我使用以下官方Github链接集成了Highcharts.

I integrated Highcharts using the following Official Github Link.

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

There is a callbackFunction in Highcharts which we can use to get the chart instance .However, i am yet to figure out 2 things:

1. 什么时候会创建图表的实际实例和options一起创建，就像Angular中的 lifecycle hook 一样?还是它独立于生命周期挂钩.

2. 我看到了一个开发人员的示例，其中他在 ngOnInit 生命周期挂钩中使用了 callbackFunction ，并且它起作用了(即，我们得到了一个图表回调实例).但是，对于 ngOnChanges 钩子来说，这是行不通的.

1. When does the actual instance of chart gets created along with the options, like in which lifecycle hook in Angular? Or is it independent of the lifecycle hooks.

2. I saw a developer's example in which he used the callbackFunction while inside the ngOnInit lifecycle hook and it worked ( i.e we got a chart instance from the callback ). However the same did not work for ngOnChanges hook.

所以我的意思是，假设有一个与graph data相关的@Input属性，该属性将由Highcharts.chart呈现(例如说追加一个新系列)，那么我将不得不在以便根据此.那我将如何获得图表实例呢?那我该怎么做一个addSeries?

So my point was that, suppose there is an @Input property related to graph data which is to be rendered by the Highcharts.chart ( like say appending a new series ), then i would have to use ngOnChanges method in order to detect changes in input property and ngOnChanges would be called before ngOnInit as per this . How would i get the chart instance then ? and how would i do an addSeries then ?

为什么 addSeries 仅在button click上起作用而不在ngOnInit中起作用?取消注释hello.component.ts内的第59行注释.

Why does addSeries work only on button click and not in ngOnInit ? Uncomment line number 59 inside hello.component.ts to see it.

链接到代码.

有关任何详细信息，请参见hello.component.ts.

Please see hello.component.ts for any details.

推荐答案

演示在这里，您只需要更新chartoptions如果要更新数据

DemoHere you just need to update chartoptionsIf you want update data

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

1. Highchart is created after you set chartoptions of Highchart

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

You can define callback ngOnchange or ngOnInit.In both it works. But you missed that your this.chartCreated.addSeries(this.newData) is not working there because it is async function so outside of callback you may not define chartCreated. If you put this code in callback function you will see that it will add new series. Your first series created with chartoptions.

它与onclick一起使用，因为在单击之前，您的回调已经定义了您的chartCreated这就是为什么click起作用的原因.

It works with onclick because before click your callback has already defined your chartCreated That is why click works.

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

As a final you don't need to create extra variable ,you can use chartoptions to update or add new series.

这篇关于在其中创建Angular生命周期挂钩的Highcharts实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！