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

Question

我创建了一个图表，它使用 arearange 系列作为对 line 系列的甘特图叠加。

JSFiddle

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

我已尝试按照 API 中的描述设置以下选项。 :

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

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

但跳跃效果仍然发生。我的目的是插入 mouseOver 和 mouseOut 事件，以便我可以在图表下方显示一些其他详细信息 - 然而，这对于当前的行为来说是不可行的。

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

Answer 1

服用this根据 Highcharts GitHub 页面的建议，我在区域范围内插入了一些额外的点，以便工具提示可以找到最近的点(而不是我期望的线)。

查看此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;
}