如何在谷歌图表中显示选择行的所有工具提示

Question

我正在使用 Google Charts API 为一些数据生成折线图。当我单击该行时，该行会突出显示。此外，当我将鼠标悬停在任何数据点上时，工具提示就会可见。但是，我想让它使我单击的行的所有工具提示都可见。怎么办呢？

我试图知道悬停时会触发哪个功能，从而使工具提示可见。但我无法使用该功能。我也试过

tooltip: {trigger: 'both', selectionMode: 'multiple'}

没有成功。

Answer 1

仅当您想要手动单击/选择多个点并查看每个单击点的工具提示时，才需要

selectionMode: 'multiple'

。

如果您想在仅单击一个工具提示时查看所有工具提示，
您需要监听

'select'

事件，
确定选择哪个系列/系列，
然后使用图表方法

setSelection

选择所有点。

如果您希望在每个点上方显示单独的工具提示，
您将需要添加以下选项。

 aggregationTarget: 'none'

否则，图表会将所有工具提示值分组为一个工具提示。
如果线条上有密集的点，这可能会很好。
如果是这样，有多种关于如何对工具提示值进行分组的选项。

聚合目标
如何将多个数据选择汇总到工具提示中：
'category'：按 x 值对所选数据进行分组。
'series'：按系列对选定的数据进行分组。
'auto'：如果所有选择都具有相同的 x 值，则按 x 值对所选数据进行分组，否则按系列分组。
“none”：每个选择仅显示一个工具提示。
AggregationTarget 通常会与 SelectionMode 和 tooltip.trigger 一起使用

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    aggregationTarget: 'none',
    title: 'Company Performance',
    tooltip: {
      trigger: 'both'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'select', function() {
    var selection = chart.getSelection();
    if (selection.length > 0) {
      // determine which line is selected
      var series = selection[0].column;

      // all points on the series to the selection
      selection = [];
      for (var index = 0; index < data.getNumberOfRows(); index++) {
        selection.push({
          column: series,
          row: index
        });
      }

      // select all points on the series
      chart.setSelection(selection);
    }
  });

  chart.draw(data, options);
});

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