在谷歌图表角度2中显示悬停标题的工具提示

Question

我需要在谷歌图表中悬停条形图倾斜时显示工具提示文字（角度2）

Answer 1

没有任何标准选项可以将工具提示添加到图表标题中

但您可以添加自己的自定义

首先，您可以使用以下图表方法找到标题的位置

chart.getChartLayoutInterface().getBoundingBox('title')

然后你可以在图表悬停时检查鼠标坐标 如果坐标在标题的范围内，则显示工具提示
否则隐藏......

请参阅以下工作代码段...

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['H1', -0.5, -0.5],
    ['H2', -0.5, -0.5],
    ['H3', -0.5, -0.5],
  ], true);

  var options = {
    height: 400,
    title: 'AMI 7a Fibrinolytic Therapy Received within 30 Minutes of Arrival',
    vAxis: {
      viewWindow: {
        min: -0.5,
        max: 10
      }
    },
    width: 400
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  var titleTooltip = document.getElementById('title-tooltip');

  google.visualization.events.addListener(chart, 'ready', function (gglEvent) {
    // set tooltip position
    var chartLayout = chart.getChartLayoutInterface();
    var titleBounds = chartLayout.getBoundingBox('title');
    titleTooltip.style.top = (titleBounds.top + titleBounds.height + 8) + 'px';
    titleTooltip.style.left = titleBounds.left + 'px';
    chartPosition = $(container).position();

    // show tooltip
    $(container).on('mouseover', function (event) {
      if ((event.clientX >= (titleBounds.left + chartPosition.left)) &&
          (event.clientX <= (titleBounds.left + chartPosition.left + titleBounds.width)) &&
          (event.clientY >= (titleBounds.top + chartPosition.top)) &&
          (event.clientY <= (titleBounds.top + chartPosition.top + titleBounds.height))) {
        $(titleTooltip).removeClass('hidden');
      }
    });

    // hide tooltip
    $(container).on('mouseout', function (event) {
      if ((event.clientX < (titleBounds.left + chartPosition.left)) ||
          (event.clientX > (titleBounds.left + chartPosition.left + titleBounds.width)) ||
          (event.clientY < (titleBounds.top + chartPosition.top)) ||
          (event.clientY > (titleBounds.top + chartPosition.top + titleBounds.height))) {
        $(titleTooltip).addClass('hidden');
      }
    });
  });

  chart.draw(data, options);
});

＆＃13;

.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;
}

＆＃13;

<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="title-tooltip" class="ggl-tooltip hidden">
  <div><span>Tooltip Info</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;