javascript - 将鼠标悬停在上面时闪烁的工具提示

Question

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

//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 }

没有任何结果，我还尝试在我用来绘制 PieChart 的标签上的 html 组件中添加 pointer-events: none。都带有“style”和“ng-style”。但是，我可以想象将 pointer-events` 设置为 none 工具提示根本不会显示，这是对正确功能的改进，但仍然不需要。

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

Answer 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
            });
        });
    });
};

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