可滚动容器中的 Highcharts 工具提示随内容滚动

Question

我有一个在可滚动容器中呈现的 Highcharts 实例。 tooltip.outside 选项也设置为 true，这样无论它是否适合图表 svg，工具提示始终位于顶部。

但是，当您滚动时，您会看到滚动后的工具提示。此外，当您将鼠标悬停在该系列上时，工具提示会呈现在不同的位置。

有办法解决吗？仅供参考，如果您将 tooltip.outside 设置为 false 一切正常。我确信问题围绕着这样一个事实，即当设置为true 时，确定在何处呈现工具提示的计算不再正确，因为位置随着滚动而改变。

所以总结一下出现的2个问题：

1. 工具提示跟随滚动
2. 重新悬停时，系列工具提示的位置错误。

请参阅有关问题的 gif：https://imgur.com/a/Zj3NstL 参见示例：https://jsfiddle.net/tcqeo415/2/

如果您在示例中注释掉我的 CSS 代码，您应该能够看到它应该是如何工作的

Answer 1

就想法而言，这个答案与@ppotaczek 的答案非常相似，只是实现方式不同。

当鼠标进入图表时，图表位置被缓存所以如果你滚动但你的鼠标仍在图表内，它不会重新计算位置，但由于滚动位置已经改变了。

一种解决方案是使用tooltip.positioner 并通过nullifying the chartsPosition 禁用缓存。

 positioner: function (w, h, point) {
    this.chart.pointer.chartPosition = null;
    return this.getPosition(w, h, point);
  },

这将强制图表重新计算图表位置。请注意，这可能是 DOM 昂贵的。

然后，如果您想保持滚动行为，请查看@ppotaczeck 的答案。下面的代码将删除滚动上的任何工具提示（仅适用于第一个示例）

document.body.addEventListener("scroll", function() {
  Highcharts.charts[0].tooltip.hide(0);
}, true)

示例：https://jsfiddle.net/gv1m6tjy/

Answer 2

图表不会重新计算其位置，因为它不跟踪scroll 事件。

要解决此问题，您可以重新计算 chart.pointer.chartPosition.top。以下代码仅适用于第一个图表：

(function (H) {
  H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, points) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points = points;
  });
}(Highcharts));

document.getElementById('container1').addEventListener('mouseenter', function(){
  var chart = Highcharts.charts[0];
  if (chart && chart.pointer && !chart.startChartPosY) {
    chart.pointer.getChartPosition();
    chart.startChartPosY = chart.pointer.chartPosition.top;
  }
});

document.getElementById('outer').addEventListener('scroll', function(e){
  var H = Highcharts,
    chart = H.charts[H.hoverChartIndex],
    tooltip = chart.tooltip;

  if (chart && chart.pointer) {
    chart.pointer.chartPosition.top = chart.startChartPosY - this.scrollTop;
  }

  if (tooltip && !tooltip.isHidden) {
    tooltip.refresh(tooltip.points);
  }
});

---

现场演示： https://jsfiddle.net/BlackLabel/ao0c21g6/3/

文档： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts