angular - highcharts- Angular : Cannot read property 'chart' of undefined

Question

我正在尝试实现 highcharts-angular ( https://github.com/highcharts/highcharts-angular ) 在我的应用 Angular 中出现以下错误

Cannot read property 'chart' of undefined
at HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:35)

我想使用 bellcurve 模块，但无法正常工作。

我尝试使用 stackblitz 重现我的问题

请参阅https://stackblitz.com/edit/angular-unf7pz

不知道是什么问题

Answer 1

---

通过使用 https://github.com/highcharts/highcharts-angular

---

它很容易理解，但是从你的 stackblitz 中有一些你没有遵循的说明:

1/在 shared/Highcharts/bellcurve/bellcurve-chart.component 中你需要绑定(bind) Highcharts: HTML:

<highcharts-chart 
  [Highcharts]="Highcharts" --> ITS REQUIRED
  [options]="options"       --> ITS REQUIRED

:

import * as Highcharts from 'highcharts';
...
export class BellCurveChartComponent implements OnInit {
    Highcharts = Highcharts;
    options = {title: ..., xAxis: ...};
    ...
}

阅读https://github.com/highcharts/highcharts-angular#general-prerequisites

2/您需要按照 https://github.com/highcharts/highcharts-angular#to-load-a-module 中的步骤加载您要使用的正确模块 (bellcurve)

import bc from 'highcharts/modules/histogram-bellcurve.js';
bc(Highcharts);

3/如果要使用图表实例，使用回调函数callbackFunction

HTML:

 [callbackFunction]="getInstance.bind(this)"

TS:

 getInstance(chart): void {
    // chart instance
    this.chart = chart;
 }

那就是，检查这里的工作代码:

https://stackblitz.com/edit/angular-k85q94