jQuery Flot: 24 hour axis

问题

I'm using jQuery Flot plugin and I would like to have 24 hour x-axis. But how to accomplish that? I included necessary time plugin (jquery.flot.time.js) and tried something like this:

xaxis: {
    mode: "time",
    timeformat: "%H",
    tickSize: [1, "day"],
    twelveHourClock: true
}

but nothing is showing up. What am I doing wrong?

回答1:

You are looking for something like this:

xaxis: {
    mode: "time",
    timeformat: "%I:%M %p", // HH:MM am/pm
    tickSize: [1, "hour"], // tick every hour
    twelveHourClock: true,
    min: 1390780800000, // start of today
    max: 1390863600000 // end of today
},

Very contrived example here.

EDITS

To show last 24 hours use:

var epochT = (new Date).getTime(); // time right now in js epoch

$.plot($("#placeholder"), [data], {
xaxis: {
    mode: "time",
    timeformat: "%I:%M %p",
    tickSize: [1, "hour"],
    twelveHourClock: true,
    min: epochT - 86400000, // time right now - 24 hours ago in milliseonds
    max: epochT,
    timezone: "browser" // switch to using local time on plot
},

Updated fiddle.

来源：https://stackoverflow.com/questions/21386487/jquery-flot-24-hour-axis