Highcharts哑铃图多数据点悬停提示失效的解决方案

当你的 Highcharts 哑铃图在同一分类（x-axis category）下堆叠了多个数据点，你会发现鼠标移上去时，只有一个 tooltip 能正常响应，其他几个就像被忽略了一样——这通常是因为 `findNearestPointBy` 的默认逻辑只按 x 轴定位。

先直接给出结论：问题的根源在于 Highcharts 为哑铃图（dumbbell）设定的 `findNearestPointBy` 默认值是 `'x'`。也就是说，图表在寻找离鼠标最近的“目标点”时，仅仅依据 x 坐标，完全忽略 y 轴方向上的差异。即使两个哑铃段在时间轴上相距甚远，只要它们共享同一个 category（例如 "Test1" 或 "Test2"），Highcharts 就只会高亮那个 x 坐标最接近的点，其他点被静默忽略。要解决这个“屏蔽”问题很简单：将 `findNearestPointBy` 强制设为 `'xy'`，让查找机制同时考虑 x 和 y 两个维度，问题便迎刃而解。

在实际配置中，这个参数必须写在 series 级别——千万不要一股脑放到全局的 `plotOptions` 或 `chart` 里设置，因为不同系列可能有不同的交互需求。此外，该配置对 inverted 图表同样兼容，Highcharts 会自动适配坐标系方向，此时 x 依然对应类别，y 对应时间值。有一点需要提醒：如果你使用了 `tooltip.shared: true`，就不要与 `findNearestPointBy: 'xy'` 混用，两者容易产生冲突。哑铃图其实保持默认的 `shared: false` 就很好，每个哑铃段可以独立精准地响应鼠标悬停。

来看修复后的关键代码片段（已适配你的 inverted 场景）：

"series": [{  "type": "dumbbell",  "name": "Test",  "findNearestPointBy": "xy", // 关键修复：启用二维最邻近点查找，同时关注 x 和 y 轴  "data": [    { "name": "Test1", "low": 1658882324000, "high": 1699267066000, "v": "A" },    { "name": "Test1", "low": 1681067066000, "high": 1739067066000, "v": "B" },    { "name": "Test2", "low": 1658882324000, "high": 1690267066000, "v": "C" },    { "name": "Test2", "low": 1711067066000, "high": 1739067066000, "v": "D" }  ],  // 其余配置保持原样...}]

再补充几个实用的操作建议：

• 一定要在 series 层配置，别放到全局，否则可能误伤其他类型系列的交互行为；
• 这个配置对 inverted 图表同样有效，因为 Highcharts 会自动计算坐标轴的实际映射关系；
• 不要同时开启 `tooltip.shared: true` 和 `findNearestPointBy: 'xy'`，逻辑上会互相干扰，导致 tooltip 行为异常；
• 时间戳格式化依赖 `tooltip.pointFormat` 中的 `{point.low:%Y%m%d}` 这类语法，请确保 `low` 和 `high` 是合法的 JavaScript 毫秒时间戳，否则 Highcharts 无法正确解析为日期。

如果还想给用户带来更流畅的交互体验，不妨为每个数据点配置一个唯一的 `id`，或者自定义 `tooltip.headerFormat`：

"tooltip": {  "headerFormat": '{point.key}
',  "pointFormat": '{point.v}: {point.low:%Y-%m-%d} → {point.high:%Y-%m-%d}'}

这样一来，你的哑铃图就能在同一分类下支持多个区间的精细化交互，既满足了数据点的深度展示，也让用户操作更加直观——这才是哑铃图应有的交互体验。