Question

我正在使用他们的示例之一，从本质上讲，我需要此功能，此外，当您将鼠标悬停在图表上的某个值上时，我需要第四个数据元素。

这里的例子是赢得超级碗的足球队。当您将鼠标悬停在时间序列项之一上时，我还要显示游戏的得分。（我需要此图表将鼠标悬停在其上，并带有另外的一段文本数据。

此代码直接来自Google的示例：

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Asset');
  data.addColumn('date', 'Arrive');
  data.addColumn('date', 'Depart');

  data.addRows([
    ['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)],
    ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
    ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
    ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
    ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
    ['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5)],
    ['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)],
    ['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)],
    ['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)],
    ['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)],
    ['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)],
    ['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)],
    ['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)],
    ['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)],
    ['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)],
  ]);

  var options = {
    height: 450,
    timeline: {
      groupByRowLabel: true
    }
  };

  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Answer 1

没有用于更改默认工具提示的标准配置选项

，但是您可以添加自己的自定义工具提示，请参见时间轴参考中的Customizing tooltips

为了添加自定义工具提示，必须在数据表中提供所有5列。
（行标签，条形标签，工具提示，开始和结束）

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

请参阅以下工作片段，
在这里，DataView用于添加工具提示列。
这样可以根据数据表中的数据动态构建工具提示

还将游戏的得分添加到原始数据表中，以方便参考，
但已从数据视图中排除...

google.charts.load('current', {
  packages: ['timeline']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Asset');
  data.addColumn('date', 'Arrive');
  data.addColumn('date', 'Depart');
  data.addColumn('string', 'Score');
  data.addRows([
    ['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5), '35 - 21'],
    ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5), '35 - 21'],
    ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5), '35 - 21'],
    ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5), '35 - 21'],
    ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
    ['Pittsburgh Steelers', new Date(2004, 8, 5), new Date(2005, 1, 5), '35 - 21'],
    ['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5), '35 - 21'],
    ['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5), '35 - 21'],
    ['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5), '35 - 21'],
    ['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5), '35 - 21'],
    ['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5), '35 - 21'],
    ['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5), '35 - 21'],
    ['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5), '35 - 21'],
    ['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5), '35 - 21'],
    ['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5), '35 - 21'],
  ]);

  var formatMonth = new google.visualization.DateFormat({
    pattern: 'MMM yyyy'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    label: 'bar label',
    type: 'string',
    calc: function () {
      return null;
    }
  }, {
    role: 'tooltip',
    type: 'string',
    calc: function (dt, row) {
      // build tooltip
      var dateBegin = dt.getValue(row, 1);
      var dateEnd = dt.getValue(row, 2);
      var oneDay = (24 * 60 * 60 * 1000);
      var duration = (((dateEnd.getTime() - dateBegin.getTime()) / oneDay) / 365.25) * 12;

      var tooltip = '<div><div class="ggl-tooltip"><span>';
      tooltip += dt.getValue(row, 0) + '</span></div>';
      tooltip += '<div class="ggl-tooltip"><div>' + formatMonth.formatValue(dateBegin) + ' - ';
      tooltip += formatMonth.formatValue(dateEnd) + '</div>';
      tooltip += '<div><span>Duration: </span>' + duration.toFixed(0) + ' months</div></div>';
      tooltip += '<div class="ggl-tooltip"><span>Score: </span>' + dt.getValue(row, 3) + '</div></div>';

      return tooltip;
    },
    p: {html: true}
  }, 1, 2]);

  var options = {
    height: 450,
    timeline: {
      groupByRowLabel: true
    },
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));
  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 div {
  margin-top: 6px;
}

.ggl-tooltip span {
  font-weight: bold;
}

<div id="chart_div"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Google时间线图表在悬停字符串中添加第四个数据

1 个答案: