flot中文詳解

調用plot函數的方法如下：

1	var plot = $.plot(placeholder, data, options)

Data的結構： data應該是data series的一個數組： [ series1, series2, ... ] 一個series可以是原始數據或者是擁有屬性的對象。原始數據是一個二維數組： [ [x1, y1], [x2, y2], ... ] 爲了簡化flot內容的邏輯關係，x軸和y軸的數值都要使用數字（當然，如果有特殊需要的話，flot也可以支持以時間一個軸，後面會有詳細的說明）。因 爲大多數的情況下，我們都是從數據庫中直接提取數據並轉換成JSON格式，但是沒有關心過數據類型的問題。如果出現了奇怪的現象的話，請先檢查數據的格式 是否有問題。 如果在一個點的數據使用的是null的話，那麼在繪製的過程中就會把這個點忽略。那麼包含這個點的那條線就會有斷開的現象。這個點之前和之後的點是無法進行連接的。
線和點是相關連的。對於bars， 可以設置第三個關聯值（默認是0）。 一個單一的序列對象結構是：

1 2 3 4 5 6 7 8 9 10 11 12 13

{     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以外，其它的屬性都沒有必要明確的指定，因爲大多數情況下它們都是使用默認值的。通常你只指定標籤和數據：

1 2 3 4

{     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的含義： 所有的選項都是完全可選的。如果想要修改的話，把它當作一個對象來處理就可以了：

1 2 3 4 5 6

var options = {     series: {       lines: { show: true },       points: { show: true }     } };

可定製說明部分的用戶設置：

1 2 3 4 5 6 7 8 9 10 11

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這個函數：

1 2 3 4

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等等的一些屬性就會被忽略，而且這個元素中的內容會被重寫的。

關於軸的用戶設置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

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"：可以對原始的數據進行一些特殊的計算以後再進行繪製。比如：可以通過這種方法來繪製一些非線性

的曲線。例如：

1 2 3 4

xaxis: {         transform: function (v) { return Math.log(v); },         inverseTransform: function (v) { return Math.exp(v); } }

同樣的，想對Y軸做反轉的話就可以：

1 2 3 4

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的可擴展性，就是可以調用一個函數來形成各個刻度的值。在函數中需要通過最小值，最大值和自己設定的一個間隔來計算出一個數組，作爲各個刻度：

1 2 3 4 5 6 7 8 9 10

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"是兩個刻度之間的差值，有了這麼多的屬性，就可以自己定製刻度的顯示內容：

1 2 3 4 5 6 7 8

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時制來顯示。

時間的格式和月份的名字是被一個flot自帶的格式化函數使用的，它會使用一個數據對象，一個格式字符串，從而返回格式化後的字符串。還可以直接調 用$.plot.formatDate(date, formatstring, monthNames)或者調用自己完成的具有更強大功能的函數。

你還可以通過函數來控制刻度的顯示內容。下面的例子是把December 24格式化成24/12:

1 2 3 4

tickFormatter: function (val, axis) {     var d = new Date(val);     return d.getUTCDate() + "/" + (d.getUTCMonth() + 1); }

對於時間模式的"tickSize"是有一點特別的"minTickSize"，需要使用數組來定義，格式爲"[value,  unit]"。其中，unit只能是"second", "minute", "hour", "day", "month" and  "year"，所以就可以這樣來設置了：   minTickSize: [1, "month"] 這樣就可以把兩個刻度之間的差值設置成最小一個月了，如果tickSize是[2, "day"]，那麼刻度的差值就是固定了兩天了。 自定義數據序列

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

series: {     lines, points, bars: {       show: boolean       lineWidth: number       fill: boolean or number       fillColor: null or color/gradient     }       points: {       radius: number       symbol: "circle" or function     }       bars: {       barWidth: number       align: "left" or "center"       horizontal: boolean     }       lines: {       steps: boolean     }       shadowSize: number }

colors: [ color1, color2, ... ] "series: {}"的選項會拷貝到所有的數據序列中。如果想設置所有的數據序列顯示屬性的話，就可以在這個全局選項中設置，如果只想設置某一個數據序列的顯示的話，就可以在對應的序列中進行設置。"lines", "points"和"bars"這三個屬性的設置是很重要的，因爲會直接影響到點，線和柱狀圖的顯示方式。如果所有的屬性都沒有設置的話，flot會有一個默認的設置。當然也可以單獨的設置一個或者多個屬性，flot會根據你的設置來繪製圖表：

1 2 3 4 5 6

var options = {     series: {       lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" },       points: { show: true, fill: false }     } };

"lineWidth"設置線的寬度，單位是pixels。你還可以把這個值設置成0,從而會把線刪除，當然陰影也不會繪製。 "fill"是控制填充的，當線足夠寬的話，線就變成了圖形，所以就有必要確定是否要填充了。 "fillColor"確定填充的顏色，如果這個值不設置的話，flot會使用數據序列中定義的顏色來填充。第4個值是設置填充的透明度，取值從0(完全透明)到1(不透明).對於bar類型的柱狀圖而言，fillColor可以是階梯形式的，下面會有詳細的介紹。"barWidth"是柱的寬度，單位就是對應軸的數據類 型。當軸是時間類型的話，那麼單位就是毫秒，那麼24 * 60 * 60 *  1000的寬度就是一天。"align"是柱的對齊方式，左對齊(默認)或者居中。當"horizontal"被設置以後，柱狀圖就會水平繪製，也就是柱 與x軸是平行的。如果之前已經繪製過與y軸平行的柱子的話，還要交換一下座標軸。 對於線而言，"steps"用來設置兩個相鄰點之間是使用直線連接還是使用臺階線連接。如果使用臺階線的，flot會自動的添加一些點來實現這個功能。 對於繪製的點，可以設置點的半徑和符號。目前flot只支持圓形的符號，可以使用其它的插件來使用其它的符號，也可以使用自己定義的函數：

1 2 3 4 5 6 7

function cross(ctx, x, y, radius, shadow) {       var size = radius * Math.sqrt(Math.PI) / 2;       ctx.moveTo(x - size, y - size);       ctx.lineTo(x + size, y + size);       ctx.moveTo(x - size, y + size);       ctx.lineTo(x + size, y - size); }

輸入的參數是繪製的上下文，繪製點x和y軸的座標，radius設置繪製點的半徑，也可以設置是否顯示陰影。

"shadowSize"用來設置陰影的大小，單位是pixels，設置成0的話就可以刪除陰影。 "colors"數組是用來設置在繪圖過程中各條線使用的顏色的默認值：   colors: ["#d18b2c", "#dba255", "#919733"] 如果數據序列的數量比定義的顏色數量多的話，flot還會生成一些新的顏色用於繪製圖表。

自定義網格

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

grid: {     show: boolean     aboveData: boolean     color: color     backgroundColor: color/gradient or null     labelMargin: number     axisMargin: number     markings: array of markings or (fn: axes -> array of markings)     borderWidth: number     borderColor: color or null     minBorderMargin: number or null     clickable: boolean     hoverable: boolean     autoHighlight: boolean     mouseActiveRadius: number }

網格可以看做是軸上的刻度不斷的延長而形成的。網格大多數的屬性都是在軸中定義的，但是也有些屬性是網格獨自定義的，"color"用來定義顏 色，"backgroundColor"用來定義網格中的背景顏色。如果設置成null的話，就說明grid的背景是透明的，當然也可以設置成梯度的。
當然也把show設置成false，而不顯示所有的刻度標籤和網格。"aboveData"用來確定網格與數據的層次關係。
"labelMargin"是刻度標籤與軸之間的像素值，"axisMargin"是兩個軸之間的像素值，當有兩個軸相鄰的時候使用的。你可以使用CSS來定義刻度標籤的顯示格式，需要定義一個"tickLabel"的CSS類。
"borderWidth"是圖表的邊界寬度值。設置成0就沒有邊界。"borderColor"是定義邊界的顏色，"minBorderMargin"控制邊界的最小空白區域。
"markings"用來繪製圖表中的簡單直線和背景上的矩形區域。可以使用數組來設置要繪製的線或者區域{ xaxis: { from, to }, yaxis: { from, to } }。或者是一個可以返回這種數組的函數，參數是軸的數據作爲一個對象。
還可以設置矩形區域的顏色：   markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]
如果省略其中的一個值的話，那麼flot就會把省略值的範圍設置成對應軸的所有取值範圍。{ xaxis: { from: 0, to: 2 } }就會繪製一個x軸從0到2, Y軸全部的矩形。markings: [ { yaxis: { from: 1, to: 1 } }, ... ]就會繪製一條與x軸平行的直線。可以通過設置"lineWidth"改變線的寬度。
使用函數來設置的話可以這樣來實現：

1 2 3 4 5 6

markings: function (axes) {     var markings = [];     for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2)       markings.push({ xaxis: { from: x, to: x + 1 } });     return markings; }

把"clickable"設置成true， 圖表就會監聽鼠標的click動作，並生成"plotclick"事件，參數是點擊的座標和點擊距離最近的數值，位置的座標可以是圖表中對應的值，也可以是全局頁面的座標。
同樣的，如果把"hoverable"設置成true的話，圖表就會監聽鼠標的移動事件，並生成"plothover"，參數與"plotclick"是 相同的。如果"autoHighlight"設置成true，鼠標附近的元素就會被高亮顯示。當然你也可以把"autoHighlight"設置成false，從而可以使用highlight/unhighlight函數來進行設置。
"plotclick" 和 "plothover"的處理函數可以這樣完成：

1 2 3 4 5 6 7 8 9 10 11 12

$.plot($("#placeholder"), [ d ], { grid: { clickable: true } });       $("#placeholder").bind("plotclick", function (event, pos, item) {         alert("You clicked at " + pos.x + ", " + pos.y);         // axis coordinates for other axes, if present, are in pos.x2, pos.x3, ...         // if you need global screen coordinates, they are pos.pageX, pos.pageY           if (item) {           highlight(item.series, item.datapoint);           alert("You clicked a point!");         } });

其中item對象的格式是

1 2 3 4 5 6 7

item: {       datapoint: the point, e.g. [0, 2]       dataIndex: the index of the point in the data array       series: the series object       seriesIndex: the index of the series       pageX, pageY: the global screen coordinates of the point }

如果設置的數據是這樣子的：   $.plot($("#placeholder"), [ { label: "Foo", data: [[0, 10], [7, 3]] } ], ...); 而且鼠標與（7, 3）這個節點離的非常近，"datapoint" 是 [7, 3],"dataIndex" 會是1。"series"就是一個序列的對象，包含的信息是"Foo"  (series.label)和顏色(series.color),seriesIndex的值是0.

如果使用上面的方法來顯示一些信息的話，那麼就需要監聽"mouseout"事件。"mouseActiveRadius"用來定義鼠標做用的範圍。如果有多個數據點在這個範圍中的話，Flot只會選擇最接近的那一個。對柱狀圖而言，最高的那個柱子會被選中。
如果不想有交互的話，就可以"hoverable" 和 "clickable" 設置成false：{ data: [...], label: "Foo", clickable: false }。
梯度顏色的定義 =================== 定義的方法： { colors: [ color1, color2, ... ] } 如果想讓網格的背景從黑色到灰色的話：   grid: {     backgroundColor: { colors: ["#000", "#999"] }   }

對數據序列，可以設置顏色的透明度和亮度：   { colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] } 第一個只有透明度，第二個還包含了亮度。對於柱形圖來說，下面的例子可以讓柱子逐漸的消失：   bars: {       show: true,       lineWidth: 0,       fill: true,       fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] }   }
Flot目前只能支持垂直方向上從上到下的漸變，因爲IE只支持這個模式。

Plot方法 --------------- 由plot函數生成的對象提供了可調用的方法   - highlight(series, datapoint) 用來高亮顯示一個數據點。你可以通過"plotclick"事件獲取對象，或者使用highlight(1, 3)來高亮顯示第2個數據序列中的第4個數據點。
  - unhighlight(series, datapoint) or unhighlight() 刪除高亮顯示，如果有參數的話，就是刪除指定高亮的點，如果沒有參數的話，plot就會刪除圖表中所有的高亮顯示。
  - setData(data) 用來重新設置數據。但是軸的取值範圍，刻度座標，標籤是不會重新繪製的，可以調用draw()讓plot繪製新的曲線，但是其它部分不會改變。用這個函數可以變速的更新一個圖表中的曲線，前提條件是所有值的取值範圍是沒有改變的。

  - setupGrid() 重新計算軸的取值範圍，並設置刻度和標籤。如果調用過setData的話，就可以使用這個函數重新繪製有影響的部分。   - draw() 重新繪製圖表中的顯示曲線部分。   - triggerRedrawOverlay() 在可繪製區域上更新可交互的部分，如選擇區域和點的高亮。當要自己編寫插件時是非常有用的。圖表並不會馬上重新繪製，而是可以設置一個定時器來獲取多次的重給事件。   - width()/height() 獲取可繪製區域的寬度和高度。也就是網格中的區域。   - offset() 返回網格中可繪圖的區域相對於整個文檔的偏移，當計算鼠標所在的位置時很重要。把event.pageX/Y減去這個偏移就是在繪圖區域中的座標。   - pointOffset({ x: xpos, y: ypos }) (x,y)這個數據點在包含繪圖div窗口中的偏移。   - resize() 如果繪圖窗口的大小發生改變，就可以調用這個函數來重新繪圖。   - shutdown() 關閉已經註冊的所有事件的處理函數。
還會一些其它的函數，但是需要你瞭解Flot內部的代碼流程。如果你修改了獲取到對象中的屬性的話，那麼你就修改了Flot內部使用的對象，Flot無法及時的更新你修改的內容，還有可能會影響繪圖功能，所以使用的時候一定要小心。具體的使用方法可以參考原版的文檔。   - getData()   - getAxes()   - getPlaceholder()   - getCanvas()   - getPlotOffset()   - getOptions()

Hooks（鉤子函數） ====================== Plot對象在繪製過程中可以添加許多的鉤子函數，從而添加一些方法，在方法還可以訪問Flot中的內部數據。
下面就是Flot處理流程的概要： 1. 插件的初始化，處理各個選項 2. 構造繪圖區域 3. 設置各類數據：處理用戶錄入的數據，計算顯示用的顏色，把原始數據轉化成內部格式，規格化數據，查看最大最小值用來設置軸的取值範圍。 4. 網格的設置：計算軸的空間，刻度，刻度的標籤。 5. 繪圖： 繪製網格，按照順序繪圖 6. 設置事件處理的自定義函數 7. 答覆事件。 8. 關閉：一般都是發生在整個圖表被重寫的時候發生。
鉤子函數一個簡單的函數，並放在了一個特定的數組當中。你可以使用"hooks"來添加鉤子函數，當繪圖完成以後，鉤子函數仍然是起作用的，因爲它的定義已經存在於plot的對象中了。

1 2 3 4 5 6 7 8

// define a simple draw hook   function hellohook(plot, canvascontext) { alert("hello!"); };   // pass it in, in an array since we might want to specify several   var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } });   // we can now find it again in plot.hooks.draw[0] unless a plugin // has added other hooks

下面會列出所有可以設置鉤子的地方。所有的鉤子都會把plot對象作爲第一個參數。你可以在在Flot綁定的插件中看使用的例子。 - processOptions  [phase 1]
   function(plot, options) 當Flot處理合並完合選項後調用。當你不想僅僅簡單的合併默認的選項時就可以使用。插件也可以通過這個函數來打開或者關閉與自己相關的選項。
- processRawData  [phase 3]
   function(plot, series, data, datapoints) 在Flot複製並且格式化原始數據之前調用。如果函數中使用格式化的數據點設置了datapoints.points並把datapoints.pointsize設置成數據點的數量，那麼Flot就會不會對這個數據序列進行任何的處理。
一般來說，你可能會設置datapoints.format，用來定義數據值的格式化方法和軸取值的範圍。默認的格式化數組是這樣子的：      [        { x: true, number: true, required: true },        { y: true, number: true, required: true }      ] 第一個對象的含義是對於第一個座標軸，需要計算x軸的取值範圍，必須是數字類型，而且是必選的。如果是空的，或者無法轉換成數字類型的話，所有的點都會被 初始化成0.當然了你還可以指定"defaultValue"，如果沒有指定類型的話，Flot就會使用這裏定義的選項值。
- processDatapoints  [phase 3]
   function(plot, series, datapoints) 在格式化完原始數據之後，查找最大值和最小值之前。這個鉤子函數是用來對數據進行轉換的。"datapoints"包含了兩個成員，其中datapoints.points是格式化後的一維數組，datapoints.pointsize是所有數據點的個數。這裏給出一個簡單的轉換，把所 有的點的y座標都乘以2：

1 2 3 4 5

function multiply(plot, series, datapoints) {          var points = datapoints.points, ps = datapoints.pointsize;          for (var i = 0; i < points.length; i += ps)              points[i + 1] *= 2; }

一定要保證datapoints中數據的正確性，因爲Flot不會再爲這些數據進行檢查的。
- drawSeries  [phase 5]
   function(plot, canvascontext, series) 只用來繪製一個數據序列，在循環的繪製每一個數據序列之前調用。
- draw  [phase 5]
   function(plot, canvascontext) 在網格繪製完成以後被調用。可以閱讀原代碼來學習這個方法的使用。
- bindEvents  [phase 6]
   function(plot, eventHolder) 在Flot配置它的事件處理函數之後調用。可以給eventHolder設置需要的事件處理函數。例如：

1 2 3 4 5

function (plot, eventHolder) {          eventHolder.mousedown(function (e) {              alert("You pressed the mouse at " + e.pageX + " " + e.pageY);          }); }

- drawOverlay  [phase 7]
   function (plot, canvascontext) 用來繪製可交互區域的。
- shutdown  [phase 8]
   function (plot, eventHolder) 當plot.shutdown()時被調用，一般只有整個繪圖被一個新的繪圖完全覆蓋時才需要。