Google timeline chart duration in hour

Question

ich benutze Google timeline chart, und ich möchte die dauer in hour zeigen, auch wenn die dauer über einen tag ist. Ist es möglich?

Danke

Ein Bild mit tausend Proben, die das unterschiedliche Verhalten 1 demostrate Wie Sie die Dauer ist falsch in rot zu sehen, und in Blau eine Dauer berechnet und ausgedruckt.

Answer 1

Es ist keine configuration options den Inhalt der Tooltip

aber eine benutzerdefinierte Tooltip bereitgestellt werden kann

ändern siehe folgende Arbeits Schnipsel

eine Tooltip Säule eingeführt wird, und mit Informationen aus den Daten bevölkerte

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>