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

本文介绍了如何在Google图表中显示两个不同的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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图表中显示多个工具提示

Google图表显示多个工具提示

如何以编程方式显示/隐藏Google图表的工具提示?

ToolTip仅显示在点击"-google图表上

推荐答案

开箱即用，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="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src='www.gstatic/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>