时间戳

首页 > 解决方案 > Add Information to Google Timeline bar Hover

html - Add Information to Google Timeline bar Hover

问题描述

I'm trying to add three new sections to the hover pop-up on a bar in google timeline charts.

I have tried using the google timeline help but cannot find a solution

The default is Title / Time / Duration, however I want to add Arena / Website

I have created the below code for this as an example.

<DIV>
  <p><font face="verdana" size="6" color="Black">Thursday</font></p>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Federation' });
    dataTable.addColumn({ type: 'string', id: 'Event' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'WWE / NXT',  'AXXESS',    new Date(0,0,0,18,0,0),  new Date(0,0,0,22,0,0)],
      [ 'WWN',  'Matt Riddles Bloodsport',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
      [ 'WrestleCon',  'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
      [ 'WWN', 'Evolve',   new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
      [ 'WrestleCon', 'WrestleCon Supershow',       new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
      [ 'Knockout', 'Knockout in NOLA',       new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0)],
      [ 'ROH', 'RoH Supercard of Honor',       new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0)],
      [ 'WWN', 'Beyond Wrestling',        new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
    var options = {
      timeline: { colorByRowLabel: true },
      tooltip: {isHtml: true},
      legend: 'none',
      backgroundColor: '#ffd'
    };
    chart.draw(dataTable, options);
  }
</script>
<div id="example5.1" style="height: 300px;"></div>
</DIV>

标签： htmlchartsgoogle-visualization

解决方案

您可以添加自己的自定义工具提示，请参阅时间轴参考中的 自定义工具提示

工具提示列将只是一个字符串，一个简单的值或 html

请参阅以下工作片段，
此处， aDataView用于添加工具提示列。
这允许根据数据表中的数据动态构建工具提示

此外，为了方便参考，竞技场已添加到原始数据表中，
但从数据视图中排除... 

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Federation' });
  dataTable.addColumn({ type: 'string', id: 'Event' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addColumn({ type: 'string', id: 'Arena' });
  dataTable.addRows([
    ['WWE / NXT', 'AXXESS', new Date(0,0,0,18,0,0), new Date(0,0,0,22,0,0), 'Arena A'],
    ['WWN', 'Matt Riddles Bloodsport', new Date(0,0,0,15,0,0), new Date(0,0,0,18,0,0), 'Arena B'],
    ['WrestleCon', 'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0), 'Arena C'],
    ['WWN', 'Evolve', new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0), 'Arena D'],
    ['WrestleCon', 'WrestleCon Supershow', new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0), 'Arena E'],
    ['Knockout', 'Knockout in NOLA', new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0), 'Arena F'],
    ['ROH', 'RoH Supercard of Honor', new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0), 'Arena G'],
    ['WWN', 'Beyond Wrestling', new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0), 'Arena H']]);
  var options = {
    timeline: { colorByRowLabel: true },
    tooltip: {isHtml: true},
    legend: 'none',
    backgroundColor: '#ffd'
  };

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:mm:ss a'
  });

  var view = new google.visualization.DataView(dataTable);
  view.setColumns([0, 1, {
    role: 'tooltip',
    type: 'string',
    calc: function (dt, row) {
      // build tooltip
      var dateBegin = dt.getValue(row, 2);
      var dateEnd = dt.getValue(row, 3);
      var oneHour = (60 * 60 * 1000);
      var duration = (dateEnd.getTime() - dateBegin.getTime()) / oneHour;

      var tooltip = '<div><div class="ggl-tooltip"><span>';
      tooltip += dt.getValue(row, 0) + ':</span>&nbsp;' + dt.getValue(row, 1) + '</div>';
      tooltip += '<div class="ggl-tooltip"><div>' + formatTime.formatValue(dateBegin) + ' - ';
      tooltip += formatTime.formatValue(dateEnd) + '</div>';
      tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' hours</div></div>';
      tooltip += '<div class="ggl-tooltip"><span>Arena: </span>' + dt.getValue(row, 4) + '</div></div>';

      return tooltip;
    },
    p: {html: true}
  }, 2, 3]);

  chart.draw(view.toDataTable(), options);  // <-- use data view to draw chart
});
.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 8px;
}

.ggl-tooltip span {
  font-weight: bold;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>

推荐阅读