具有多个区域范围和线系列的 Highcharts 鼠标跟踪行为

Question

我创建了一个图表，它使用 arearange 系列作为一种甘特图覆盖 line 系列。

问题是，当鼠标悬停在 arearange 系列上时，当您从左向右移动光标时，工具提示会跳转到其他系列。下图显示了这种效果（红点表示鼠标位置）：

我已尝试按照 API 中所述设置以下选项：

plotOptions.series.stickyTracking: false
tooltip.shared: false

我什至尝试过：tooltip.snap: 0

但是跳跃效果还是出现了。我的目的是插入 mouseOver 和 mouseOut 事件，以便我可以在图表下方显示一些额外的详细信息 - 然而，这对于当前行为是不可行的。

是否可以让 mouseOver 和 mouseOut 事件仅在光标直接移动到系列上时触发？这是我的配置问题还是当前 highcharts 版本的限制？

Answer 1

根据 Highcharts GitHub 页面的 this 建议，我在我的区域范围内插入了一些额外的点，以便工具提示可以找到最近的点（与我之前的线相反）期待）。

查看此 JSFiddle 示例。

arearange插值函数：

function interpolateAreaRange(data, splitBy) {
  var interpolate = function(x1, x2, x3, y1, y2) {
    return y1 + (y2 - y1) * (x2 - x1) / (x3 - x1);
  };
  var newData = [],
    step = 0,
    xStart = 0,
    xEnd = 0,
    xNew = 0,
    p = 0;
  if (data.length > 1 && splitBy > 0) {
    newData.push(data[0]);
    for (var i = 1; i < data.length; i++) {
      p = i - 1;
      xStart = data[p][0];
      xEnd = data[i][0];
      step = (xEnd - xStart) / splitBy;

      for (var s = 1; s <= splitBy; s++) {
        xNew = xStart + (step * s);
        newData.push([
          xNew,
          interpolate(xStart, xNew, xEnd, data[p][1], data[i][1]),
          interpolate(xStart, xNew, xEnd, data[p][2], data[i][2])
        ]);
      }
      newData.push(data[i]);
    }
    return newData;
  }
  return data;
}

具有多个区域范围和线系列的 Highcharts 鼠标跟踪行为

Highcharts mouse tracking behaviour with multiple arearange & line series

javascript

mouseover

highcharts