心得 Flot 畫圖， 參數設定

以下介紹一些使用 Flot 畫趨勢圖的一些心得
 首先 繪圖函式可以簡單的如下，設定三個變數：
          $.plot( $("#drawdiv") , DATAObj, Setting );

• drawdiv： 要繪圖的 tag 
• DATAObj： 繪圖的資料來源，這裡有他的規定的格式 
• Setting： 其他變數設定，包含X軸、Y軸，滑鼠事件監聽等等  

----------------------------------------------------

 $("#drawdiv") ： 

           這裡要注意，記得div 要設定好長度和寬度就好

 DATAObj： 

            一般設定的話， 將外部物件 datasets 傳入即可， label 是在圖形上顯示的文字說明


var datasets =
        {"objA": {"label":"測試物件1","data":[[1336603200000,55],[1336533600000,94]]},
 "objB": {"label":"測試物件2","data":[[1336603200000,77],[1336533600000,88]]},
        "objC": {"label":"測試物件3","data":[[1336603200000,21],[1336533600000,21]]}};


顯示如圖

         但若要設定個別設定線段的話 就要修正data 的地方， 如圖設定
         測試物件一為線段、測試物件二為直條圖、測試物件三為點
          $.plot( $("#drawdiv") ,

                   {  data: datasets.objA.data,
              label:datasets.objA.label,
              lines: { show: true}
           },
           {  data: datasets.objB.data,
              label:datasets.objB.label,
              bars: { show: true , barWidth: 15000000}
           },
           {
              data: datasets.objC.data,
              label:datasets.objC.label,
              points: { show: true, fill: true ,fillcolor: null},
              lines: { show: false }
           }]
                     , Setting ); 

Setting：

簡單設定如下， Y軸設定加上 單位 "unit",
                            X軸設定格式是時間、時間的格式、最大時間、最小時間、時間間隔，
                            series: 整體設定顯示為線段、但data部份中有指定的話以data指定的為優先
                            grid: 這裡設定事件滑鼠移動事件的開啟與否


 $.plot( $("#drawdiv") , DATAObj,
                       { yaxis: { min: 0 , 
                         tickFormatter: function(val){ 
   return val + "unit";
  }
},
  xaxis: { 
          mode: "time" ,
 timeformat: " %0m/%0d %H:%M",
min:  1336602600000,
 max:  1336535600000,
 minTickSize: [4, "hour"]
},
series: {
   lines: { show: true }
 },
grid: { hoverable: true, clickable: true }
    }
           );









 參考： flot API + 自己使用心得