隨著jQuery、Mootools、prototype等知名的JavaScript框架的應用變的越來越強大,瀏覽器對最新版本CSS屬性的支援,除去頁面中Flash的應用之外,圖表應用變的越來越廣泛實用。本文為你整理了6個實用性強的jQuery圖表外掛,概述了它們各自的功用和優勢。

1、Flot

flot

從互動性的層面來說,jQuery實現的 Flot圖表和Flash實現的圖表效果已經是非常的接近。圖表輸出效果相當的流暢光滑,注重視覺效果。你也可以和data points資料節點配合使用,當滑鼠hover到某個資料節點時,會得到對應節點的數值說明內容的反饋資訊。

Flot Zoom capability

如上圖所示,你也可以選擇圖表的一部分內容,獲得這些特殊區域的資料;同時,你還可以對資料節點進行放大處理。

*優勢: *線條、節點、區域填充、柱狀圖以及以上功能的組合。

sparklines

Sparklines 是我最欣賞的微型圖表實現工具。真正實現了儀表風格的圖表樣式(登入到你的 Google Analytics 就知道什麼樣子了)。另外一個好的功用就是,可以幫助在所有的圖表外掛中實現 self-refresh 的能力。

*優勢:* 楔形、線條、柱狀圖以及以上功能的組合。

googlecharts

Google Charts plugin 是通過jQuery外掛將Google Charts API應用到Web程式的一個非常簡單的方式。同時,這個 API 本身也是非常的簡單易用 。允許使用簡單的jQuery呼叫,設定你自己需要的引數:

.attr('src',  api.make({data :  [[153, 60,  52], [113, 70, 60],  [120, 80, 40]]})) 

*優勢:* 柱狀圖、重疊柱狀圖、線條、楔形、3D楔形。

4,

0.21

jquerychart-01

jQuery Chart 0.21看起來似乎並不是一個特別好看的圖表外掛。實現的也是基本的功能,但它的使用卻是非常靈活、易用的。

例項(新增值給圖表)

.chartAdd({“label”:”Leads”,”type”:”Line”,”color”:”#008800″,”values”:[“100″,”124″,”222″,”44″,”123″,”23″,”99″]})

優勢: 區塊、線條、柱狀圖以及以上功能的組合。

jqchart

jQchart 可以實現在圖表中的拖拽動作和動畫轉換功能。如果你的CSS應用夠好,可以實現外觀不錯的圖表效果。與其他外掛相比,jQchart的實現功能似乎有些單一。

優勢: 柱狀圖、線條

tufte

Tuftegraph 生成的柱狀圖漂亮精緻,而且可以實現層疊效果。相比Flot 的精緻小巧,Tuftegraph也可以實現自身的減壓,變得更加輕便。

優勢: 柱狀圖、重疊柱狀圖。

以上6中同樣通過jQuery實現的圖表效果,卻各有各的優勢和侷限,你可以根據自身專案的需求,有選擇性地使用,我們的原則就是:簡單、實用、相容性強。