首先 繪圖函式可以簡單的如下,設定三個變數:
          $.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 + 自己使用心得


