如何在Google時間圖上始終顯示日期

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

唯一選擇自定義工具提示是提供自己的...

問題同樣需要計算時間自己

看到下面的工作片斷爲示例...

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

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>