調用plot函數的方法如下：
var plot = $.plot(placeholder, data, options)
其中placeholder可以是JQuery的對象，DOM元素或者JQuery的表達示，要把完成的圖放到這個位置上。placeholder要有寬度和高度。因為plot會修改placeholder的一些屬性，所以建議大家使用一個簡單的div，除了高度和寬度其它的屬性都不要設置。
Data的結構：
data應該是data series的一個數組：
[ series1, series2, ... ]
一個series可以是原始數據或者是擁有屬性的對象。原始數據是一個二維數組：
[ [x1, y1], [x2, y2], ... ]
為了簡化flot內容的邏輯關系，x軸和y軸的數值都要使用數字（當然，如果有特殊需要的話，flot也可以支持以時間一個軸，后面會有詳細的說明）。因為大多數的情況下，我們都是從數據庫中直接提取數據並轉換成JSON格式，但是沒有關心過數據類型的問題。如果出現了奇怪的現象的話，請先檢查數據的格式是否有問題。
如果在一個點的數據使用的是null的話，那么在繪制的過程中就會把這個點忽略。那么包含這個點的那條線就會有斷開的現象。這個點之前和之后的點是無法進行連接的。
線和點是相關連的。對於bars， 可以設置第三個關聯值（默認是0）。
一個單一的序列對象結構是：
{
color: color or number
data: rawdata
label: string
lines: specific lines options
bars: specific bars options
points: specific points options
xaxis: 1 or 2
yaxis: 1 or 2
clickable: boolean
hoverable: boolean
shadowSize: number
}
除了其中的data以外，其它的屬性都沒有必要明確的指定，因為大多數情況下它們都是使用默認值的。通常你只指定標簽和數據：
{
label: "y = 3",
data: [[0, 3], [10, 3]]
}
label是說明這一個數據序列的含義的，如果只有一個序列的話就沒有必要設置這個屬性。如果有多個序列，就要設置label，從而可以在圖中區分出序列的含義。
如果不設置color，那么會自動生成color來進行顯示。
如果你想讓用戶添加和刪除數據序列的話，剩下的屬性就非常有用了。
xaxis和yaxis選項設置使用哪個維度，默認是設置成1的，如果設置成2的話，就使用第二個維度（x軸在上面，y軸在右邊）。
clickable和hoverable可以設置成false，當整個圖表設置成可交互時，這個選項可以讓這條特定的數據序列讓用戶無法交互。
沒有說明的屬性會在后面詳細介紹，大多數情況話都是使用默認值。當你要使用自己定義的值時，就會把默認的值給覆蓋。
這是一個比較復雜的數據序列定義：
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]
Options的含義：
所有的選項都是完全可選的。如果想要修改的話，把它當作一個對象來處理就可以了：
var options = {
series: {
lines: { show: true },
points: { show: true }
}
};
可定制說明部分的用戶設置：
legend: {
show: boolean
labelFormatter: null or (fn: string, series object -> string)
labelBoxBorderColor: color
noColumns: number
position: "ne" or "nw" or "se" or "sw"
margin: number of pixels or [x margin, y margin]
backgroundColor: null or color
backgroundOpacity: number between 0 and 1
container: null or jQuery object/DOM element/jQuery expression
}
說明可以看成是一個表格，由兩部分組成的：一個是所有數據序列的label，另一個是顏色。如果想讓label以其它的格式顯示的話，可以使用lavelFormatter這個函數：
view plaincopy to clipboardprint?
- labelFormatter: function(label, series) {
- // series is the series object for the label
- return '<a href="#' + label + '" mce_href="#' + label + '">' + label + '</a>';
- }
noColums是要把這個說明部分划分成幾列。position是要把這個說明放到圖表的哪個位置(top-right, top-left, 等等)以及與其它圖表之間的距離。backgroundColor和backgroundOpacity是設置背景的顏色和透明度，正常都是默認的。
如果你想把這個說明部分從圖表中拿到來，並放到DOM中的一個元素中的話，就可以設置container這個屬性，它可以是一個JQuery的對象或者表達式。psition和margin等等的一些屬性就會被忽略，而且這個元素中的內容會被重寫的。
關於軸的用戶設置：
xaxis, yaxis: {
show: null or true/false
position: "bottom" or "top" or "left" or "right"
mode: null or "time"
color: null or color spec
tickColor: null or color spec
min: null or number
max: null or number
autoscaleMargin: null or number
transform: null or fn: number -> number
inverseTransform: null or fn: number -> number
ticks: null or number or ticks array or (fn: range -> ticks array)
tickSize: number or array
minTickSize: number or array
tickFormatter: (fn: number, object -> string) or string
tickDecimals: null or number
labelWidth: null or number
labelHeight: null or number
reserveSpace: null or true
tickLength: null or number
alignTicksWithAxis: null or number
}
所有的都包含相同的屬性。下面會詳細的介紹每一個屬性的含義。
show：如果不設置這個屬性的話，flot會自動的來選擇，比如：數據與軸有關系的話，那么就會把軸顯示出來，當然更靈活的方式還是用
true或者false來設定這個屬性。
position:用來定義軸文字顯示的位置，是在X軸的上方還是下方，是在Y軸的左邊還是右邊。
mode：軸的數據類型，默認的是數值類型，當設置成time類型的話，就可以用時間做為一個軸。
color：定義軸標識文字和坐標的顏色。如果不設置的話，就與圖表中網格的顏色是相同的。當然也可以自己來設置顏色，使用"tickColor"還
可以單獨定義坐標的顏色。
min/max：描述軸最大值和最小值范圍。如果不設置的話，flot會自動的計算並生成一個范圍來進行顯示。
autoscaleMargin:這個有一點難理解。flot自動計算min/max的范圍的時候會加上一個值，從而防止有的點會放到圖的邊緣。這個屬性只能
在不設置max/min的時候才可以使用。如果設置了一個margin，flot會延長軸的結束點從而構成一個完整的坐標。默認
的設置是x軸沒有margin，y軸有0.02的margin。默認的設置已經可以滿足大多數的使用了。
"transform"，"inverseTransform"：可以對原始的數據進行一些特殊的計算以后再進行繪制。比如：可以通過這種方法來繪制一些非線性
的曲線。例如：
xaxis: {
transform: function (v) { return Math.log(v); },
inverseTransform: function (v) { return Math.exp(v); }
}
同樣的，想對Y軸做反轉的話就可以：
yaxis: {
transform: function (v) { return -v; },
inverseTransform: function (v) { return -v; }
}
Flot中的數據都是單調的，也就是說原始的數據是不能出現亂序的。inverseTransform就是transform的反向函數，通過顯
示的數據可以得到原始數據，如果圖表沒有交互過程的話，這個屬性可以不用設置。
剩下的選項都是處理刻度的。如果不對刻度進行任何的設置的話，坐標生成函數會自動的計算刻度。算法會先估算刻度的個數，再計算出兩個刻度之間的間隔大小，從而可以生成完整的刻度了。你可以給算法設置刻度的個數("ticks")，算法會根據原始數據的范圍返回一個最接近你設置的刻度數的一個值，也就是說如果你設置了3,那么它返回5個坐標也是很正常的，因為算法認為5個刻度會更合適。如果不設置刻度的話，把"ticks"設置成0或者空數組就可以了。還可以通過設置"tickSize"來定義兩個刻度之間的差值，如果設置成2,那么刻度就會是2,4,6. 通過"minTickSize"可以設置兩個刻度差值的最小值。對於時間刻度，我們可以設置數組來完成：[2, "month"]。
最狠的方法還是直接忽略flot自帶的算法，完全使用數組自己定義的刻度：
ticks: [0, 1.2, 2.4]
下面的方法會更加的可定制化：
ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]]
Flot還支持更牛X的可擴展性，就是可以調用一個函數來形成各個刻度的值。在函數中需要通過最小值，最大值和自己設定的一個間隔來計算出一個數組，作為各個刻度：
function piTickGenerator(axis) {
var res = [], i = Math.floor(axis.min / Math.PI);
do {
var v = i * Math.PI;
res.push([v, i + "\u03c0"]);
++i;
} while (v < axis.max);
return res;
}
還可以設置"tickDecimals"來指定刻度顯示的精度。
給"tickFormatter"定義也一個函數可以靈活的格式化刻度的顯示，函數有兩個參數，一個是刻度的值，一個是軸上的最大值和最小值，返回值一定要是string類型：
function formatter(val, axis) {
return val.toFixed(axis.tickDecimals);
}
對於一個軸對象，有min和max這兩個屬性，還有"tickDecimals"是坐標顯示的精度，"tickSize"是兩個刻度之間的差值，有了這么多的屬性，就可以自己定制刻度的顯示內容：
function suffixFormatter(val, axis) {
if (val > 1000000)
return (val / 1000000).toFixed(axis.tickDecimals) + " MB";
else if (val > 1000)
return (val / 1000).toFixed(axis.tickDecimals) + " kB";
else
return val.toFixed(axis.tickDecimals) + " B";
}
"labelWidth"和"labelHeight"是定義刻度顯示區域的。"reserveSpace"的意思是即使你不定義軸，flot也會使用這個屬性把軸占用的空間給預留出來。當繪制單行多軸圖表時與"labelWidth"和"labelHeight"一起使用會得到很多的效果。
"tickLength"定義坐標刻度的長度，null是默認設置，也就是一個很小的刻度，如果設置成0,在軸上就不會顯示刻度。
"alignTicksWithAxis"：如果設置成其它軸的數字，Flot會在自動生成刻度的時候會與其它軸上的刻度對齊的。這樣會更加的美觀，尤其是圖中有網格，並且有多具軸的時候，非常的實用。
繪制多個軸：
如果你需要繪制多個軸的話，數據序列就要按照下面的格式給出，{ data: [...], yaxis: 2 }表明這個序列要使用第二個Y軸。這時要設置軸的顯示形式的話，就不能直接使用xaxis/yaxis的選項了，而是要有兩個數組：
{
xaxes: [ { position: "top" } ],
yaxes: [ { }, { position: "right", min: 20 } ]
}
如果所有的Y軸都想設置成相同的值的話，使用yaxis: { min: 0 }就可以了。
時間類型的數據序列：
時間序列比數據序列就有一點難了。因為時間序列並不是按照10進制來排列的，所以Flot需要把時間轉換成數值，再進行處理。Flot是通過javascript中的timestamps來支持時間序列的。timestamp是一個時間距1970年1月1日00:00:00的毫秒數，類似與Unix系統中使用的timestamps，只不過javascript的單位是毫秒，unix的意單位是秒。可以通過下面的來獲取瀏覽器的timestamp：
alert((new Date()).getTime())
一般來說，大家都希望在網頁上顯示本地的時間，但是Flot只能把timestamp轉換成UTC的時間來顯示，所以唯一的方法就是獲取本瀏覽當前的timestamp，和時區，再對timestamp的值進行計算，從而得到UTC時間與當前時間相等時的UTC timestamp。再把轉換后的值提供給Flot來繪圖。
這時就可以用轉換后的timestamp來構造原始的數據的，並把軸的類型定義成"time"，Flot就可以自動的計算刻度並格式化它們。當然了，也可以自己定義刻度，但是一定要使用數值型的參數，不能是對象類型。刻度的生成和格式化也可以通過軸的選項來自定義：
minTickSize: array
timeformat: null or format string
monthNames: null or array of size 12 of strings
twelveHourClock: boolean
"timeformat"：時間的顯示形式：
xaxis: {
mode: "time"
timeformat: "%y/%m/%d"
}
時間刻度就會顯示成"2000/12/24"，具體的格式定義參考下面：
%h: 小時
%H: 小時 (左邊補0)
%M: 分鍾 (左邊補0)
%S: 秒 (左邊補0)
%d: 日, 用 %0d 來左邊補0
%m: 月, 用 %0m 來左邊補0
%y: 年 (4位數)
%b: 月的名字 (英文名字)
%p: 12小時投制顯示(am/pm), %h/%H
%P: 12小時投制顯示 (其中的AM/PM)
月份的名字是可以自定義的：
monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]
當"twelveHourClock"被設置成true時，時間就會用12時制來顯示。