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

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="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屋！