绘制具有小时时间序列的流动图

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 时间格式化，以便我得到以下数据。

[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

时间戳必须指定为 Javascript 时间戳，即自 1970 年 1 月 1 日 00:00 以来的毫秒数。这类似于 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>