Flot采用Canvas繪制圖形（Web總共就有三種常見方式來繪制圖形，不了解的同學(xué)請(qǐng)看這篇文章），在數(shù)據(jù)量非常大的時(shí)候，你需要考慮瀏覽器端的性能問題。順便提一句，D3是采用SVG來繪制圖形的，從我自己的體會(huì)來說，對(duì)于拖動(dòng)圖來說，SVG會(huì)比較流暢。

首先介紹一下數(shù)據(jù)的格式。數(shù)據(jù)來自一個(gè)數(shù)組嵌套的JSON格式，如：

［［0， 3］， ［4， 8］， ［8， 5］， ［9， 13］］

這就給定了一個(gè)二維圖上供繪制連線的幾個(gè)點(diǎn)。

數(shù)據(jù)可以直接通過API傳給Flot，讓它自行決定數(shù)據(jù)展示的樣子：

$（function （） { var d1 = ［］; for （var i = 0; i 《 14; i += 0.5） d1.push（［i， Math.sin（i）］）; var d2 = ［［0， 3］， ［4， 8］， ［8， 5］， ［9， 13］］; // a null signifies separate line segments var d3 = ［［0， 12］， ［7， 12］， null， ［7， 2.5］， ［12， 2.5］］; $.plot（$（“#placeholder”）， ［ d1， d2， d3 ］）; }）;

這是官網(wǎng)上的例子，代碼很簡(jiǎn)潔。從數(shù)據(jù)上看，其實(shí)是三層數(shù)組嵌套：

第一層是點(diǎn)坐標(biāo)；

第二層是同一條線內(nèi)的點(diǎn)序列；

第三層是不同的線的排列。

你可以看到這樣的圖案：

你也可以在數(shù)組的第三層，給定一種被稱為“series”的對(duì)象，而不是單純的數(shù)據(jù)，來指定你想要的線條的展示形式，如：

var d1 = ［］; for （var i = 0; i 《 14; i += 0.5） d1.push（［i， Math.sin（i）］）; var d2 = ［［0， 3］， ［4， 8］， ［8， 5］， ［9， 13］］; var d3 = ［］; for （var i = 0; i 《 14; i += 0.5） d3.push（［i， Math.cos（i）］）; var d4 = ［］; for （var i = 0; i 《 14; i += 0.1） d4.push（［i， Math.sqrt（i * 10）］）; var d5 = ［］; for （var i = 0; i 《 14; i += 0.5） d5.push（［i， Math.sqrt（i）］）; var d6 = ［］; for （var i = 0; i 《 14; i += 0.5 + Math.random（）） d6.push（［i， Math.sqrt（2*i + Math.sin（i） + 5）］）; $.plot（$（“#placeholder”）， ［ { data： d1， lines： { show： true， fill： true } }， { data： d2， bars： { show： true } }， { data： d3， points： { show： true } }， { data： d4， lines： { show： true } }， { data： d5， lines： { show： true }， points： { show： true } }， { data： d6， lines： { show： true， steps： true } } ］）;

展示成如下形式：

關(guān)于線條類型，總共有l(wèi)ine、point、bar這三種類型可以選，當(dāng)然也可以是這三種類型的組合。

對(duì)于不同坐標(biāo)軸（axes）和不同坐標(biāo)單位的展示，例如里面橫軸表示時(shí)間，格式“yyyy/mm/dd”這樣的，縱軸表示行駛的里程，格式是“xxx （km）”這樣的，解決這樣的問題，你需要做的是：

首先需要把所有數(shù)據(jù)數(shù)值化，就是變成純粹的整形或者浮點(diǎn)型的數(shù)值，這樣Flot才能識(shí)別數(shù)據(jù)的格式，例如時(shí)間就變成毫秒數(shù)，里程就變成千米數(shù)；

再自定義坐標(biāo)軸展示的callback函數(shù)。例如：

{ position： “left”， tickFormatter： KMFormatter， show： true， labelWidth： 30， show： true}

Flot是支持多x軸或者多y軸的，在這種情況下，series中只要指定了數(shù)據(jù)對(duì)應(yīng)的坐標(biāo)軸的序號(hào)，就可以實(shí)現(xiàn)多軸效果：

還有兩個(gè)概念需要提及，一個(gè)是“legend”，就是展示在圖中（比如上圖中的左下角）或者圖外面的圖示，用來標(biāo)識(shí)圖中不同顏色的線分別表示什么含義；還有一個(gè)叫做“grid”，就是圖中的網(wǎng)格，也包括坐標(biāo)軸的刻度和圖形的邊框。

核心的概念就是這些，F(xiàn)lot的API設(shè)計(jì)得很簡(jiǎn)潔，所以需要額外學(xué)習(xí)的東西也很少，馬上就可以上手使用。

具體的信息，可以閱讀它的官方API文檔，這非常有用；但是還有很多信息，是需要閱讀源碼獲得的（特別是它的許多插件都是沒有什么文檔的），源代碼寫得很清楚。

比較有用的插件包括這幾個(gè)：

支持圖像拖拽和圖像縮放的插件，這兩者合并起來就可以實(shí)現(xiàn)像Google地圖一樣的功能了；

區(qū)域選取的插件；

還有這個(gè)：Cross Hair，可以在圖像的鼠標(biāo)位置上顯示一條位置豎線，便于比較相應(yīng)的數(shù)值。

文：來四火的嘮叨博客供稿，轉(zhuǎn)載請(qǐng)注明來源。

標(biāo)簽： jQuery插件 Flot SVG繪制圖形 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。