如何使用custom-events库实现Highcharts悬停坐标轴标签时获取points数据

可以实现，使用custom-events库完全可以满足你悬停坐标轴标签时，获取和tooltip formatter内结构一致的points数据的需求，具体实现逻辑如下：

• 首先确认你已经引入了highcharts-custom-events模块，这个模块扩展了Highcharts原生的事件绑定能力，支持给坐标轴标签、图例等非图表元素绑定自定义交互事件
• 给你需要监听的坐标轴（通常是X轴）配置labels.customEvents.mouseover事件回调，在回调内可直接拿到当前悬停标签对应的分类索引或对应数值
• 回调内通过当前的chart实例，遍历所有系列的data数组，取出对应索引下的所有数据点，组装后就是你需要的points数据，和tooltip formatter回调里拿到的points结构完全一致

核心配置参考代码：

xAxis: {
  type: 'category',
  labels: {
    customEvents: {
      mouseover: function (e) {
        // 拿到当前悬停标签对应的分类索引
        const pointIndex = this.pos;
        // 组装和tooltip formatter结构完全一致的points数组
        const points = this.chart.series.map(series => series.data[pointIndex]);
        // 此处points可直接投入业务逻辑使用
        console.log(points);
      }
    }
  }
},
tooltip: {
  useHTML: true,
  formatter(this: { points: any[] }) {
    // 此处的内置points变量和上面组装的points结构完全一致
  }
}

如果你使用的是数值型坐标轴，只需要把通过索引匹配的逻辑，改成通过标签对应的数值匹配对应范围的points即可，整体逻辑和上述分类轴的处理方式一致。

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