Angular 2中如何为Highcharts柱状图添加点击事件？

我来给你梳理下可行的解决方案，刚好之前也遇到过类似的场景——不想在Highcharts配置里写事件，也没法用Angular的<chart>指令，那咱们就用Highcharts原生的事件绑定API来搞定。

先说说你原来代码的问题 #

你之前写的chart.series.click = this.clickBars()有两个坑：

• chart.series是个数组，存着图表里所有的系列对象，直接给它加click属性根本不生效；
• this.clickBars()是直接调用了函数，而不是把函数引用传给事件，就算改成this.clickBars，这种直接赋值的方式也不符合Highcharts的事件绑定规则，必须用官方提供的addEvent方法。

正确的实现方式 #

方案1：绑定单个柱子（点）的点击事件 #

这是最常用的场景——点击每一根柱子时触发事件，代码这么写：

import * as Highcharts from 'highcharts';

// 先初始化你的柱状图
const chart = new Highcharts.Chart('container', Class1.createBarChart());

// 用Highcharts.addEvent绑定图表的点击事件，判断点击的是柱子
Highcharts.addEvent(chart, 'click', (event) => {
  // event.point存在就说明点击的是柱子
  if (event.point) {
    this.clickBars(event.point);
  }
});

// 你的事件处理函数，可以拿到点击的柱子数据
clickBars(point?: Highcharts.Point) {
  console.log('柱子被点击啦！', '类别：', point?.category, '数值：', point?.y);
}

方案2：绑定整个系列的点击事件 #

如果你需要点击系列区域（比如柱状图的系列标签附近）触发事件，可以遍历所有系列绑定：

// 遍历图表的所有系列，给每个系列绑定点击事件
chart.series.forEach(series => {
  Highcharts.addEvent(series, 'click', (event) => {
    this.clickBars(series);
  });
});

clickBars(series?: Highcharts.Series) {
  console.log('系列被点击啦！', '系列名称：', series?.name);
}

注意Angular的this指向问题 #

一定要用箭头函数来写事件回调，这样this才能指向你的组件实例，不然this.clickBars会找不到方法。如果不想用箭头函数，也可以手动绑定this：

Highcharts.addEvent(chart, 'click', function(event) {
  if (event.point) {
    this.clickBars(event.point);
  }
}.bind(this));

可选：清理事件监听避免内存泄漏 #

如果你的组件会频繁销毁重建，记得在组件销毁时移除事件监听：

// 保存事件监听的引用
private clickListener?: Highcharts.EventCallbackFunctionReturnType;

// 初始化时绑定
ngOnInit() {
  const chart = new Highcharts.Chart('container', Class1.createBarChart());
  this.clickListener = Highcharts.addEvent(chart, 'click', (event) => {
    if (event.point) {
      this.clickBars(event.point);
    }
  });
}

// 组件销毁时移除
ngOnDestroy() {
  this.clickListener?.remove();
}

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