悬停值标签上的Google图表工具提示触发器

Question

我对Google图表有疑问。 我有一些大小值的条形图。 这些条也有一个值标签。 如果将鼠标悬停在条形图上，将显示工具提示。 但是，当我将值标签悬停在条形图的内部或外部时，没有显示工具提示。 因此，我无法在很小的栏上显示工具提示。

简化示例： https : //jsfiddle.net/2d0kbLnm/40/

您知道如何告诉Google图表在悬浮值标签时显示工具提示吗？

focusTarget: 'category'强制在工具提示上提供我不想要的其他信息。 x轴值（带有蓝色圆点）和y轴标题插入工具提示中。 我可以预防吗？ 我只想显示我的html值。 此外，工具提示也会隐藏在值标签上。

感谢您的帮助和想法。

heiwil

Answer 1

还有一个列角色将在注释的悬停时显示其他文本，
它是-> role: 'annotationText'

它不一定是工具提示，也不会显示html，
但是当悬停注释时确实会出现。

这是唯一可用的“标准”选项。

请参阅以下工作片段，
在数据视图计算列中添加了'annotationText' ，
因此内容可以动态构建。
将鼠标悬停在注释上即可查看结果。

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Element', 'Saldo', {role: 'style', type: 'string'}, {role: 'annotation', type: 'string'}], ['Element 1', 60000.15, '#3949AB', '60,000.15 CHF'], ['Element 2', 14.87, '#3D5AFE', '14.87 EUR'], ['Element 3', -13451.31, '#cc0000', '-13,451.31 EUR'], ['Element 4', 0, '#42A5F5', '0 CHF'] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 2, 3, { calc: function (dt, row) { return dt.getValue(row, 0) + ' - ' + dt.getColumnLabel(1) + ': ' + dt.getFormattedValue(row, 1); }, role: 'annotationText', type: 'string' }]); var options = { legend: { position: 'none' }, hAxis: { logscale: true }, vAxis: { gridlines: { color: 'transparent' }, textPosition: 'none' } }; var chart = new google.visualization.ColumnChart( document.getElementById('chart_div') ); chart.draw(view, options); // <-- use view to draw chart }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>