如何在時間序列中指定開始日期google-chart

Question

我有一個很好的簡單圖形，顯示API每小時的請求。我想要顯示時間範圍內的req/h - 到目前爲止的7天。

對於沒有可用數據的小時，json-data-file中沒有條目。所以他們需要被「填充」。

目前中間缺失的時間爲filled，但不知何故，現在似乎不可能讓圖表開始 - 7天。

這是示例性數據，在谷歌的JSON數據格式：

{"cols":[{"id":"tijdstip","label":"Tijdstip","type":"datetime"},{"id":"reqs","label":"reqs\/hour","type":"number"}],"rows":[{"c":[{"v":"Date(2016,11,10,0,0,0)"},{"v":6}]},{"c":[{"v":"Date(2016,11,10,14,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,10,19,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,10,20,0,0)"},{"v":42}]},{"c":[{"v":"Date(2016,11,10,21,0,0)"},{"v":18}]},{"c":[{"v":"Date(2016,11,10,22,0,0)"},{"v":18}]},{"c":[{"v":"Date(2016,11,10,23,0,0)"},{"v":6}]},{"c":[{"v":"Date(2016,11,11,20,0,0)"},{"v":2}]},{"c":[{"v":"Date(2016,11,13,20,0,0)"},{"v":17}]},{"c":[{"v":"Date(2016,11,13,21,0,0)"},{"v":23}]},{"c":[{"v":"Date(2016,11,14,13,0,0)"},{"v":1}]},{"c":[{"v":"Date(2016,11,16,15,0,0)"},{"v":8}]}]} 

這是選項對象：（我使用的材料線圖）

options = { 
    legend: { 
     position: 'none' 
    }, 
    hAxis: { 
     title: '', 
     format: 'd MMM yyyy HH:00', 
    }, 
    series: { 
     0: {axis: 'Aantal'} 
    }, 
    axes: { 
     y: { 
      Aantal: {label: 'req/h'}, 
      } 
    } 
}; 

並開始圖表：

​​

Answer 1

這就是問題材料名排行榜...

有幾個，根本不起作用

，包括所需要的控制軸標籤

hAxis.minValue選項 - 或 - hAxis.ticks

看到這個問題了更多 - >Tracking Issue for Material Chart Feature Parity #2143

相反，您可以使用核心圖表，以下選項...

theme: 'material'

看到下面的工作片段...

google.charts.load('current', { 
 
    packages: ['corechart'], 
 
    callback: function() { 
 
    var ticksX = []; 
 
    var today = new Date(); 
 
    var lastWeek = new Date(today.getTime() - (1000 * 60 * 60 * 24 * 7)); 
 
    for (var i = 0; i <= 7; i++) { 
 
     ticksX.push(new Date(lastWeek.getTime() + (1000 * 60 * 60 * 24 * i))); 
 
    } 
 
    var options = { 
 
     legend: { 
 
     position: 'none' 
 
     }, 
 
     hAxis: { 
 
     title: '', 
 
     format: 'd MMM yyyy HH:00', 
 
     ticks: ticksX 
 
     }, 
 
     theme: 'material', 
 
     vAxis: { 
 
     title: 'req/h' 
 
     } 
 
    }; 
 
    var json = { 
 
     "cols":[ 
 
     {"id":"tijdstip","label":"Tijdstip","type":"datetime"}, 
 
     {"id":"reqs","label":"reqs\/hour","type":"number"} 
 
     ], 
 
     "rows":[ 
 
     {"c":[{"v":"Date(2016,11,10,0,0,0)"},{"v":6}]}, 
 
     {"c":[{"v":"Date(2016,11,10,14,0,0)"},{"v":1}]}, 
 
     {"c":[{"v":"Date(2016,11,10,19,0,0)"},{"v":1}]}, 
 
     {"c":[{"v":"Date(2016,11,10,20,0,0)"},{"v":42}]}, 
 
     {"c":[{"v":"Date(2016,11,10,21,0,0)"},{"v":18}]}, 
 
     {"c":[{"v":"Date(2016,11,10,22,0,0)"},{"v":18}]}, 
 
     {"c":[{"v":"Date(2016,11,10,23,0,0)"},{"v":6}]}, 
 
     {"c":[{"v":"Date(2016,11,11,20,0,0)"},{"v":2}]}, 
 
     {"c":[{"v":"Date(2016,11,13,20,0,0)"},{"v":17}]}, 
 
     {"c":[{"v":"Date(2016,11,13,21,0,0)"},{"v":23}]}, 
 
     {"c":[{"v":"Date(2016,11,14,13,0,0)"},{"v":1}]}, 
 
     {"c":[{"v":"Date(2016,11,16,15,0,0)"},{"v":8}]} 
 
     ] 
 
    }; 
 
    var data = new google.visualization.DataTable(json); 
 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(data, options); 
 
    } 
 
});

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