如何在Google图表中显示两个不同的工具提示 [英] How to show two different tooltips in google chart
问题描述
我想在一个柱形图上触发不同的工具提示,一个在悬停上,另一个在选择栏上.
I want to trigger to different tooltips on a single column chart, one on hover and another on bar select.
我该如何解决?
我浏览了以下链接,但无法解决.
I went through the following links but couldn't solve it.
推荐答案
开箱即用,Google图表不提供此功能.
out of the box, google chart does not offer this functionality.
您将需要关闭默认的工具提示,
you will need to turn off the default tooltips,
tooltip: {
trigger: 'none'
}
并添加自己的自定义工具提示.
您可以使用图表事件来确定要显示的工具提示.
('select'
,'onmouseover'
,'onmouseout'
)
and add your own custom tooltips.
you can use chart events to determine which tooltip to show.
('select'
, 'onmouseover'
, 'onmouseout'
)
放置自定义工具提示,
您可以使用图表方法-> getChartLayoutInterface
该界面具有用于-> getBoundingBox
的方法它返回图表元素的位置,
只需传递元素的ID(例如图表列)即可.
to position your custom tooltip,
you can use chart method --> getChartLayoutInterface
the interface has a method for --> getBoundingBox
which returns the position of a chart element,
just pass the id of the element, such as a chart column.
图表列ID的格式为-> bar#0#0
其中第一个 0
是序列号,
第二个 0
是行号.
chart column id's take the form as --> bar#0#0
where the first 0
is the series number,
and the second 0
is the row number.
需要考虑的是如何处理碰撞.
意思是,你有什么打算时,选择一列,然后徘徊显现.结果或选择一列,然后将另一列悬停,等等.
something to think about is how to handle collisions.
meaning, what are you going to show when a column is selected, then hovered.
or a column is selected and another column is hovered, etc...
有关如何完成操作的示例,请参见以下工作摘要
see following working snippet for an example of how to accomplish...
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>
这篇关于如何在Google图表中显示两个不同的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!