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

我目前正在使用Angular 7+和

我使用以下方法集成了Highcharts

Highcharts中有一个

callbackFunction

，我们可以使用它来获取图表实例。 然而，我还没有弄清楚两件事：

什么时候创建图表的实际实例以及

选项

，如Angular中的生命周期挂钩？或者它独立于生命周期挂钩

我看到一个开发人员的例子，他在

中使用了

生命周期钩子，并且运行正常（即我们从回调中获得了一个图表实例）。但是，对于

ngOnChanges

钩子，同样的方法不起作用

所以我的观点是，假设有一个

@Input

属性与

图形数据相关，它将由Highcharts.chart呈现（比如说附加一个新的系列），然后，我必须使用ngOnChanges方法来检测输入属性中的更改，并且将在ngOnInit之前调用ngOnChanges。那么我如何获得图表实例呢？那我怎么做一个addSeries呢

为什么

addSeries

只在

按钮点击时起作用而不在ngOnInit中起作用？取消对
hello.component.ts中的行号59的注释以查看它

有关详细信息，请参见

hello.component.ts

。

在这里，您只需要更新图表选项 如果你想更新数据

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

如果您想添加新系列

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

Highchart是在设置Highchart的chartoptions后创建的

您可以定义回调ngOnchange或ngOnInit。在这两种情况下都可以使用。但是您错过了

您的this.chartCreated.addSeries（this.newData）

在那里不起作用，因为它是异步函数，所以在回调之外您可能无法定义

chartCreated

。若你们把这段代码放在回调函数中，你们会看到它会添加新的序列。使用chartoptions创建的第一个系列

它与onclick一起工作，因为在单击之前，您的回调已经定义了您的

chartCreated

，这就是单击工作的原因

---

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

根据@pc\u coder给出的解释，我删除了

ngOnInit

，并在

内部实现了

添加序列

，效果良好

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”，并且“图表实例是在设置选项后创建的””

您应该共享您尝试的代码。是否查看并告知是否还需要其他内容？是否要从appcomponent发送并在hellocomponent中自动更改？是的，我希望出现与我单击按钮时相同的现象，且第59行未注释。i、 添加更多的series.hello.component.ts会保持图表，对吗？如果是这种情况，我建议该组件的ngOnInit（）函数将引导您访问其子组件，如购物车及其属性。这就是为什么你没有定义。ngOnChanges（）钩子在ngOnInit钩子之前被调用。请阅读（特别是第二个蓝色方框：）谢谢您的回复。但你能简要回答我提出的3个问题吗？使用addSeries也没有办法吗？我用您的问题更新了答案@KL_KISNE_DEKHA_hai谢谢您的回复。我可以说图表回调和addSeries与您的结论都是异步的吗？回调是ayncok，谢谢您的澄清。我发布了一段代码来支持你的解释。看一看并在初始加载完成后启动回调。这意味着，当您添加内部回调时。这意味着查特已经准备好添加系列了。嘿@pc_编码器，谢谢你。这确实帮了大忙。你能把我的问题也投赞成票吗：）。让更多的人参与进来。