Question

我正在使用Google的列和条形图https://developers.google.com/chart/interactive/docs/gallery/

一切都很好，除了一件事：我想在图表的标题旁边添加一个小的“i”图标。当我点击或将鼠标移到它上面时，会出现一个自定义弹出窗口，其中包含一些信息。

我们来看这个例子https://developers.google.com/chart/interactive/docs/gallery/columnchart

 var options = {
    title: 'Motivation and Energy Level Throughout the Day',

我想要的是i-icon和popup，它似乎会在标题“... the Day”结束后立即放置

我已经阅读了文档，但没有找到任何内容。有没有办法实现这个？

P.S。或者也许有办法获得类似的结果，即将i-icon放在图表上的其他位置？但它应该与整个图表相关。

Answer 1

您可以使用overlay在图表上放置“信息”图标

然后使用css在图标悬停时显示“工具提示”

请参阅以下工作片段，
叠加层位于图表的'ready'事件

中

google.charts.load('current', {
  packages: ['controls', 'corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('timeofday', 'Time of Day');
  data.addColumn('number', 'Motivation Level');
  data.addRows([
    [{v: [8, 0, 0], f: '8 am'}, 1],
    [{v: [9, 0, 0], f: '9 am'}, 2],
    [{v: [10, 0, 0], f:'10 am'}, 3],
    [{v: [11, 0, 0], f: '11 am'}, 4],
    [{v: [12, 0, 0], f: '12 pm'}, 5],
    [{v: [13, 0, 0], f: '1 pm'}, 6],
    [{v: [14, 0, 0], f: '2 pm'}, 7],
    [{v: [15, 0, 0], f: '3 pm'}, 8],
    [{v: [16, 0, 0], f: '4 pm'}, 9],
    [{v: [17, 0, 0], f: '5 pm'}, 10],
  ]);

  var options = {
    hAxis: {
      title: 'Time of Day',
      format: 'h:mm a',
      viewWindow: {
        min: [7, 30, 0],
        max: [17, 30, 0]
      }
    },
    legend: {
      alignment: 'end',
      position: 'bottom'
    },
    title: 'Motivation and Energy Level Throughout the Day',
    vAxis: {
      title: 'Rating (scale of 1-10)',
      ticks: [
        {v: 8.5, f: 'A'},
        {v: 4.5, f: 'B'},
        {v: 2, f: 'C'}
      ]
    }
  };

  var container = document.getElementById('chart');
  var chart = new google.visualization.ColumnChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartPosition = $('#chart').position();
    var titleLeft = 24;
    var titlePosition = chartLayout.getBoundingBox('title');
    $('#chart-overlay').css({
      left: (chartPosition.left + titlePosition.left - titleLeft) + 'px',
      top: (chartPosition.top + titlePosition.top) + 'px'
    }).removeClass('hidden');
  });

  chart.draw(data, options);
});

.hidden {
  display: none;
  visibility: hidden;
}

.overlay {
  position: absolute;
  z-index: 1;
}

.overlay:hover .popup {
  display: inline-block;
}

.popup {
  background-color: #fff9c4;
  border: 1px solid #ffd54f;
  display: none;
  padding: 6px;
}

.popup 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 class="hidden overlay" id="chart-overlay">
  <div>
    <img alt="Information" src="http://findicons.com/files/icons/2166/oxygen/16/dialog_information.png" />
  </div>
  <div class="popup">
    <div>
      <span>Information:</span>
    </div>
    <div>
      This is the information for the tooltip...
    </div>
  </div>
</div>

<div id="chart"></div>

将小型自定义图标和弹出窗口添加到Google Charts的标题中

1 个答案: