悬停在它上面时闪烁的工具提示答案

【问题标题】：Flickering tooltip when hovering over it悬停在它上面时闪烁的工具提示
【发布时间】：2017-12-24 10:04:30
【问题描述】：

一旦我的鼠标悬停在谷歌图表上的实际工具提示上，我就会得到一个闪烁的工具提示。我一直在寻找解决方案，但到目前为止还没有解决这个问题。他们在这里debate about the mouse being below the tooltip element is what is causing the flickering。提出了一种解决方法，由于我缺乏有关角度的知识，我可能无法实施。

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

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

我加载图表的方式是在我的 html 组件中调用以下内容。

<google-chart [data]="pieChartData" 
ng-style="svg > g > g:last-child { pointer-events: none }"></google-chart>

提出的另一个解决方案是在样式中将pointer-events 设置为none。我尝试将这些行添加到我的 css 组件中。

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

没有任何结果，我还尝试在我的 html 组件中添加 pointer-events: none 到我绘制饼图的标签上。将 'style' 和 'ng-style. However, I can imagine setting thepointer-events` 设置为 none 时，工具提示根本不会显示，这是对正确功能的改进，但仍然不需要。

编辑：我正在使用以下模块：https://www.npmjs.com/package/ng2-google-charts

【问题讨论】：

github线程上提到的解决方案对我来说很好：jsfiddle.net/khrismuc/pm3p4eya您的问题是关于实现它，但您没有向我们展示minimal reproducible example。
@ChrisG 所以既然这是有角度的，我需要发布与图表相关的所有内容？这比您不使用角度的最小示例中的要多得多。我在chart.component.css 中有.piechart svg > g > g:last-child { pointer-events: none } 并将标签<google-chart> 包装在<div class="piechart"> 中，但没有任何改进。我的问题可能在于我对角度的了解以及事物如何相互交流。

标签： javascript css angular charts google-visualization

【解决方案1】：

我不再感到惊讶了。就像我提交问题一样，我想出了查看ng2-google-charts 模块并查找它加载图表的位置的想法。在google-charts-loader.service.js 内部，我将版本号从45.2 更改为42，从而解决了这个问题。

GoogleChartsLoaderService.prototype.load = function (chartType) {
    var _this = this;
    return new Promise(function (resolve, reject) {
        if (resolve === void 0) { resolve = Function.prototype; }
        if (reject === void 0) { reject = Function.prototype; }
        _this.loadGoogleChartsScript().then(function () {
            google.charts.load('42', { // <---- version number
                packages: [_this.chartPackage[chartType]],
                language: _this.localeId,
                callback: resolve
            });
        });
    });
};

我仍然很欣赏让它与更高版本一起使用的选项。

【讨论】：

【解决方案2】：

这只是为了澄清：对于不使用角度的任何人，@Madmenyo 在上面的问题陈述的开头展示了这个问题的解决方案。将“google.charts.load”语句中的任何版本替换为“42”版本

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

将上面的“当前”更改为下面的“42”，工具提示会突然出现。

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

【讨论】：