隨著jquery、mootools、prototype等知名的javascript框架的應(yīng)用變的越來越強(qiáng)大，瀏覽器對最新版本css屬性的支持，除去頁面中flash的應(yīng)用之外，圖表應(yīng)用變的越來越廣泛實(shí)用。本文為你整理了6個實(shí)用性強(qiáng)的jquery圖表插件，概述了它們各自的功用和優(yōu)勢。

1，flot

[align=center][/align]

從交互性的層面來說，jquery實(shí)現(xiàn)的 flot圖表和flash實(shí)現(xiàn)的圖表效果已經(jīng)是非常的接近。圖表輸出效果相當(dāng)?shù)牧鲿彻饣?，注重視覺效果。你也可以和data points數(shù)據(jù)節(jié)點(diǎn)配合使用，當(dāng)鼠標(biāo)hover到某個數(shù)據(jù)節(jié)點(diǎn)時，會得到對應(yīng)節(jié)點(diǎn)的數(shù)值說明內(nèi)容的反饋信息。

[align=center][/align]

如上圖所示，你也可以選擇圖表的一部分內(nèi)容，獲得這些特殊區(qū)域的數(shù)據(jù)；同時，你還可以對數(shù)據(jù)節(jié)點(diǎn)進(jìn)行放大處理。

優(yōu)勢: 線條、節(jié)點(diǎn)、區(qū)域填充、柱狀圖以及以上功能的組合。

2，sparklines

[align=center][/align]

sparklines 是我最欣賞的微型圖表實(shí)現(xiàn)工具。真正實(shí)現(xiàn)了儀表風(fēng)格的圖表樣式（登錄到你的 google analytics 就知道什么樣子了)。另外一個好的功用就是，可以幫助在所有的圖表插件中實(shí)現(xiàn) self-refresh 的能力。

優(yōu)勢: 楔形、線條、柱狀圖以及以上功能的組合。

3， google charts plugin

[align=center][/align]

google charts plugin 是通過jquery插件將google charts api應(yīng)用到web程序的一個非常簡單的方式。同時，這個 api 本身也是非常的簡單易用 。允許使用簡單的jquery調(diào)用，設(shè)置你自己需要的參數(shù)：

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

優(yōu)勢: 柱狀圖、重疊柱狀圖、線條、楔形、3d楔形。

4，

jquery chart 0.21

0.21

[align=center][/align]

jquery chart 0.21看起來似乎并不是一個特別好看的圖表插件。實(shí)現(xiàn)的也是基本的功能，但它的使用卻是非常靈活、易用的。

實(shí)例（添加值給圖表）

.chartadd({”label”:”leads”,”type”:”line”,”color”:”#008800″,”values”:["100","124","222","44","123","23","99"]})

優(yōu)勢: 區(qū)塊、線條、柱狀圖以及以上功能的組合。

5，jqchart

[align=center][/align]

jqchart 可以實(shí)現(xiàn)在圖表中的拖拽動作和動畫轉(zhuǎn)換功能。如果你的css應(yīng)用夠好，可以實(shí)現(xiàn)外觀不錯的圖表效果。與其他插件相比，jqchart的實(shí)現(xiàn)功能似乎有些單一。

優(yōu)勢: 柱狀圖、線條

6，tuftegraph

[align=center][/align]

tuftegraph 生成的柱狀圖漂亮精致，而且可以實(shí)現(xiàn)層疊效果。相比flot 的精致小巧，tuftegraph也可以實(shí)現(xiàn)自身的減壓，變得更加輕便。

優(yōu)勢: 柱狀圖、重疊柱狀圖。

以上6中同樣通過jquery實(shí)現(xiàn)的圖表效果，卻各有各的優(yōu)勢和局限，你可以根據(jù)自身項(xiàng)目的需求，有選擇性地使用，我們的原則就是：簡單、實(shí)用、兼容性強(qiáng)。

英文：6 jquery chart plugins for your app

http://bbon.cn/2009/03/6%e4%b8%aajquery%e5%9b%be%e8%a1%a8%e5%ba%94%e7%94%a8%e6%89%a9%e5%b1%95.html