Question

一旦我的鼠标悬停在谷歌图表上的实际工具提示上，我就会得到一个闪烁的工具提示。我一直在寻找解决方案，但尚未能解决问题。他们在这里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 }

没有任何结果，我还尝试在我正在绘制PieChart的标签上的html组件中添加pointer-events: none。 “风格”和“ng风格. However, I can imagine setting the指针事件”都没有，工具提示根本不显示，这是对正确功能的改进，但仍然是不需要的。

编辑：我使用以下模块：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
            });
        });
    });
};

我仍然感谢您选择将其与更高版本配合使用。

Answer 2

这只是为了澄清：对于不使用angular @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); ...

将鼠标悬停在其上时闪烁的工具提示

2 个答案: