dongshao1981 2016-12-24 09:46
浏览 94
已采纳

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

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条回答 默认 最新

  • dongyongju9560 2016-12-24 10:26
    关注

    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>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 设计一个光控计数器,全部用ttl芯片
  • ¥15 vscode platformio
  • ¥15 代写uni代码,app唤醒
  • ¥15 全志t113i启动qt应用程序提示internal error
  • ¥15 ensp可以看看嘛.
  • ¥80 51单片机C语言代码解决单片机为AT89C52是清翔单片机
  • ¥60 优博讯DT50高通安卓11系统刷完机自动进去fastboot模式
  • ¥15 minist数字识别
  • ¥15 在安装gym库的pygame时遇到问题,不知道如何解决
  • ¥20 uniapp中的webview 使用的是本地的vue页面,在模拟器上显示无法打开
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部