[英]jQuery Flot line chart with month,year in x-axis
我正在嘗試在x軸上生成帶有月,年的圖形。 請檢查以下示例:
該圖的數據是通過ajax獲得的。 請檢查以下示例json:
{"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]}
在上面的示例中,[2013,4,0]應該轉換為x軸:2013年4月,y軸:0。
您能告訴我我如何實現這一目標嗎?
謝謝。
這是我的處理方式:
// your JSON
obj = {"total":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,475],[2013,11,0],[2013,12,0],[2014,1,367],[2014,2,0],[2014,3,0]],"critical":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,0],[2013,11,0],[2013,12,0],[2014,1,1],[2014,2,0],[2014,3,0]],"high":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,20],[2013,11,0],[2013,12,0],[2014,1,20],[2014,2,0],[2014,3,0]],"medium":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,24],[2013,11,0],[2013,12,0],[2014,1,135],[2014,2,0],[2014,3,0]],"low":[[2013,4,0],[2013,5,0],[2013,6,0],[2013,7,0],[2013,8,0],[2013,9,0],[2013,10,42],[2013,11,0],[2013,12,0],[2014,1,26],[2014,2,0],[2014,3,0]]};
// reformat into the format flot likes
seriesData = [];
for (var prop in obj) {
// push in the series, the "property" is the label
// use $.map to produce an array of [date, y-value]
// the new Date(i[0],i[1]-1).getTime(),
// will give you the epoch time for the first day of that month/year
seriesData.push({label: prop, data:$.map(obj[prop], function(i,j){
return [[new Date(i[0],i[1]-1).getTime(), i[2]]];
})});
}
// plot it!
$.plot("#placeholder", seriesData, {
xaxis: { mode: "time", timeformat: "%b %Y" }
});
在這里擺弄。
編輯:它被i[2]
更改為j
,以顯示正確繪制的數據。
在選項中:
xaxis: {mode: "time", timeformat: "%b %m"}
使用時間插件 。
如鏈接中所述,數據必須轉換為時間戳。 由於您一天中的時間為0,因此可能類似於:
tstamp = new Date(dat[0]*1000*3600*24*30*12+dat[1]*1000*3600*24*30)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.