Spline Highcharts：如何实现多行共用垂直提示线与合并Tooltip

• 我在使用Highcharts Spline图表时遇到Tooltip显示问题：图表包含两条曲线，当鼠标悬停在0 deg位置时，两条曲线都有对应数据点，但仅能看到其中一条曲线的Tooltip。
• 想要实现的效果：显示垂直辅助线，同时展示所有曲线的Tooltip（类似示例中选择“7天”后的效果）。

我尝试了以下Tooltip配置代码，但未达到预期效果：

tooltip: {
    useHTML: true,
    borderWidth: 1,
    distance: 0,
    pointFormat: `<div style="color:{series.color}"><b>{series.name} {series.unit}</b> : <b>{point.y} {series.userOptions.unit}</b></div>`,
    valueDecimals: 2,
    padding: 5,
    shared: true,
    split: false,
    enabled: true
},

解决方案 #

1. 匹配数据点x轴值
   确保两条曲线在0 deg位置的数据点x轴值完全一致（包括数据类型，比如同为数字或相同格式字符串），否则Highcharts无法识别为同一x轴位置的点，shared tooltip无法合并显示。

2. 开启垂直辅助线
   在xAxis配置中添加crosshairs属性，启用垂直辅助线：

xAxis: {
    crosshairs: true,
    // 保留原有x轴配置
}

3. 优化tooltip配置

• 确认shared: true已正确设置，这是合并多条曲线tooltip的核心开关。
• 若使用useHTML: true，检查pointFormat的HTML结构是否存在样式冲突，可先简化格式测试：

pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y} {series.userOptions.unit}</b></span><br/>'

4. 检查series的tooltip状态
   确保两条series的tooltip均处于启用状态（默认enabled为true，若手动修改过需确认）。

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