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

Question

我想使用Flot Charts创建一个24小时的条形图，每小时都有一个值。根据我的理解，Flot使用小时值的纪元时间。但是，如果运行以下代码，图表不会显示任何值，也不会显示错误。

//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: (new Date(1970, 0, 1, 00, 00, 00, 00)).getTime(),
max: (new Date(1970, 0, 1, 24, 00, 00, 00)).getTime()

它可以处理您的数据。请参阅此fiddle。

但是，如果您只关心时间而不关心日期，请考虑使用categories mode，请参阅此fiddle。