用小时时间序列绘制flot图表

我使用Flot绘制每小时每小时的总计数。 </ p>

数据来自数组中的数据库,如下所示:</ p>

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

然后它在unix时间格式化,以便我获得下面的flot数据。</ p>

  [  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] 
</ code> </ pre>

我遇到的问题是图表没有正确显示时间轴。</ p>

这就是它的显示方式。</ p>

Flot </ p>

我的代码是:</ p>

  xaxis:{
mode:'time',
timeformat:'%h%p',
mintickSize:[1,“hours”] \ n </ code> </ pre>

} </ p>

上述代码有什么问题?</ p>
</ div>

展开原文

原文

I am using Flot to draw total count per day per hour.

The data comes from database in a array as follows:

[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

Then it is formated in unix time so that I got below data for the 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]

The issue I have is that the chart is not displaying the the time axis correctly.

This is how it is displayed.

Flot

The code I have is:

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

}

What is wrong in the above code?

1个回答



时间戳必须指定为Javascript时间戳,自1970年1月1日00:00起的毫秒数。 这就像Unix时间戳,但是以毫秒而不是秒为单位(记得乘以1000!)。
flot documentattion </ p>

</ p>





   var data = [ 
[1482541200,191],
[1482544800,126],
[1482548400,85],
[1482552000,79], \ N [1482555600,67] \ N [1482559200,69] \ N [1482562800,69] \ N [1482566400,113] \ N [1482570000,171], \ N [1482573600,196] \ N [1482577200,259] \ N [1482580800,64] \ N [1482584400,0] \ N [1482588000,0], \ N [1482591600,0] \ N [1482595200,0] \ N [1482598800,0] \ N [1482602400,0] \ N [1482606000,0], \ N [1482609600,0] \ N [1482613200,0] \ N [1482616800,0] \ N [1482620400,0] \ N [1482624000,0]

];

data = data.map(function(d){return [d [0] * 1000,d [1]]});

$ .plot(“#place holder“,[data],{
xaxis:{
mode:'time',
timeformat:'%h%p',
mintickSize:[1,”hours“ ]

}

}); </ code> </ pre>

 &lt; div id  =“占位符”style =“height:400px”&gt;&lt; / div&gt;

&lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min .js“&gt;&lt; / script&gt;

&lt; script src =”http://www.flotcharts.org/flot/jquery.flot.js“&gt;&lt; / script&gt;

&lt; script SRC = “http://www.flotcharts.org/flot/jquery.flot.time.js” &GT;&LT; /脚本&GT; </代码> </ PRE>

</ DIV>

</ div>

</ div>

展开原文

原文

The timestamps must be specified as Javascript timestamps, as milliseconds since January 1, 1970 00:00. This is like Unix timestamps, but in milliseconds instead of seconds (remember to multiply with 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>

</div>

dongzhang6677
dongzhang6677 很好,问题解决了,我发现了问题所在。
3 年多之前 回复
duanhuang1967
duanhuang1967 那是因为你重复了时间戳1482541200,1482544800 ......,检查转换为时间戳。 它看起来有些不对劲。 “2016-12-24 13”应该是1482588000而不是1482544800
3 年多之前 回复
dqkf49487
dqkf49487 为什么此片段在00到23小时内不显示? 图表未正确显示
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问