javascript - 如何始终在谷歌时间表上显示日期

Question

我使用的是谷歌的时间线图表，一旦你将鼠标悬停在数据上，它将显示持续时间、开始和结束日期，但仅限于月份和年份。如果时间跨度很短，如一周，它将显示日期，但如果是月份或年份，它将只显示月份和年份。

我也想展示这一天，但我正在努力做到这一点，找不到任何说明。请参阅下面的 js fiddle 链接和代码。

google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawTimeline);
function drawTimeline() {
var container = document.getElementById('chart_div');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]



]);


chart.draw(dataTable);
}

https://jsfiddle.net/mt15199/xsnru9oq/

Answer 1

自定义工具提示的唯一选项是提供您自己的...

问题是你必须自己计算持续时间

有关示例，请参见以下工作片段...

根据在每一行中找到的日期添加和填充工具提示列

google.charts.load('current', {
  callback: function () {
    drawTimeline();
    window.addEventListener('resize', drawTimeline, false);
  },
  packages:['timeline']
});
function drawTimeline() {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    ['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Target Date', new Date(2016, 10, 15), new Date(2017, 11, 18)],
    ['RJR - Site Consumer Engagement Security (AKA on SOW Venue and Site Security for Vendors)','Actual Date', new Date(2016, 11, 25), new Date(2017, 11, 30)]
  ]);
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy'
  });
  dataTable.insertColumn(2, { type: 'string', role: 'tooltip', p: {html: true} });
  for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
    var duration = Math.abs(dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime()) / 1000;
    var days = Math.floor(duration / 86400);
    duration -= days * 86400;
    var hours = Math.floor(duration / 3600) % 24;
    duration -= hours * 3600;
    var minutes = Math.floor(duration / 60) % 60;
    duration -= minutes * 60;
    var seconds = duration % 60;  // in theory the modulus is not required

    var tooltip = '';
    tooltip += '<div class="ggl-tooltip"><div>';
    tooltip += '<span>' + dataTable.getValue(i, 1) + '</span>';
    tooltip += '</div><div>';
    tooltip += '<span>' + dataTable.getValue(i, 0) + ':&nbsp;</span>';
    tooltip += formatDate.formatValue(dataTable.getValue(i, 3)) + ' - ';
    tooltip += formatDate.formatValue(dataTable.getValue(i, 4));
    tooltip += '</div><div>';
    tooltip += '<span>Duration:&nbsp;</span>';
    tooltip += days + ' days ' + hours + ' hours ' + minutes + ' minutes ' + seconds + ' seconds';
    tooltip += '</div></div>';
    dataTable.setValue(i, 2, tooltip);
  }
  chart.draw(dataTable, {
    tooltip: {
      isHtml: true
    }
  });
}

.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
}

.ggl-tooltip div {
  border: 1px solid #E0E0E0;
  padding: 8px 8px 8px 8px;
}

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

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