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

Question

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

我该如何解决？

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

在谷歌图表中显示多个工具提示

显示多个工具提示的谷歌图表

如何以编程方式显示/隐藏谷歌图表的工具提示？

工具提示仅在"点击"上显示 - 谷歌图表

Answer 1

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

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

tooltip: {
trigger: 'none'
}

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

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

图表列 ID 采用 -->bar#0#0
的形式，其中第一个0是序列号，
第二个0是行号。

需要考虑的是如何处理碰撞。
意思是，当选择一列然后悬停时，您将显示什么。
或者选择了一列并悬停了另一列，等等...

有关如何完成

...

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>