Question

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

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

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

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

谢谢您的帮助和想法。

海维尔

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>

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

1 个答案: