jQuery Flot X轴时间

19

在这个例子中,x轴将比较天数...

$.plot($("#placeholder"), data, {
                yaxis: {},
                xaxis: { mode: "time",minTickSize: [1, "day"],timeformat: "%d/%m/%y"},"lines": {"show": "true"},"points": {"show": "true"},clickable:true,hoverable: true
            });

如何打印时间?

这是我想要的结果:

22:00 23:00 00:00 01:00 02:00 ...... 23:00 00:00 01:00 02:00 .... 06:00

这是否有可能实现?

2个回答

59

来自Flot官方文档的API介绍:(请参见https://github.com/flot/flot/blob/master/API.md

  xaxis: {
    mode: "time",
    timeformat: "%y/%m/%d"
  }

这将导致刻度标签显示为“2000/12/24”。支持以下格式说明符:

 %h: hours
  %H: hours (left-padded with a zero)
  %M: minutes (left-padded with a zero)
  %S: seconds (left-padded with a zero)
  %d: day of month (1-31), use %0d for zero-padding
  %m: month (1-12), use %0m for zero-padding
  %y: year (2 digits)
  %Y: year (4 digits)
  %b: month name (customizable)
  %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
  %P: AM/PM (uppercase version of %p)

7
“SUPER NIT PICK”,“time”后面需要加一个逗号。 - rnalexander
7
我相当确定捕获抛出异常的错误不是非常苛求。 - Bobby
2
另一个非常挑剔的问题:如果您要引用官方文档,提供链接会更有帮助。 :) - JBCP
1
%y 给我两位数的年份。 - Margo
3
@Margo 在最新版本的flot中,使用%Y表示四位数年份,使用%y表示两位数年份。 - Vikas Sharma
@VikasSharma 谢谢您的更新 - 我也会更新我的答案。 - MaTriXy

20
$.plot($("#placeholder"), data, {
        yaxis: {
        },
        xaxis: { mode: "time",minTickSize: [1, "hour"],
                min: (new Date("2000/01/01")).getTime(),
                max: (new Date("2000/01/02")).getTime()
},
        "lines": {"show": "true"},
        "points": {"show": "true"},
        clickable:true,hoverable: true
});

使用此作为起点,您可以在这里查看结果 http://jsfiddle.net/UEePE/


1
你的Fiddle在当前Chrome中没有显示任何行。 - SteMa

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接