2016-12-17 19 views
2

Flot Chartsを使用して、1時間ごとの値を持つ24時間棒グラフを作成したいと考えています。私の理解から、Flotは時間値のエポック時間を使用します。しかし、次のコードを実行しているwenでは、グラフに値が表示されず、エラーも表示されません。Flot Javascript - 毎時の値を含む24時間棒グラフを描画する

//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); 

enter image description here

は、どのように私は、グラフ上の値を取り込むことができますか?

答えて

0

エポックタイムは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を参照)。