時系列のフロートチャートを描画する

Question

Flotを使用して1時間あたりの総カウントを描画しています。次のように

データは、アレイ内のデータベースから来ている：私は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時間でフォーマットされています。

[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] 

問題は、グラフに時間軸が正しく表示されていないことです。

これは表示方法です。

Flot

私が持っているコードは次のとおりです。

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

}

は、上記のコードで何が悪いのでしょうか？

Answer 1

タイムスタンプは、1970年1月1日00:00からのミリ秒のJavascriptタイムスタンプとして指定する必要があります。これはUnixのタイムスタンプに似ていますが、秒単位ではなくミリ秒単位で表します（1000を掛けてください）。 flot documentattion

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>