Flot參考文檔：

一．對繪圖函數plot的調用：var plot=$.plot(placeholder,data,options)

-----------

placeholder

-----------

占位符placeholder是一個jQuery對象或者DOM元素或者jQuery表單式，繪圖函數將把圖表畫在placeholder內。

這個占位符要事先設置寬，高。

plot函數畫圖時將修改這個占位符的內容，因此你最好使用一個空的DIV元素作為占位符，另外注意不要給占位符設置花哨的樣式，比如，在IE7.0下，給占位符設置背景圖將會出錯。

-----------

data參數

-----------

flot的數據是一個數列數組。

plot函數中的data參數:每條曲線一個data項參數，繪制多條曲線時，是一個數組，每個數組元素是一條曲線的data項參數。

數列可以是原始數據，也可以是數據對象。

1.原始數據

原始數據格式是由一組表示數據點的坐標值的數組構成：[ [x1, y1],[x2, y2], ... ]

請注意，flot的縱橫坐標值都必須是數字(即使用時間數列也是，后面會介紹到)。

這是個很常見的錯誤，因為你很可能從數據庫獲取數據后沒有檢查數據類型就直接轉化成json對象使用。

如果你覺得遇到了莫名其妙的錯誤，請確認一下你輸入的是數字而不是字符串。

如果坐標為值為空 ,或者其中的一個坐標值為空，或者不是數字，或者說不能轉換為數字，那么這個節點將被忽略，并且該節點前后的2個節點之間不會使用直線來連接。

折線圖和散點圖每個節點有2個參數，直方圖則有3個參數，第三個參數來指定直方圖的底部位置(缺省值是0)。

2.對象數據

單個圖表對象數據格式參數如下：

{

color: color or number //顏色

data: rawdata //數據

label: string //曲線名稱

lines: specific lines options //折線圖坐標參數

bars: specific bars options //直方圖坐標參數

points: specific points options //散點圖坐標參數

xaxis: 1 or 2 //使用哪一條X軸，如果某條數軸沒有被任何一條曲線使用，該數軸不會在圖表上出現

yaxis: 1 or 2 //使用哪一條Y軸

clickable: boolean //允許監聽鼠標點擊事件

hoverable: boolean //允許監聽鼠標懸停事件

shadowSize: number //曲線陰影

}

一般情況下你無須設置每一個參數， 你只需要設置其中幾個特定的參數即可，其他參數會使用默認值。

參數詳解：

l label string 用于指定曲線名稱，如果沒有設置label的值，圖表標題區域不會出現。

l color 設置曲線顏色如果沒有設置曲線顏色，程序會自動采用默認顏色(options項里的colors數列)。顏色值可以是CSS顏色格式(RGB格式、16進制顏色、WEB通用顏色名) 還可以是數字編號，數字編號表示顏色數列里面顏色的編號。

l 如果你允許用戶重置或刪除曲線，后者會比較有用，你可以在代碼里面設置曲線使用的默認顏色的序號防止相同顏色在不用曲線間重復出現。

l xaxis" 和 "yaxis" 設置曲線使用的數軸(第二條X軸是頂部橫軸，第二條Y軸是右邊的縱軸)，你可以使用這個屬性制作雙數軸曲線。

l "clickable" 和 "hoverable"用于關閉該曲線的鼠標點擊效果或鼠標懸停效果，具體說明看后面。

其他參數在后面介紹，他們與plot函數的"options"參數的設置項是一樣的，如果你為某條曲線在data里面設置了這些參數的值，他們會覆蓋掉options的默認值。

-----------

option參數

-----------

options的所有選項都是可選的，他們都有默認值，后面會逐條對他們進行講解，如果要修改這些選項的默認值你只需要明確指定他們的值即可。

相關參數：

1. legend：定制曲線圖表標題

legend 用于生成圖表標題，圖表標題以表格的方式顯示在曲線圖上。

格式：

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 and1

Container: null or jQuery object/DOMelement/jQuery expression

}

參數詳解：

l labelFormatter：定制圖表標題的格式。

如果你想定制圖表標題的格式，比如做成超鏈接，你可以在"labelFormatter"項使用函數來定制。

例：

labelFormatter: function(label, series) {

//series是名稱為label的曲線的數據對象

return '<a href="#'%20+%20label%20+'">' + label + '</a>';

}

l noColumns：用于設置表格的列數。

l position：用于指定legend在曲線圖內的位置，"ne"東北角，"se"東南 , "nw"西北 , "sw"西南。

l margin： 設置legend與曲線圖邊框的距離,可以是x y軸偏移量的數值對[x,y]。也可以是單個數字，單個數字值表示相對x,y軸的偏移量使用相同的值。

采用哪條X軸和Y軸作為參照物取決于position的值。

l backgroundColor： 設置legend的背景顏色。

l backgroundOpacity： 設置legend背景的透明度。

l container：如果你想把legend放在其他DOM元素內，可以為container設定一個值。

container的值可以是jQuery對象或表達式，例如：container: $("#showChartLegend")。

container為legend指定容器后，"position" 和 "margin" 等與圖表相關的位置屬性會被忽略，

另外請注意，container指定的容器內容會被覆蓋掉。

2. xaxis, yaxis, x2axis, y2axis數軸定制

格式：

xaxis,yaxis, x2axis, y2axis: {

mode: nullor "time" //數軸是否為時間模式

min: null ornumber //數軸最小值

max: null ornumber //數軸最大值

autoscaleMargin:null or number //見參數詳解

labelWidth:null or number

labelHeight:null or number

transform:null or fn: number -> number

inverseTransform:null or fn: number -> number

ticks: nullor 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

}

參數詳解：

l mode 數軸樣式，mode為null表示數軸十進制，為time設置為時間軸。

l min/max 設置數軸最大值和最小值，如果沒有明確指定他們，將自動使用數據中的最小值和最大值。

l labelWidth/ labelHeight 用于設置數軸刻度標簽的高寬，這個屬性在你需要排列整齊幾個圖表的時候會派上用場。

l transform/ inverseTransform 為回調函數 用于改變數軸上的數據顯示方式。你可以設計一個函數來非線性地擴展或壓縮數軸上的特定數據段。

例：

xaxis: {

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

inverseTransform: function (v){ return Math.exp(v); }

}

需要注意的是，flot假定transform函數不會修改數據點的排列順序。

inverseTransform 函數是對transform的逆運算，因此有：

v == inverseTransform(transform(v)

當需要把坐標數據轉換回數值數據時就會用到這個函數，這常在圖表的動態交互時發生，比如鼠標在圖標上面點擊并獲取該點數據，但是如果你不做任何動態的交互，你可能不會用到這個函數。

其他與刻度網格相關的參數：

如果你沒有明確地設置刻度間隔，程序會自動設置，設置過程分為2步，

首先估計數軸刻度間隔所需數目，其次根據這個數目通過四舍五入方法估算合適的步長，最后生成刻度。

l ticks 通過設置"ticks" 的值為數字，你可以設置圖表產生刻度間隔的個數，但是程序盡量會設置最合適的刻度個數，因此，盡管你設置了3個刻度數，卻可能得到5個，如果你不需要自己設置刻度，把"ticks"的值設置為0或一個空數組。

l tickSize直接跳過估算步驟設置刻度間隔步長，如果你設置該值為2，生成的刻度將會是形如2，4，6。

l minTickSize可以設置刻度間隔的最小值。

如果你想完全的自定義刻度，可以設置參數"ticks"的值為一個數組，賦值方法如下例：ticks: [0, 1.2, 2.4]。

或者像下面的例子，連刻度的標簽也自定義：

ticks: [[0, "zero"], [1.2,"one mark"], [2.4, "two marks"]]。

這兩種方法可以混合使用。

刻度可以用函數來生成，方法是把一個函數賦給"ticks"，該函數應該以一個具有最大刻度值及最小刻度值的數軸對象為參數，

該函數返回一個刻度數組賦給"ticks"。

下例是一個簡單的刻度生成器，例子以pi值為刻度間隔大小，這對三角函數曲線非常適用。

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;

}

l tickDecimals 用于設置刻度的小數位數，默認情況下程序會自動判斷截取。

l tickFormatter可以通過函數來設置刻度顯示格式，格式函數有2個參數，刻度值及數軸對象。函數應該返回一個字符串賦給tickFormatter。

"tickFormatter"格式函數基本格式如下：

function formatter(val, axis) {

returnval.toFixed(axis.tickDecimals);

}

數軸對象可以獲取數軸數據的最大值和最小值，tickDecimals可以獲取刻度標簽的小數位數，tickSize可以獲取刻度間隔長度(程序算法自動計算出或自定義)。

3. 數據顯示定制

格式：

series: {

lines, points, bars: {

show: boolean

lineWidth: number

fill: boolean or number

fillColor: null or color/gradient

}

points: {

radius: number

}

bars: {

barWidth: number

align: "left" or "center"

horizontal: boolean

}

lines: {

steps: boolean

}

shadowSize: number

}

colors: [ color1, color2, ... ]

參數詳情：

l series: {} "series: {}"內的參數將對每一個數據序列生效，可以用來為圖表設置全局參數，如果需要為特定數據序列的圖表設置不同屬性，可以在對應的數據序列對象里面設置相應的參數把全局參數覆蓋掉。

l lines/ points/ bars 是最重要的參數，這些參數設置每條數據序列的圖表的折線圖、散點圖、直方圖是否顯示和如何顯示。

如果沒有專門設置這三個參數中的任何一個，默認情況下將顯示折線圖，關閉折線圖的方法是lines: { show: false}。

l lineWidth用于設置折線圖線條的粗細或其他圖型的邊框，你可以把這個值設置成0來關閉折線圖的輸出用于設置折線圖線條的粗細或其他圖型的邊框，你可以把這個值設置成0來關閉折線圖的輸出。

l fill 用于設置圖表填充的透明度(0-1)，對于折線，填充范圍是折線與數軸圍成的區域。

l fillColor設置填充顏色，如果填null,將使用線條顏色一致的顏色，如果顏色名解析失敗將使用默認顏色(折線圖直方圖黑色，散點圖白色)。

l barWidth用于設置直方圖的寬度，單位是數軸的單位而非像素。

l align 用于設置數據點對應刻度線與直方圖之間的對齊關系，默認情況下，刻度線在直方圖的左側(left,靠近數軸最小值一側)，如果設置為center，刻度線在直方圖中間。

l step 對于折線圖，"steps"可以設置是否使用階梯狀折線，設置為true采用階梯狀折線，相鄰2個數據點之間先以水平線連接，后然用垂直線連接，需要注意的是，這種模式會在同一垂直線上增加數據點來實現。

l shadowSize可以設置曲線陰影大小，設置為0關閉陰影效果。

l color"colors"可以預定義一系列顏色保存在數組里供曲線使用，你可以設置任意多種顏色。

如：colors:["#d18b2c", "#dba255", "#919733"]。

4. 背景柵格定制

格式：

grid: {

show: boolean

aboveData: boolean

color: color

backgroundColor: color/gradient ornull

tickColor: color

labelMargin: number

markings: array of markings or(fn: axes -> array of markings)

borderWidth: number

borderColor: color or null

clickable: boolean

hoverable: boolean

autoHighlight: boolean

mouseActiveRadius: number

}

參數詳解：

l color 定義的是grid的顏色，包括刻度值標簽的顏色。

l backgroundColor 背景色 填充在grid內部，默認情況下背景是透明的，可以為背景設置顏色漸變，具體細節后面會提到。

l show 如果grid的"show"參數設置為false，柵格背景包括數軸及數軸刻度標簽將被隱藏。

l aboveData用于設置柵格放置在數據點上面還是下面，默認情況false是放在數據點下面。

"aboveData"設置為true且設置了背景顏色，曲線將被grid的背景顏色遮蓋。

l tickColor設置刻度線的顏色。

l labelMargin設置刻度值標簽與網格的距離。

l borderWidth設置邊框寬度，設為0則取消邊框。

l borderColor設置邊框顏色。

l tickLabel設置刻度值標簽的CSS樣式，(未實驗，設置方法不明)。

l markings用于在背景上繪畫出一塊矩形。

矩形的位置及長寬通過縱橫軸的起始終止坐標來確定，第一橫軸與第一縱軸對應，第二橫軸與第二縱軸對應，color參數可以設置畫出區塊的顏色，賦值方式是一個數組，每個數組元素是一個json數據格式，每個數組元素繪制一個區塊。

可以用函數返回數組來賦值。

下面是個簡單例子：

markings: [ { xaxis: { from: 0, to: 2 },yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]

如果只設置一個數軸的數據范圍，則缺省數軸的數據范圍默認為[min,max]，如果數軸起止值相等，則畫出一條線，并且可以使用"lineWidth"設定線段的大小。

l clickable設置為true時，圖表將監聽鼠標單擊事件，單擊圖表時將觸發"plotclick"事件。

回調函數的參數是鼠標坐標和數據點的坐標值，即以像素為單位的位置坐標及以數軸為單位的數據坐標。

如果鼠標點擊位置沒有數據點，則數據點的參數值是null，反之，是一個json對象。

l hoverable設置為true將監聽鼠標移動事件，鼠標移動到某個位置時發生"plothover"事件，回調函數的參數與"clickable"一致。

"plotclick" 和 "plothover" 事件用法如下：

$("#placeholder").bind("plotclick",function (event, pos, item) {

if (item) {

$("#clickdata").text("Youclicked point " + item.dataIndex + " in " + item.series.label +".");

plot.highlight(item.series,item.datapoint);

}

});

l autoHighlight"autoHighlight"的值為true，則發生"hoverable"事件和"plotclick"事件時，數據點顯示高亮效果，數據點高亮的發生及消失對應有highlight/unhighlight方法。

l mouseActiveRadius 用來設置可以激活數據點的鼠標與數據點之間的距離，如果在符合距離內有多個數據點，flot會激活最近的數據點，對于直方圖，則激活最遲設置的直方圖。

在某條曲線數據本身設置"hoverable" 和"clickable" 為false則該曲線不會觸發事件

但options內設置為false時，不能在某條曲線內通過設置true來開啟事件監聽功能。

5. 定義變化模式

參數詳解：

l 曲線顏色預定義：{ colors: [ color1, color2, ...] }

l 圖表柵格背景顏色漸變

grid: {

backgroundColor:{ colors: ["#000", "#999"] }

}

l 曲線顏色明暗程度及透明度漸變設置，包括開始狀態和結束狀態的數據：

{ 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目前只支持從圖表top到bottom的垂直漸變，因為IE只能這樣實現漸變。

----------

Plot Methods方法

----------

plot函數返回的對象有下面一些方法可供調用：

1.highlight(series,datapoint) //激活數據點 series：曲線編號，datapoint：數據點在曲線數據序列中的編號，編號都是從0開始 例如：highlight(1, 1) 激活第二條曲線的第二個數據點

//datapoint 也可以是一個數據點的真實數據對象，是一個數組， 例如：highlight(1, [3,6]) 激活第二條曲線上坐標為[3,6]的點

//如果指定坐標的數據點不在該曲線上，仍然以該曲線的顏色顯示要激活的數據點

2.unhighlight(series,datapoint) or unhighlight() //取消數據點的激活效果,參數與highlight相同

//如果unhighlight()沒有設置參數，取消所有數據點的激活狀態

3.setData(data)

重新設置曲線數據，參數data是plot(placeholder, data, options)中的data參數，可以不包含options的設置內容。

重新設置數據后，如果需要立即改變圖表顯示，請調用draw()方法來重新繪制圖表

請注意，setData()方法并不會重新設置數軸的縮放比例、刻度、曲線名稱等，如果需要修改這些屬性，請使用setupGrid()方法。

如果你預先知道重新設置數據后數軸不需要改變，可以用setData(data)來設置數據然后調用draw()快速重繪曲線

如果數據量比較大，draw()方法可能會消耗較長時間，因此可能會有一點延遲，請不必感到疑惑。

4.setupGrid() 修改數軸、刻度、曲線名稱等，參數是 options 不包括data部分。

請注意，該方法不會重繪曲線就立即修改刻度標簽及曲線名稱，因為這些屬性是以DOM節點的形式來實現的

在canvas標簽內實現的屬性，比如刻度線，你需要調用draw()方法來重繪在canvas標簽內實現的屬性。

應該注意，如果原來圖表上沒有的數軸，在setupGrid()設置之后出現該數軸，那么該數軸會疊在Grid上。

5.draw()重繪圖表的canvas

triggerRedrawOverlay()添加一個覆蓋在圖標上的canvas，這個方法對圖表插件的開發非常有用，特別是一些動態的交互性的設置

比如彈出一個下拉菜單或增加一個亮點。

這個方法不會立即繪制設置的canvas內容，繪制的時機可以通過設置延時或鼠標事件來觸發。

6.width()/height()獲取圖表柵格的寬和高，寬高值會比canvas和占位符的尺寸小。

7.offset()獲取圖表的繪制區相對文檔的坐標，鼠標事件觸發獲取的文檔坐標減去該坐標將得到當前位置相對于繪圖區的位置偏移。

offset().left , offset().top 獲取左偏移和頂部偏移。

8.pointOffset({x: xpos, y: ypos })

獲取某個數據點位置相對于占位符的偏移。注意，不是相對canvas,而是相對于DIV

可以為數據點的值注明采用的數軸，默認采用第一坐標系。

pointOffset({ x: 3, y: 3.5}).left pointOffset({ x: 3, y: 3.5}).top 分別是數據點(3,3.5)位置相對于容器DIV的偏移。

下面是一些獲取圖表相關屬性的方法：

1.getData()獲取plot(placeholder, data, options) 函數的data 和 options 合成的數據。

getData() 并非僅僅返回函數的 data 參數，他是一個數組，里面的信息包含了這個曲線的信息，

包括options,每一條曲線的每一個參數設置、包括默認設置的值及格式函數

注意與setData()的參數區別，oo.setData(data), 則 data!= oo.getData()。

例：

var series = plot.getData();

for (var i = 0; i <series.length; ++i) alert(series[i].color);//逐個彈出曲線的顏色。

2.getAxes()該方法返回數軸信息的json對象，該對象有四個成員，分別為xaxis, yaxis, x2axis, y2axis 四條數軸

數軸內部包含了各種信息(具體信息可以把json對象轉化成字符串細看，這里不細述，本文后面有將json對象系列化成字符串的方法)

例如獲取X軸第一個刻度標簽： getAxes().xaxis.ticks[0].label

3.getPlaceholder()獲取圖表容器div，返回的是一個json對象。

4.getCanvas()獲取繪制區canvas，返回的是一個json對象。

5.getPlotOffset()獲取柵格邊緣與canvas邊緣之間的距離，有數軸的一邊間隔會大一些，因為需要縮小柵格防止數軸疊加在柵格上。

該方法返回一個json對象，形如 {left:36,right:6,top:6,bottom:20}。

6.getOptions()獲取繪制函數的options參數，返回的是一個json對象

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

事件鉤子

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

除了各種方法，flot還提供一些事件鉤子，你可以在圖表繪制過程中為事件鉤子設置回調函數以修改圖表繪制過程，這些回調函數具備使用flot內部數據結構的權限。

下面是flot繪圖的步驟：

1. 初始化引入的插件(如果有的話)設置，解析options的參數設置

2. 創建canvas標簽

3. 設置數據：解析數據設定，確定曲線顏色，把原始數據點的數據格式化成曲線所用格式，確定數軸的長度及縮放比例

4. 柵格設定：計算數軸刻度及刻度標簽，設置曲線名稱

5. 畫圖：畫出柵格及曲線

6. 設置用于交互的監聽事件函數

7. 如果存在的話，觸發事件

全部教程http://each.sinaapp.com/angular/index.html

總結

以上是生活随笔為你收集整理的flot中文说明文档 简版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。