Flot Javascript - 绘制一个 24 小时条形图，每个小时都有值

Question

我想使用 Flot Charts 创建一个 24 小时条形图，每个小时都有一个值。根据我的理解，Flot 使用纪元时间作为小时值。然而 wen 运行下面的代码图表没有显示任何值也没有错误。

//Data for 12am and 5pm respectively in epoch time
var data = [[43200000, 20], [61200000, 50]]; 

var dataset = [
 {
  label: "amount",
  data: data,
  color: "#FF0000",
  bars: {
    show: true, 
    align: "center",
    barWidth: 2 * 60 * 60 * 600,
    lineWidth:1
  }
 }
];

var options = {
 yaxis: {}, 
 xaxis: {
    mode: "time",
   //timeformat: "%H",
    tickSize: [1, "hour"], // tick every hour
    min: (new Date(0, 0, 0, 00, 00, 00, 00)).getTime(),
    max: (new Date(0, 0, 0, 24, 00, 00, 00)).getTime()
   }
};

 $.plot($("#flot-placeholder"), dataset, options);

如何在图表上填充值？

Answer 1

纪元时间从 1970-1-1 开始（参见 here）。将您的 min/max 值更改为

min: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(),
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime()

它适用于您的数据。看到这个 fiddle.

但如果您只关心时间而不关心日期，请考虑使用 categories mode, see this fiddle。

Flot Javascript - 绘制一个 24 小时条形图，每个小时都有值

Flot Javascript - drawing a 24 hour bar chart with values every hour

javascript

jquery

flot