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

发布时间：2020-12-17 17:43:39 所属栏目：安全来源：网络整理

导读：我正在尝试实现highcharts-angular ?( https://github.com/highcharts/highcharts-angular)在我的角度申请并得到以下错误 Cannot read property 'chart' of undefinedat HighchartsChartComponent.updateOrCreateChart (highcharts-chart.component.ts:35)

我正在尝试实现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

不确定是什么问题

解决方法

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

它很容易理解,但是从你的stackblitz中有一些你没有遵循的指令：

1 /在共享/ 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!