Highcharts Tooltip获取光标精确X轴位置及值显示问题求助

问题背景 #

基于Highstock开发多图表类型方案，使用boost、xrange模块，遇到两个核心问题：

• 需求Tooltip显示鼠标当前位置的精确时间，而非数据点的计算范围
• 需始终显示光标左侧系列的最新值，但绿色温度系列值频繁跳变（如3月11日附近在19.85°C和19.68°C间切换）。已尝试自定义mousemove事件刷新Tooltip、调整plotoptions.series.stickyTracking和tooltip.snap参数，均无效；且Tooltip formatter中this.x绑定的是最近数据点而非鼠标位置。

现有实现代码 #

自定义mousemove事件 #

chart.container.addEventListener('mousemove', function(e) {
  const xValue = chart.xAxis[0].toValue(chart.pointer.normalize(e).chartX);
  const points = [];  
  
  chart.series.filter(s => s.type === "xrange").forEach(s => {
    s.points.forEach(p => {
        const { x, x2 } = p;
      if (xValue >= x && xValue <= x2) points.push(p);
    })
  })
  
  chart.series.filter(s => s.type !== "xrange").forEach(s => {
    const point = s.points.reverse().find(p => p.x <= xValue);
    if(point) points.push(point);
  })

  if (points.length) chart.tooltip.refresh(points, chart.pointer.normalize(e));
})

Tooltip配置及格式化函数 #

tooltip: {
    shared: true,
    followPointer: true,
    backgroundColor: "#FFF",
    borderColor: "#AAAAAA",
    borderRadius: 5,
    shadow: false,
    useHTML: true,
    formatter: function(){
        const header = createHeader(this.x)
      
      return `
        <table>
            ${header}
        </table>
      `
    }
},

const createHeader = x => {
    const headerFormat = '%d.%m.%Y, %H:%M Uhr';
  const dateWithOffSet = x - new Date(x).getTimezoneOffset() * 60 * 1000;
  return `<tr><th colspan="2" style="text-align: left;">${Highcharts.dateFormat(headerFormat, dateWithOffSet)}</th></tr>`
}

解决方案 #

1. 实现Tooltip显示鼠标精确位置时间 #

核心是绕过数据点的x值，直接获取鼠标对应的x轴坐标值：

• 修改Tooltip formatter函数，直接通过chart.pointer.getCoordinates()获取当前鼠标的精确x轴值：

formatter: function() {
    // 获取鼠标位置对应的x轴精确值
    const mouseX = this.chart.pointer.getCoordinates().xAxis[0].value;
    const header = createHeader(mouseX);
    
    return `
        <table>
            ${header}
            <!-- 保留原有系列内容渲染逻辑 -->
        </table>
    `
}

• 此方法无需修改mousemove事件，直接在formatter中获取真实鼠标位置的时间，彻底解决this.x绑定数据点的问题。

2. 解决温度系列值跳变问题 #

当前reverse().find()的逻辑存在顺序隐患，改用二分查找高效定位最新有效数据点：

• 替换非xrange系列的点查找逻辑：

chart.series.filter(s => s.type !== "xrange").forEach(s => {
    const points = s.points;
    // 确保数据点按时间正序排列（若数据本身无序则添加此行）
    points.sort((a, b) => a.x - b.x);
    
    let left = 0, right = points.length - 1;
    let targetPoint = null;
    // 二分查找小于等于xValue的最后一个点
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        if (points[mid].x <= xValue) {
            targetPoint = points[mid];
            left = mid + 1; // 继续查找更晚的点
        } else {
            right = mid - 1;
        }
    }
    if (targetPoint) points.push(targetPoint);
})

• 额外优化：禁用温度系列的stickyTracking，确保鼠标移动时实时更新：

plotOptions: {
    line: { // 对应温度系列的图表类型
        stickyTracking: false
    }
}

内容的提问来源于stack exchange，提问作者s.Bergmann