highcharts-angular: невозможно прочитать свойство 'chart' из неопределенного

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

---

Легко следовать, но из вашего стекаблица есть некоторые инструкции, которые вы не выполняли:

1 / in shared/Highcharts/bellcurve/bellcurve-chart.component, вам нужно связать 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 / вам нужно загрузить нужный модуль, который вы хотите использовать (bellcurve), выполнив шаги в 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