如何设置jqPlot的highlighter在鼠标移出柱形后保持显示，直到悬停其他数据点？

出现该问题的核心原因是jqPlot highlighter默认的隐藏逻辑是鼠标离开数据点立即隐藏提示框，同时提示框默认设置了pointer-events: none无法响应鼠标事件，鼠标移入提示框会被判定为离开原数据点。可以通过以下步骤解决：

1. 调整highlighter核心配置 #

初始化jqPlot时修改highlighter的默认配置，关闭离开数据点即隐藏的逻辑，同时自定义提示框内容插入缩略图：

$.jqplot('chartContainer', [chartData], {
  // 其他图表基础配置省略
  highlighter: {
    show: true,
    // 自定义提示框内容，插入缩略图
    tooltipContentEditor: function(str, seriesIndex, pointIndex, plot) {
      // 替换为你自身的图片数据获取逻辑
      const thumbUrl = imageResourceMap[seriesIndex][pointIndex];
      return `<div class="tooltip-wrapper">
                <p>${str}</p>
                <img src="${thumbUrl}" data-lightbox="chart-img" class="tooltip-thumb" alt="预览图">
              </div>`;
    },
    // 关键配置：禁止鼠标离开数据点时自动隐藏提示框
    hideHighlightWhenMouseLeave: false,
    // 关闭提示框渐隐动画，避免切换时闪烁
    tooltipFadeSpeed: 0,
    // 调整提示框偏移量，避免和鼠标位置重叠触发异常
    tooltipOffset: 12
  },
  // 若启用了cursor插件，关闭其自带的tooltip避免冲突
  cursor: {
    showTooltip: false
  }
});

2. 覆盖提示框默认样式 #

jqPlot默认给提示框添加了pointer-events: none属性，导致无法响应鼠标事件，需要手动覆盖该样式：

.jqplot-highlighter-tooltip {
  pointer-events: auto !important;
  z-index: 9999; /* 确保提示框层级最高，不会被其他元素遮挡 */
}

3. 添加自定义切换逻辑 #

此时提示框不会自动消失，需要补充事件监听实现「悬停到其他数据点才切换提示框」的逻辑：

let lastActiveHighlight = null;

// 监听数据点悬停事件，切换高亮提示
$('#chartContainer').on('jqplotMouseEnter', function(event, seriesIndex, pointIndex, data) {
  // 先清除上一个高亮提示
  if (lastActiveHighlight) {
    $.jqplot.highlighter.clear(lastActiveHighlight.plotInstance);
  }
  // 记录当前高亮的信息
  lastActiveHighlight = {
    plotInstance: $.jqplot.instance($(this).attr('id')),
    seriesIndex: seriesIndex,
    pointIndex: pointIndex
  };
});

// 可选：如果需要鼠标离开整个图表区域时隐藏提示框，添加以下事件
$('#chartContainer').on('mouseleave', function() {
  if (lastActiveHighlight) {
    $.jqplot.highlighter.clear(lastActiveHighlight.plotInstance);
    lastActiveHighlight = null;
  }
});

注意：如果你使用的jqPlot版本没有内置hideHighlightWhenMouseLeave配置项，可以直接修改jqPlot源码中highlighter模块的mouseleave监听逻辑，移除离开数据点时触发clear()的代码即可。

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