且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在Google图表中的图例上添加工具提示

更新时间:2023-11-14 19:17:40

图例条目没有标准的工具提示,但是您可以添加自己的...

no standard tooltip for legend entries, but you can add your own...

参见以下工作片段,

在这里,我使用图表事件 onmouseover onmouseout

知道何时传说已悬停

here, i use chart events onmouseover and onmouseout,
to know when the legend has been "hovered"

事件发生时,如果 row 事件的属性为 null

,则说明将悬停在图例

when the events fire, if the row property of the event is null,
then the legend is being hovered

我还使用 getChartLayoutInterface 将工具提示放置在图例附近

i also use getChartLayoutInterface to position the tooltip near the legend

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  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'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  var legendTooltip = document.getElementById('legend-tooltip');

  // set legend tooltip position
  google.visualization.events.addListener(chart, 'ready', function (gglEvent) {
    var chartLayout = chart.getChartLayoutInterface();
    var legendBounds = chartLayout.getBoundingBox('legend');
    legendTooltip.style.top = (legendBounds.top + (legendBounds.height * 2)) + 'px';
    legendTooltip.style.left = legendBounds.left + 'px';
  });

  // show legend tooltip
  google.visualization.events.addListener(chart, 'onmouseover', function (gglEvent) {
    if (gglEvent.row === null) {
      $('#series-name').html(data.getColumnLabel(gglEvent.column));
      $(legendTooltip).removeClass('hidden');
    }
  });

  // hide legend tooltip
  google.visualization.events.addListener(chart, 'onmouseout', function (gglEvent) {
    if (gglEvent.row === null) {
      $(legendTooltip).addClass('hidden');
    }
  });

  chart.draw(data, options);
}

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

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

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

.ggl-tooltip span {
  font-weight: bold;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
<div id="legend-tooltip" class="ggl-tooltip hidden">
  <div><span>Series Info</span></div>
  <div id="series-name"></div>
</div>