Question

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

我也希望展示这一天，但我努力做到这一点，找不到任何指示。请参阅下面的js小提琴链接和代码。

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

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

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

请参阅以下工作代码段以获取示例...

根据每行上找到的日期添加并填充工具提示列

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何在Google时间表上始终显示日期

1 个答案: