jQuery圖表插件Flot中文文檔

轉載自：http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html

最近正在使用JQuery的flot進行畫圖，可是這方面的中文幫助實在是太少了，乾脆把英文的document直接翻譯一下吧。由於也是再學習過程中，不免會存在翻譯不許確的地方，若是文中描述的不明白的話，能夠參考一下原文：http://people.iola.dk/olau/flot/API.txt 

調用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()時被調用，通常只有整個繪圖被一個新的繪圖徹底覆蓋時才須要。