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

你现在可以获得第一步0.0557。这个解决方案有点难看但至少你明白了。你甚至可以根据需要计算小时数并做一些造型。

请参阅example at jsBin。

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

1 个答案: