如何使用Google图表时间表获得更具体的持续时间？

Question

因此，我使用以下代码从Google图表创建时间轴。

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script> 
<script type="text/javascript"> 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
    var container = document.getElementById("example1"); 

    var chart = new google.visualization.Timeline(container); 

    var dataTable = new google.visualization.DataTable(); 

    dataTable.addColumn({ type: "string", id: "RowName" }); 
    dataTable.addColumn({ type: "string", id: "Label" }); 
    dataTable.addColumn({ type: "date", id: "Start" }); 
    dataTable.addColumn({ type: "date", id: "End" }); 

    dataTable.addRows([ 
     ["Row1", "Step 1", new Date(2013, 11, 4, 2, 45, 0), new Date(2013, 11, 4, 4, 5, 15)], 
     ["Row1", "Step 2", new Date(2013, 11, 4, 4, 5, 15), new Date(2013, 11, 7, 8, 34, 55)], 
     ["Row1", "Step 3", new Date(2013, 11, 7, 8, 34, 55), new Date(2013, 11, 12, 11, 28, 49)], 
     ["Row1", "Step 4", new Date(2013, 11, 12, 11, 28, 49), new Date(2013, 11, 14, 9, 27, 17)] 
    ]); 

    var options = { 
     timeline: { 
      groupByRowLabel: true, 
      showRowLabels: true 
     } 
    }; 

    chart.draw(dataTable, options); 
} 
</script> 
<div id="example1" style="width: 900px; height: 180px;"></div> 

我想在弹出的持续时间内获得更详细的鼠标。如果你看第1步，它只是说持续时间：1天。但是，如果您查看代码，则只需要一个小时20分15秒。有什么办法可以让它显示？

链接代码运行：http://jsfiddle.net/ifandelse/FdFM3/

Answer 1

这是正确的asgallant说什么用户。但是你仍然可以得到一些信息。

添加一个元素，您图表div后：

<div id="example1" style="width: 900px; height: 180px;"></div> 
<div id='duration'></div> 

添加事件侦听器之前调用绘制图表：

google.visualization.events.addListener(chart, 'onmouseover', function (obj) { 

    var startDate = dataTable.getValue(obj.row, 2); 
    var endDate = dataTable.getValue(obj.row, 3); 

    var timeDiff = Math.abs(startDate.getTime() - endDate.getTime()); 
    var diffDays = (timeDiff/(1000 * 3600 * 24)); 

    var durationEl = document.getElementById('duration'); 
    durationEl.innerHTML = 'Duration: ' + diffDays.toFixed(4); 
}); 

chart.draw(dataTable, options); 

现在，您将得到第1步0.0557。这个解决方案并不难看，但至少你有一个想法。你甚至可以计算几小时，如果你想和做一些造型。

请参阅example at jsBin。