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

Question

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

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

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

所以总结出现的两个问题：

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

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

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

Answer 1

图表不重新计算其位置，因为它不跟踪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

Answer 2

这个答案与@ppotaczek一个非常相似，只是想法是不同的实现。

[当鼠标进入图表时，图表位置为

已缓存，因此，如果滚动但鼠标仍在图表内，它不会重新计算位置，但由于滚动，位置已更改。

一种解决方案是通过tooltip.positioner化chartsPosition使用null和

禁用

缓存。

 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/