Angular16中Highcharts柱状图鼠标悬停事件替代方案咨询

不用再依赖已弃用的window.event，Highcharts本身的mouseOver事件回调参数已经包含了你需要的所有悬停数据。

直接从事件对象的point属性中提取当前悬停柱形的数据点即可，示例代码如下：

plotOptions: {
  series: {
    events: {
      mouseOver: (event) => {
        // 获取当前悬停的柱形数据点
        const hoveredPoint = event.point;
        if (hoveredPoint) {
          // 按需提取数据，比如x值、y值、系列名称等
          console.log('悬停柱形数据：', {
            x: hoveredPoint.x,
            y: hoveredPoint.y,
            seriesName: hoveredPoint.series.name,
            // 若有自定义字段，直接通过point对象访问
            customData: hoveredPoint.yourCustomField
          });
        }
      }
    }
  }
}

关键说明： #

• Highcharts的mouseOver事件会传入一个完整的事件对象，其中point属性就是当前悬停柱形对应的数据模型
• 除了核心的x/y值，还能通过point.series获取该柱形所属系列的信息，或者直接访问你在数据中定义的自定义字段
• 事件对象还包含鼠标位置（event.clientX/event.clientY）等额外信息，完全替代window.event的功能

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