Highcharts创建后添加/移除事件，无法获取图表属性问题

嗨，我来帮你搞定这个问题！你遇到的核心问题是事件绑定的目标错了——你把Highcharts的图表事件绑定到了DOM元素上，而不是Highcharts的图表实例本身，所以拿到的event是原生DOM事件，自然没有xAxis这类图表专属属性。

问题原因拆解 #

当你用Highcharts.addEvent(this.chartTarget.nativeElement, 'selection', ...)时，绑定的是DOM元素的原生事件，而不是Highcharts封装的图表事件。只有绑定到图表实例上，触发的事件才会包含Highcharts提供的xAxis、chart等上下文属性。

修复步骤&代码示例 #

1. 先保存图表实例：在图表初始化完成后，把Highcharts返回的图表实例存下来，这样后续才能绑定正确的事件。
2. 绑定事件到图表实例：用保存的实例来调用Highcharts.addEvent，而不是DOM元素。

修改你的代码如下：

首先在组件里添加一个变量存储图表实例：

import { Component, ElementRef, ViewChild } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  // 组件元数据...
})
export class AppComponent {
  @ViewChild('chartTarget') chartTarget!: ElementRef;
  private chartInstance!: Highcharts.Chart; // 新增：存储图表实例

  ngAfterViewInit() {
    this.initChart();
  }

  private initChart(): void {
    this.chartInstance = Highcharts.chart(this.chartTarget.nativeElement, {
      // 你的图表配置项（比如xAxis、series等）
      xAxis: {
        type: 'datetime'
      },
      // ...其他配置
    });

    this.addEvents(); // 初始化完成后添加事件
  }

  private addEvents(): void {
    // 绑定selection事件到图表实例
    const selectionHandler = (event: Highcharts.SelectionEventObject) => {
      // 现在可以正常获取xAxis的属性了！
      if (event.xAxis && event.xAxis[0]) {
        console.log('selection->x-min: ', event.xAxis[0].min);
        console.log('selection->x-max: ', event.xAxis[0].max);
      }
    };

    Highcharts.addEvent(this.chartInstance, 'selection', selectionHandler);

    // 如果需要移除事件，保存handler引用后调用removeEvent
    // Highcharts.removeEvent(this.chartInstance, 'selection', selectionHandler);
  }
}

移除事件的注意点 #

如果之后需要移除这个事件，一定要保存addEvent时传入的事件处理函数引用（比如上面的selectionHandler），然后调用Highcharts.removeEvent(this.chartInstance, 'selection', selectionHandler)来移除，这样才能准确解绑对应的事件监听。

内容的提问来源于stack exchange，提问作者KarLito