如何配置Highcharts提示框：切换至下一个点或始终显示左侧数据点

嘿，我来帮你搞定这个Highcharts提示框的问题！

首先得明确：目前Highcharts官方还没有专门的配置项能直接实现「始终显示指针位置左侧数据点，直到移动到下一个点」的需求，但我们可以通过自定义事件和手动控制提示框的方式来达成效果，而且逻辑并不复杂。

核心实现思路 #

• 监听图表的mousemove事件，实时获取鼠标在图表内的X轴坐标
• 遍历系列数据，筛选出X值小于等于当前鼠标X坐标的最大数据点（也就是左侧最近的那个点）
• 手动调用提示框的refresh()方法，强制显示这个目标点的信息

完整示例代码 #

以下是基于你的示例修改后的可运行代码：

$(function () {
    $('#container').highcharts({
        tooltip: {
            followPointer: true,
            // 关闭自动提示逻辑，我们手动控制显示内容
            enabled: false
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],
        chart: {
            events: {
                mousemove: function(e) {
                    const chart = this;
                    const xAxis = chart.xAxis[0];
                    // 把鼠标的像素坐标转换成X轴的数值
                    const mouseXValue = xAxis.toValue(e.chartX);
                    const series = chart.series[0];
                    let targetPoint = null;

                    // 遍历数据，找到左侧最近的点（因为X轴有序，遇到第一个大于的就停止）
                    series.data.forEach(point => {
                        if (point.x <= mouseXValue) {
                            targetPoint = point;
                        } else {
                            return false;
                        }
                    });

                    // 找到目标点后刷新提示框
                    if (targetPoint) {
                        chart.tooltip.refresh(targetPoint);
                    }
                },
                mouseout: function() {
                    // 鼠标移出图表时隐藏提示框
                    this.tooltip.hide();
                }
            }
        }
    });
});

关于近年新增功能的说明 #

截至2024年，Highcharts官方并没有新增针对这类需求的专属配置项，这类自定义提示框逻辑的场景，仍然需要通过手动监听事件+控制提示框的方式实现。不过官方在tooltip的功能上有一些细节优化，比如tooltip.split、tooltip.shared等配置的增强，但都不是直接对应这个需求的。

另外，如果是你之前提到的「显示上一个数据点」的旧需求，也可以基于上面的思路修改：找到当前鼠标对应的点后，取它的前一个点即可，注意处理第一个点没有前序点的边界情况就行。

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