防止谷歌圖表X四捨五入日期時間列的軸線

Question

我有一個工作谷歌圖表，顯示在過去的24小時的數據，對於每一個小時（例如01:00至1時59分...等）的一個數據集。現在我試圖修改它，使其顯示過去24小時的數據，但在60分鐘內從當前時間（例如17:20到18:19 ...等）開始顯示數據。這是我對工作的代碼（https://jsfiddle.net/70boo2ss/）：

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('datetime', 'Hours'); 
    data.addColumn('number', 'Col 1'); 
    data.addColumn('number', 'Col 2'); 
    data.addColumn('number', 'Percentage'); 

    data.addRows([ 
     [new Date(1454963244*1000),329,35,10.64], 
     [new Date(1454959644*1000),17,1,5.88], 
     [new Date(1454956044*1000),60,24,40.00], 
     [new Date(1454952444*1000),60,24,40.00], 
     [new Date(1454948844*1000),60,24,40.00], 
     [new Date(1454945244*1000),60,24,40.00], 
     [new Date(1454941644*1000),60,24,40.00], 
     [new Date(1454938044*1000),60,24,40.00], 
     [new Date(1454934444*1000),60,24,40.00], 
     [new Date(1454930844*1000),60,24,40.00], 
     [new Date(1454927244*1000),60,24,40.00], 
     [new Date(1454923644*1000),60,24,40.00], 
     [new Date(1454920044*1000),60,24,40.00], 
     [new Date(1454916444*1000),60,24,40.00], 
     [new Date(1454912844*1000),60,24,40.00], 
     [new Date(1454909244*1000),60,24,40.00], 
     [new Date(1454905644*1000),60,24,40.00], 
     [new Date(1454902044*1000),60,24,40.00], 
     [new Date(1454898444*1000),60,24,40.00], 
     [new Date(1454894844*1000),60,24,40.00], 
     [new Date(1454891244*1000),60,24,40.00], 
     [new Date(1454887644*1000),60,24,40.00], 
     [new Date(1454884044*1000),60,24,40.00], 
     [new Date(1454880444*1000),60,24,40.00], 
    ]); 

    var formatter = new google.visualization.NumberFormat({ 
      fractionDigits: 2, 
      suffix: '%' 
    }); 
    formatter.format(data, 3); 

    var options = { 
     width: 1600, 
     height: 500, 
     backgroundColor: '#f1f1f1', 
     colors: ['#ff851b', '#03a9f4', '#8dc859'], 
     chartArea: {top:50, left:50, width: 1500}, 
     hAxis: {format: 'h:mma', textStyle: { fontSize: '12' }, gridlines: { count: 24 }}, 
     vAxes:[ 
      { }, 
      { gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{ 
       max:100, 
       min:0 
     }}], 
     series:[ 
      {targetAxisIndex:0}, 
      {targetAxisIndex:0}, 
      {targetAxisIndex:1} 
     ] 
    }; 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 

    chart.draw(data, options); 
} 

正如你可以的jsfiddle看到的，圖形化的數據被偏移到60分鐘的正確日期時間塊，但是橫軸開始於：00

如何使水平軸的啓動與圖形表示相同，而不是：00？

Answer 1

你可以設置自己的ticks和viewWindow: {min: lowest_date_in_data}爲hAxis。

google.charts.load('current', {packages: ['corechart', 'bar']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
\t var data = new google.visualization.DataTable(); 
 
\t data.addColumn('datetime', 'Hours'); 
 
\t data.addColumn('number', 'Col 1'); 
 
\t data.addColumn('number', 'Col 2'); 
 
\t data.addColumn('number', 'Percentage'); 
 

 
\t data.addRows([ 
 
\t \t [new Date(1454963244*1000),329,35,10.64], 
 
\t \t [new Date(1454959644*1000),17,1,5.88], 
 
\t \t [new Date(1454956044*1000),60,24,40.00], 
 
\t \t [new Date(1454952444*1000),60,24,40.00], 
 
\t \t [new Date(1454948844*1000),60,24,40.00], 
 
\t \t [new Date(1454945244*1000),60,24,40.00], 
 
\t \t [new Date(1454941644*1000),60,24,40.00], 
 
\t \t [new Date(1454938044*1000),60,24,40.00], 
 
\t \t [new Date(1454934444*1000),60,24,40.00], 
 
\t \t [new Date(1454930844*1000),60,24,40.00], 
 
\t \t [new Date(1454927244*1000),60,24,40.00], 
 
\t \t [new Date(1454923644*1000),60,24,40.00], 
 
\t \t [new Date(1454920044*1000),60,24,40.00], 
 
\t \t [new Date(1454916444*1000),60,24,40.00], 
 
\t \t [new Date(1454912844*1000),60,24,40.00], 
 
\t \t [new Date(1454909244*1000),60,24,40.00], 
 
\t \t [new Date(1454905644*1000),60,24,40.00], 
 
\t \t [new Date(1454902044*1000),60,24,40.00], 
 
\t \t [new Date(1454898444*1000),60,24,40.00], 
 
\t \t [new Date(1454894844*1000),60,24,40.00], 
 
\t \t [new Date(1454891244*1000),60,24,40.00], 
 
\t \t [new Date(1454887644*1000),60,24,40.00], 
 
\t \t [new Date(1454884044*1000),60,24,40.00], 
 
\t \t [new Date(1454880444*1000),60,24,40.00], 
 
\t ]); 
 

 
    // build ticks 
 
    var ticks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     ticks.push(data.getValue(i, 0)); 
 
    } 
 

 
\t var formatter = new google.visualization.NumberFormat({ 
 
\t \t \t fractionDigits: 2, 
 
\t \t \t suffix: '%' 
 
\t }); 
 
\t formatter.format(data, 3); 
 

 
\t var options = { 
 
\t \t width: 1600, 
 
\t \t height: 500, 
 
\t \t backgroundColor: '#f1f1f1', 
 
\t \t colors: ['#ff851b', '#03a9f4', '#8dc859'], 
 
\t \t chartArea: {top:50, left:50, width: 1500}, 
 
\t \t hAxis: { 
 
      format: 'h:mma', 
 
      textStyle: { fontSize: '12' }, 
 
      gridlines: { count: 24 }, 
 
      ticks: ticks, // set ticks 
 
      // set min window 
 
      viewWindow: {min: data.getValue(data.getNumberOfRows() - 1, 0)}}, 
 
\t \t vAxes:[ 
 
\t \t \t { }, 
 
\t \t \t { \t gridlines: { color: 'transparent' }, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{ 
 
\t \t \t \t max:100, 
 
\t \t \t \t min:0 
 
\t \t }}], 
 
\t \t series:[ 
 
\t \t \t {targetAxisIndex:0}, 
 
\t \t \t {targetAxisIndex:0}, 
 
\t \t \t {targetAxisIndex:1} 
 
\t \t ] 
 
\t }; 
 

 
\t var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
 

 
\t chart.draw(data, options); 
 
}

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