时间戳

首页 > 解决方案 > 可滚动容器中的 Highcharts 工具提示随内容滚动

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

问题描述

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

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

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

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

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

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

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

标签： javascripthighcharts

解决方案

就想法而言，这个答案与@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/

推荐阅读