Googleのタイムラインの時間を1時間に表示

Question

Googleのタイムラインのチャートを使用しています。期間が1日以上であっても時間を表示したいと考えています。出来ますか？

あなたは期間が間違っている、と青に期間が計算され、印刷された赤で見ることができるように異なる動作1 をdemostrateサンプルの千と

画像をいただき、ありがとうございます。

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>