Highcharts时间线图表：点击柱形时获取Y轴时间坐标的方法

你碰到的这个问题其实是Highcharts事件机制的常见情况——柱形（也就是数据点元素）会优先拦截点击事件，导致图表容器的click事件根本接收不到。所以转向series或者point的事件是完全正确的思路，下面我给你具体的实现方案，帮你拿到需要的Y轴时间值：

最佳方案：使用pointClick事件精准获取 #

直接绑定数据点的pointClick事件是最靠谱的，因为它直接对应单个柱形，回调里能直接拿到当前点击的柱形数据，进而提取Y轴时间值：

Highcharts.chart('container', {
  chart: {
    type: 'timeline'
  },
  yAxis: {
    type: 'datetime' // 务必确保Y轴是时间类型，否则时间值会出错
  },
  series: [{
    data: [
      {
        x: 0,
        y: Date.UTC(2024, 0, 1),
        name: 'Idle',
        label: 'Idle Period'
      },
      {
        x: 1,
        y: Date.UTC(2024, 0, 5),
        name: 'Active',
        label: 'Active Period'
      }
    ],
    events: {
      pointClick: function(event) {
        // 获取当前点击的柱形数据点
        const targetPoint = event.point;
        
        // 拿到柱形本身的Y轴时间戳
        const yTimeStamp = targetPoint.y;
        // 转换成易读的时间格式
        const readableTime = new Date(yTimeStamp).toLocaleString();
        
        console.log('柱形对应的Y轴时间戳:', yTimeStamp);
        console.log('可读时间:', readableTime);

        // 如果你的需求是获取点击位置的坐标对应的Y轴时间值（而非柱形数据的y值）
        // 可以用Y轴的toValue方法转换点击的像素坐标
        const coordBasedYValue = this.chart.yAxis[0].toValue(event.chartY);
        console.log('点击坐标对应的Y轴时间戳:', coordBasedYValue);
      }
    }
  }]
});

关键细节说明 #

1. 为什么不用series的click事件？
   series的click事件也能触发，但它返回的是整个series的上下文，需要通过event.point才能拿到当前点击的柱形，而pointClick直接绑定到单个数据点，逻辑更清晰。

2. 如果需要点击任意位置的Y轴值怎么办？
   如果你不仅想点击柱形，还想点击图表空白区域时也能获取Y轴时间值，那可以同时绑定图表的click事件，再结合柱形的事件：

   chart: {
     type: 'timeline',
     events: {
       click: function(event) {
         const yValue = this.yAxis[0].toValue(event.chartY);
         console.log('图表空白处点击的Y轴时间戳:', yValue);
       }
     }
   }
   

   不过要注意，此时点击柱形时，pointClick和图表的click都会触发（因为事件冒泡），如果不需要这种效果，可以在pointClick里调用event.stopPropagation()阻止冒泡。

3. 关于Y轴类型
   一定要确保Y轴的type设置为datetime，这样toValue返回的才是正确的时间戳，否则会是数值类型的轴值，无法直接转换为时间。

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