Flot之barWidth属性

Author : lovecicy

Flot是一个纯JS的绘图库,它依赖于jQuery,使用简单,美观,兼容性好(Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+),官方网站请点这里

Flot提供了画时间序列图的功能,方法很简单,引入时间插件,并修改配置即可。相关配置如下:

mode:time,
minTickSize: array,
timeformat: null or format string,
monthNames: null or array of size 12 of strings,
dayNames: null or array of size 7 of strings,
twelveHourClock: boolean

在需要显示为时间轴的配置对象中配置以上属性即可,mode:time为必选属性。

同时Flot也支持chart显示方式为bar chart,即柱状图。

时间柱状图

time series bar chart

bar chart有一个barWidth属性,用来配置bar的宽度。

最近在使用Flot画time series bar chart的时候碰到了一个问题,就是chart不显示,而当显示为line chart的时候,chart可以却显示。最后发现是barWidth配置有问题,我以为barWidth是一个相对单位,于是将其配置为0.3,让bar 显示的时候的宽度为横轴坐标单位的30%宽度。查看了Flot的文档发现,barWidth是以x轴(如果horizontal设置为true则为y轴)的单位来计算的,一般情况下是以数字1为单位,而time series则是以毫秒(ms)为单位。因此如果要让bar的宽度为一天,则需要将barWidth设置为24*60*60*1000,同样的,如果你的chart时间跨度比较大,是年度增长表,则barWidth需要设置为一年的毫秒数,即365*24*60*60*1000。

standard

Have your say