HighCharts/Highstock：如何通过代码绘制鼠标跟随竖线

当然可行！那条跟随鼠标的竖线是Highstock的crosshair，默认只有在鼠标hover图表时才会自动触发渲染，但通过Highcharts的API我们可以手动控制它的显示，完美适配你说的「代码触发提示框同步UI」的场景。

下面是具体的实现步骤：

1. 确保图表已开启Crosshair #

首先确认你的x轴配置里已经启用了crosshair（如果之前鼠标hover能显示，这一步应该已经做好了）：

Highcharts.stockChart('container', {
    xAxis: {
        crosshair: true, // 开启x轴crosshair，也可以配置颜色、宽度等细节
        // 比如更自定义的配置：
        // crosshair: {
        //     color: '#999',
        //     width: 1,
        //     dashStyle: 'shortdot'
        // }
    },
    // 其他图表配置...
});

2. 代码触发Tooltip时同步绘制Crosshair #

当你通过代码调用tooltip.refresh()触发提示框时，紧接着调用x轴的drawCrosshair()方法，把crosshair定位到目标数据点的x位置即可：

// 假设chart是你的Highstock实例，targetPoint是你要显示Tooltip的目标数据点
chart.tooltip.refresh(targetPoint);
// 同步绘制crosshair到该点的x轴位置
chart.xAxis[0].drawCrosshair(null, targetPoint);

如果是通过x轴数值而非数据点定位，也可以这样做：

const targetXValue = 1620000000000; // 目标x轴时间戳（或数值）
const xAxis = chart.xAxis[0];
// 将x值转换为像素位置，然后绘制crosshair
xAxis.drawCrosshair(null, { x: targetXValue });

3. 不需要时隐藏Crosshair #

当切换到其他UI状态需要隐藏crosshair时，调用hideCrosshair()方法即可：

chart.xAxis[0].hideCrosshair();

原理说明 #

默认情况下，crosshair是绑定在图表的mousemove事件上触发渲染的，而代码触发tooltip时并没有触发鼠标移动事件，所以需要我们手动调用Highcharts提供的API来主动绘制crosshair，这样就能和tooltip同步显示啦。

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