如何在谷歌图表中显示两个不同的工具提示

Question

我想在单个柱形图上触发不同的工具提示，一个在悬停上，另一个在条形选择上。

我该如何解决？

我浏览了以下链接，但无法解决。

Show multiple tooltips in Google Charts

Google charts to show multiple tooltip

How to show/hide google chart's tooltip programatically?

ToolTip only shows on "Click"- google charts

Answer 1

开箱即用，谷歌图表不提供此功能。

您需要关闭默认工具提示，

tooltip: {
  trigger: 'none'
}

并添加您自己的自定义工具提示。
您可以使用图表事件来确定要显示的工具提示。
('select', 'onmouseover', 'onmouseout')

定位您的自定义工具提示，
你可以使用图表方法 --> getChartLayoutInterface
该接口有一个方法 --> getBoundingBox
它返回图表元素的位置，
只需传递元素的 id，例如图表列。

图表列 id 的格式为 --> bar#0#0
其中第一个0 是序列号，
第二个0 是行号。

需要考虑的是如何处理冲突。
意思是，当一列被选中，然后悬停时，你将显示什么。
或选择一列，另一列悬停，等等...

有关如何完成的示例，请参见以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.ColumnChart($('#chart_div').get(0));
  var chartLayout;
  var selection;

  google.visualization.events.addListener(chart, 'ready', function () {
    chartLayout = chart.getChartLayoutInterface();
  });

  google.visualization.events.addListener(chart, 'select', function () {
    selection = getSelection();
    if (selection.row !== null) {
      hideTooltip('tooltip-hover');
      showTooltip(selection, 'tooltip-select');
    } else {
      hideTooltip('tooltip-select');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseover', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      showTooltip(sender, 'tooltip-hover');
    }
  });

  google.visualization.events.addListener(chart, 'onmouseout', function (sender) {
    selection = getSelection();
    if ((sender.row !== null) && (selection.row !== sender.row)) {
      hideTooltip('tooltip-hover');
    }
  });

  function showTooltip(sender, tooltip) {
    // get position of bar
    var tooltipBounds = chartLayout.getBoundingBox('bar#' + (sender.column - 1) + '#' + sender.row);

    // set values
    $('#' + tooltip + ' .series-name').html(data.getColumnLabel(sender.column));
    $('#' + tooltip + ' .series-x').html(data.getFormattedValue(sender.row, 0));
    $('#' + tooltip + ' .series-y').html(data.getFormattedValue(sender.row, sender.column));

    // set position
    $('#' + tooltip).css({
      left: tooltipBounds.left + 'px',
      top: (tooltipBounds.top - $('#' + tooltip).outerHeight(true)) + 'px'
    });

    // show
    $('#' + tooltip).addClass('shown');
    $('#' + tooltip).removeClass('hidden');
  }

  function hideTooltip(tooltip) {
    // hide
    $('#' + tooltip).addClass('hidden');
    $('#' + tooltip).removeClass('shown');
  }

  function getSelection() {
    selection = chart.getSelection();
    if (selection.length > 0) {
      return selection[0];
    } else {
      return {row: null, column: null};
    }
  }

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

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #E0E0E0;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
  position: absolute;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.bold {
  font-weight: bold;
}

.hidden {
  display: none;
  visibility: hidden;
}

.shown {
  display: inline-block;
}

#tooltip-hover {
  color: blue;
}

#tooltip-select {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.gstatic.com/charts/loader.js'></script>
<div id="chart_div"></div>
<div id="tooltip-hover" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>
<div id="tooltip-select" class="ggl-tooltip hidden">
  <div><span class="series-name bold"></span></div>
  <div>
    <span class="series-x bold"></span>:
    <span class="series-y"></span>
  </div>
</div>