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

Question

我有一个谷歌图表的问题。我有一个条形图，上面有一些大值和小值。条形图也有一个值标签。如果我将鼠标悬停在工具条上，将会显示工具提示。但是，当我将鼠标悬停在值标签(栏内或栏外)时，不会显示任何工具提示。所以我不可能在非常小的条上显示工具提示。

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

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

focusTarget: 'category'会在工具提示上强制提供我不想要的更多信息。我能防止这种情况发生吗？我只想显示我的html值。此外，在悬停value标签时，工具提示也会隐藏。

感谢您的帮助和想法。

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>

​