用小時時間序列繪制浮點圖

Question

我正在使用Flot繪制每小時每小時的總計數。

數據來自數據庫中的數組，如下所示：

[2016-12-24 00] => 191
[2016-12-24 01] => 126
[2016-12-24 02] => 85
[2016-12-24 03] => 79
[2016-12-24 04] => 67
[2016-12-24 05] => 69
[2016-12-24 06] => 69
[2016-12-24 07] => 113
[2016-12-24 08] => 171
[2016-12-24 09] => 196
[2016-12-24 10] => 259
[2016-12-24 11] => 64
[2016-12-24 12] => 0
[2016-12-24 13] => 0
[2016-12-24 14] => 0
[2016-12-24 15] => 0
[2016-12-24 16] => 0
[2016-12-24 17] => 0
[2016-12-24 18] => 0
[2016-12-24 19] => 0
[2016-12-24 20] => 0
[2016-12-24 21] => 0
[2016-12-24 22] => 0
[2016-12-24 23] => 0

然后將其格式化為Unix時間，這樣我就獲得了Flot的數據。

[1482537600, 191],[1482541200, 126],[1482544800, 85],[1482548400, 79],[1482552000, 67],[1482555600, 69],[1482559200, 69],[1482562800, 113],[1482566400, 171],[1482570000, 196],[1482537600, 259],[1482541200, 64],[1482544800, 0],[1482548400, 0],[1482552000, 0],[1482555600, 0],[1482559200, 0],[1482562800, 0],[1482566400, 0],[1482570000, 0],[1482537600, 0],[1482541200, 0],[1482544800, 0],[1482548400, 0]

我的問題是圖表未正確顯示時間軸。

這樣顯示。

絨毛

我的代碼是：

xaxis:{
mode: 'time',
timeformat: '%h %p',
mintickSize: [1, "hours"]

}

上面的代碼有什么問題？

Answer 1

必須將時間戳記指定為Javascript時間戳記，以1970年1月1日00:00以來的毫秒數為單位。 這類似於Unix時間戳，但是以毫秒而不是秒為單位（請記住要乘以1000！）。 浮點文件

 var data = [ [1482541200,191], [1482544800,126], [1482548400,85], [1482552000,79], [1482555600,67], [1482559200,69], [1482562800,69], [1482566400,113], [1482570000,171], [1482573600,196], [1482577200,259], [1482580800,64], [1482584400,0], [1482588000,0], [1482591600,0], [1482595200,0], [1482598800,0], [1482602400,0], [1482606000,0], [1482609600,0], [1482613200,0], [1482616800,0], [1482620400,0], [1482624000,0] ]; data = data.map(function(d){ return [d[0]*1000, d[1]]}); $.plot("#placeholder", [data], { xaxis:{ mode: 'time', timeformat: '%h %p', mintickSize: [1, "hours"] } }); 

 <div id="placeholder" style="height:400px"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.js"></script> <script src="http://www.flotcharts.org/flot/jquery.flot.time.js"></script>