highcharts-angular：无法读取未定义的属性“图表”

Question

我正在尝试实现 highcharts-angular (https://github.com/highcharts/highcharts-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 你需要绑定Highcharts： html:

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

ts：

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中的步骤加载您要使用的正确模块（钟形曲线）

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