创建后添加高图表事件

Question

我不想在创建图表后添加和删除事件。问题是我无法通过处理事件来获取图表的属性。喜欢：

event.xAxis[0].min

我创建了一个示例：

https://stackblitz.com/edit/angular-sw9fbo?file=src%2Fapp%2Fapp.component.ts 第 55 行：

private addEvents(): void {    
Highcharts.addEvent(this.chartTarget.nativeElement, 'selection', (event) => {
// problem can't get xAxis or any properties of the chart
console.log('selection->x-min: ', event.xAxis[0].min); 
});
}

编辑：

更新的堆栈闪电战

Answer 1

你的代码有两个小缺陷，它们破坏了行为：

首先，您需要实际调用addEvents方法。 而不是在第 43 行中this.addEvents;，您需要调用this.addEvents();

其次，Highcharts.addEvent()-方法希望您传递实际的图表对象 - 而不是对其容器的引用。因此，将第 50 行更改为

Highcharts.addEvent(this.chart, 'selection', (event) => {

以传递上面创建的图表。

编辑：

要删除 TypeScript 编译错误并获得完整的自动完成功能，您需要从 npm 手动安装相应的类型包。

npm install --save @types/highcharts

相应地导入特定的事件类型'在文件顶部。

import {ChartSelectionEvent} from 'highcharts';

最后，将Type 相应地添加到函数签名中。

Highcharts.addEvent(this.chart, 'selection', (event: ChartSelectionEvent ) => {

我相应地更新了您的堆栈闪电战代码。