jQuery插件Flot的介紹
最近在項目里面要用到JavaScript來繪制圖表，JQuery的插件Flot是一個不錯的選擇。和我之前介紹過的D3不同，它的唯一目的就是用來繪制曲線圖的，即便是它的不同插件的功能，也基本上都在這個范疇之內(nèi)。
Flot采用Canvas繪制圖形（Web總共就有三種常見方式來繪制圖形，不了解的同學(xué)請看這篇文章），在數(shù)據(jù)量非常大的時候，你需要考慮瀏覽器端的性能問題。順便提一句，D3是采用SVG來繪制圖形的，從我自己的體會來說，對于拖動圖來說，SVG會比較流暢。
首先介紹一下數(shù)據(jù)的格式。數(shù)據(jù)來自一個數(shù)組嵌套的JSON格式，如：
- [[0, 3], [4, 8], [8, 5], [9, 13]]
這就給定了一個二維圖上供繪制連線的幾個點。
數(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)上的例子，代碼很簡潔。從數(shù)據(jù)上看，其實是三層數(shù)組嵌套：
第一層是點坐標(biāo)；
第二層是同一條線內(nèi)的點序列；
第三層是不同的線的排列。
你可以看到這樣的圖案：
你也可以在數(shù)組的第三層，給定一種被稱為“series”的對象，而不是單純的數(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)然也可以是這三種類型的組合。
對于不同坐標(biāo)軸（axes）和不同坐標(biāo)單位的展示，例如里面橫軸表示時間，格式“yyyy/mm/dd”這樣的，縱軸表示行駛的里程，格式是“xxx (km)”這樣的，解決這樣的問題，你需要做的是：
首先需要把所有數(shù)據(jù)數(shù)值化，就是變成純粹的整形或者浮點型的數(shù)值，這樣Flot才能識別數(shù)據(jù)的格式，例如時間就變成毫秒數(shù)，里程就變成千米數(shù)；
再自定義坐標(biāo)軸展示的callback函數(shù)。例如：
- { position: "left", tickFormatter: KMFormatter, show: true, labelWidth: 30, show: true}
Flot是支持多x軸或者多y軸的，在這種情況下，series中只要指定了數(shù)據(jù)對應(yīng)的坐標(biāo)軸的序號，就可以實現(xiàn)多軸效果：
還有兩個概念需要提及，一個是“legend”，就是展示在圖中（比如上圖中的左下角）或者圖外面的圖示，用來標(biāo)識圖中不同顏色的線分別表示什么含義；還有一個叫做“grid”，就是圖中的網(wǎng)格，也包括坐標(biāo)軸的刻度和圖形的邊框。
核心的概念就是這些，F(xiàn)lot的API設(shè)計得很簡潔，所以需要額外學(xué)習(xí)的東西也很少，馬上就可以上手使用。
具體的信息，可以閱讀它的官方API文檔，這非常有用；但是還有很多信息，是需要閱讀源碼獲得的（特別是它的許多插件都是沒有什么文檔的），源代碼寫得很清楚。
比較有用的插件包括這幾個：
支持圖像拖拽和圖像縮放的插件，這兩者合并起來就可以實現(xiàn)像Google地圖一樣的功能了；
還有這個：Cross Hair，可以在圖像的鼠標(biāo)位置上顯示一條位置豎線，便于比較相應(yīng)的數(shù)值。
這些直觀的例子都可以在這里找到。
原文鏈接：http://www.raychase.net/1119
【編輯推薦】
