我正在尝试实现 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
不知道是什么问题
最佳答案
通过使用 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;
}
那就是,检查这里的工作代码:
关于angular - highcharts- Angular : Cannot read property 'chart' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51203530/