如何在Highcharts中维持手动触发的悬浮状态？

这个问题我之前也碰到过！Highcharts默认的交互逻辑确实会在鼠标移动时自动重置悬浮状态，不过我们可以通过几个小技巧来强制维持住这个高亮和tooltip的显示状态：

方法一：手动锁定高亮与Tooltip #

你可以主动设置点的悬浮状态，同时强制Tooltip保持显示，并阻止默认的鼠标移出重置行为：

// 获取你要锁定的目标点
const targetPoint = chart.series[0].points[2];

// 1. 触发初始悬浮事件，同时手动设置高亮状态（确保状态不会被轻易覆盖）
targetPoint.onMouseOver();
targetPoint.setState('hover');

// 2. 强制刷新并锁定Tooltip显示，设置超长隐藏延迟
chart.tooltip.refresh(targetPoint, true); // 第二个参数true表示强制触发刷新
chart.tooltip.options.hideDelay = Infinity; // 或者设置一个极大值，比如9999999

// 3. 覆盖默认的鼠标移出事件，阻止状态重置
targetPoint.onMouseOut = function() {
  // 空函数，不执行默认的重置逻辑
};

方法二：全局阻止状态重置（可选） #

如果希望鼠标在图表任意区域移动都不影响锁定的状态，可以监听图表的容器事件，阻止默认的状态重置：

// 阻止图表容器的mouseout事件触发默认重置逻辑
chart.container.addEventListener('mouseout', function(e) {
  e.stopPropagation();
});

// 鼠标移动时持续锁定目标点状态
chart.container.addEventListener('mousemove', function() {
  targetPoint.setState('hover');
  chart.tooltip.refresh(targetPoint, true);
});

恢复正常状态 #

如果之后需要取消锁定，恢复默认交互逻辑，可以执行以下代码：

// 恢复点的默认鼠标移出事件
targetPoint.onMouseOut = Highcharts.Point.prototype.onMouseOut;
// 恢复Tooltip默认隐藏延迟（Highcharts默认值为500）
chart.tooltip.options.hideDelay = 500;
// 取消点的高亮状态
targetPoint.setState('');
// 隐藏Tooltip
chart.tooltip.hide();

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