HighCharts折线图null值区域悬停触发及显示左侧非空值提示框咨询

HighCharts默认不会为null值生成可交互的点位对象，所以开启connectNulls: true后，两个非空点之间的null区域没有对应的交互触发点，才会出现自动跳转到最近非空点的问题。以下方案无需修改原始数据，不会破坏原有折线的视觉效果：

实现步骤 #

1. 保留原有基础配置

你原有的connectNulls: true配置不需要修改，也不需要用非空值填充null数据，避免折线变为水平线的问题。

2. 调整交互检测规则

在plotOptions.series中配置两个参数，扩大悬停检测范围：

plotOptions: {
  series: {
    connectNulls: true,
    // 按x轴距离优先查找最近点位
    findNearestPointBy: 'x',
    // 开启 stickyTracking 保证折线区域都能触发悬停
    stickyTracking: true
  }
}

同时在全局tooltip配置中调大snap阈值，确保两个点之间的空白区域也能触发交互：

tooltip: {
  // 单位为像素，可根据你的图表宽度调整
  snap: 50
}

3. 自定义Tooltip显示逻辑

通过tooltip.formatter回调，在触发悬停时从当前x轴位置往前遍历，找到左侧最近的非空数据点显示：

tooltip: {
  snap: 50,
  formatter: function() {
    const currentX = this.x;
    const allPoints = this.series.points;
    let latestLeftValidPoint = null;

    // 遍历所有点位，找x小于等于当前值的最近非空点
    for (let i = 0; i < allPoints.length; i++) {
      const point = allPoints[i];
      if (point.x <= currentX && point.y !== null) {
        latestLeftValidPoint = point;
      } else if (point.x > currentX) {
        break;
      }
    }

    if (latestLeftValidPoint) {
      // 可根据需求自定义提示框格式
      return `时间: ${latestLeftValidPoint.category}<br/>数值: ${latestLeftValidPoint.y}`;
    }
    // 没有匹配到的场景走默认渲染逻辑
    return this.defaultFormatter.call(this);
  }
}

效果说明 #

配置完成后，鼠标悬停在两个非空点之间的null区域时，不会再跳转到最近的非空点位置，提示框会正常展示当前区域对应的左侧最近非空值，且原有connectNulls生成的连续斜线视觉效果完全不会被修改。

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