谷歌图表工具提示闪烁答案

【问题标题】：Google Charts tooltip flickering谷歌图表工具提示闪烁
【发布时间】：2016-06-19 00:02:47
【问题描述】：

在使用 Google Charts 时，有时工具提示会出现在鼠标指针后面，导致鼠标移动时会闪烁，甚至有点闪烁。

这是一个已知问题吗？

【问题讨论】：

你能贴出你用来显示工具提示的代码吗？
您可能需要限制您的活动
分享您的代码或问题的屏幕截图。
我放了一张截图。工具提示和鼠标在同一个位置，稍微移动一下鼠标就会闪烁。

标签： javascript google-visualization

【解决方案1】：

是的，这是一个小错误。

您只需将其添加到您的 CSS 中：

svg > g > g:last-child { pointer-events: none }

【讨论】：

谢谢你，我只希望它针对我的谷歌图表，所以添加了以下内容：svg[aria-label="A chart."] > g > g:last-child { pointer-events : none } 不是很有未来的证明，但值得添加 imo。
愚蠢的错误，但一个非常简单和聪明的解决方案。谢谢！
现在是 2019 年 3 月。错误仍然存在，这个答案仍然有效：D
现在是 2020 年 1 月。错误仍然存在，修复仍然有效。
2020 年 7 月。时间似乎很暗。冠状病毒席卷大地，让所有人都害怕得瑟瑟发抖。一切似乎都不确定，但我们可以确定一件事：这个错误仍然存在，修复仍然有效

【解决方案2】：

是的，闪烁似乎是一个悬而未决的问题。

https://github.com/google/google-visualization-issues/issues/2162

【讨论】：

【解决方案3】：

这在我的情况下有效

svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }

【讨论】：

div.google-visualization-tooltip { pointer-events: none } 是这里最好的解决方案。
这对我不起作用了 - div 已更改为 g。使用svg g.google-visualization-tooltip { pointer-events: none }

【解决方案4】：

派对迟到了，但这只是针对闪烁的工具提示，不会影响/禁用剪辑标签（hAxis 或 vAxis）和图例上的 html 默认工具提示：

svg > g > g.google-visualization-tooltip { pointer-events: none }

【讨论】：

这应该是答案。当前接受的选项禁用选择图例中最后一项的功能

【解决方案5】：

是的，你是对的，工具提示覆盖触发区域导致工具提示消失，这反过来又打开触发区域并再次显示它，依此类推。

我通过 CSS 定位工具提示容器并覆盖谷歌的 CSS 解决了这个问题：

div.google-visualization-tooltip {

    padding: 0 !important;
    margin: 0 !important;
    border:none !important;
    box-shadow: unset !important;
    background-color: rgba(0,0,0,0) !important;
    height:auto !important;
    overflow:hidden !important;

}

这应该会显示您的 HTML 工具提示，距离鼠标指针大约 1em，并且还可以让您摆脱原来丑陋的白框。在日历图表上为我工作。如果这在您的情况下不起作用，您必须找出图表工具提示容器的类名。

我认为问题的根源在于工具提示显示得太靠近指针，但是如果您删除该容器的边距和填充，它会修复它。

希望对你有用。

【讨论】：

感谢您的解决方案。在提供的其他解决方案中，我无法点击最后一个图例。

【解决方案6】：

我可以通过将工具提示选项更改为 html 并忽略边界来防止闪烁。我相信 ignoreBounds 只能在工具提示为 html 并且将工具提示推到图表边界之外时使用。 *我没有测试这么多。

工具提示：{ isHtml: true, ignoreBounds: true }

【讨论】：

【解决方案7】：

该错误不会发生在旧版本的图表中。改变这个：

google.charts.load('current', {'packages':['corechart']});

到这里：

google.charts.load('42', {'packages':['corechart']});

我的饼图现在可以完美运行，没有闪烁

【讨论】：