JQuery图表插件Flot之时间轴步长

本文介绍如何在图表中精确配置时间轴格式至秒级,并通过设置步长值改善显示效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

由于图表在手机端展示,而客户要求时间轴的日期格式精确到秒

也就是常见的 yyyy-MM-dd HH:mm:ss  格式。如果精确到秒则会出现这种情况。

如上图可见 横坐标 什么都看不清楚  没有任何意义

所以设置步长值。网上搜到了这个段子。

   对于时间模式的"tickSize"是有一点特别的"minTickSize",需要使用数组来定义,格式为"[value,  unit]"。其中,unit只能是"second", "minute", "hour", "day", "month" and  "year",所以就可以这样来设置了:   minTickSize: [1, "month"] 这样就可以把两个刻度之间的差值设置成最小一个月了,如果tickSize是[2, "day"],那么刻度的差值就是固定了两天了.

网址:http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html

                                xaxis: {                       
                                      mode: "time",             
                                      tickSize:[6,"hour"],  
                                      timeformat: "%y/%m/%d %h:%M:%S"   
                                }

效果图如下:

客户满意。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值