Google時間軸圖表持續時間

Question

我使用的是Google時間軸圖表，即使持續時間超過一天，我也想顯示持續時間。可能嗎？

謝謝

的圖像與demostrate不同行爲1 正如你可以看到紅色的時間是錯誤的樣本一千，和藍色的持續時間計算並打印。

Answer 1

沒有configuration options改變工具提示

的內容，而且，可以提供定製的工具提示

見下列工作片斷

工具提示列被插入並與來自數據信息填充

google.charts.load('current', { 
 
    callback: function() { 
 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.Timeline(container); 
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({type: 'string', id: 'RowLabel'}); 
 
    dataTable.addColumn({type: 'string', id: 'BarLabel'}); 
 
    dataTable.addColumn({type: 'date', id: 'Start'}); 
 
    dataTable.addColumn({type: 'date', id: 'End'}); 
 

 
    dataTable.addRows([ 
 
     ['165414 fine-turbo   ers', 'Cpus 24 - 0.543h', new Date(2016,07,20, 13,37,32), new Date(2016,07,20, 15,43,19)], 
 
     ['165418 fine-turbo   ers', 'Cpus 24 - 0.534h', new Date(2016,07,20, 14,47,12), new Date(2016,07,20, 16,40,09)], 
 
     ['165427 fine-turbo   ers', 'Cpus 24 - 0.265h', new Date(2016,07,20, 18,01,23), new Date(2016,07,21, 00,02,53)], 
 
    ]); 
 

 
    dataTable.insertColumn(2, {type: 'string', role: 'tooltip', p: {html: true}}); 
 

 
    var dateFormat = new google.visualization.DateFormat({ 
 
     pattern: 'M/d/yy hh:mm:ss' 
 
    }); 
 

 
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) { 
 
     var duration = (dataTable.getValue(i, 4).getTime() - dataTable.getValue(i, 3).getTime())/1000; 
 
     var hours = parseInt(duration/3600) % 24; 
 
     var minutes = parseInt(duration/60) % 60; 
 
     var seconds = duration % 60; 
 

 
     var tooltip = '<div class="ggl-tooltip"><span>' + 
 
     dataTable.getValue(i, 1) + '</span></div><div class="ggl-tooltip"><span>' + 
 
     dataTable.getValue(i, 0) + '</span>: ' + 
 
     dateFormat.formatValue(dataTable.getValue(i, 3)) + ' - ' + 
 
     dateFormat.formatValue(dataTable.getValue(i, 4)) + '</div>' + 
 
     '<div class="ggl-tooltip"><span>Duration: </span>' + 
 
     hours + 'h ' + minutes + 'm ' + seconds + 's '; 
 

 
     dataTable.setValue(i, 2, tooltip); 
 
    } 
 

 
    chart.draw(dataTable, { 
 
     tooltip: { 
 
     isHtml: true 
 
     } 
 
    }); 
 
    }, 
 
    packages: ['timeline'] 
 
});

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

 
.ggl-tooltip div { 
 
    padding: 6px 6px 6px 6px; 
 
} 
 

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

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