Google 타임 라인 차트 지속 시간 (

Question

) Google 타임 라인 차트를 사용하고 있으며 기간이 하루 이상인 경우에도 시간을 표시하고 싶습니다. 가능한가?

는 기간이 잘못 빨간색에서 볼 수 있듯이 다른 행동 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>