[p]jquery, mootools, prototype 等優(yōu)秀的 javascript 框架擁有各種強(qiáng)大的功能，包括繪制 web 圖表，使用這些框架以及相應(yīng)插件，我們可以非常輕松地實(shí)現(xiàn)曲線圖，圓餅圖，柱狀圖等 web 圖表的繪制，而不必象以往那樣通過(guò)復(fù)雜的 flash 技術(shù)實(shí)現(xiàn)。[/p]
[p][/p]
[p]本文介紹了9個(gè)優(yōu)秀的基于 javascript 與 css 的 web 圖表框架。[/p]
1. flot
[p][b][img]http://bbon.cn/wp-content/uploads/2009/03/1543563jm.png[/img][/b][/p]
flot 是一個(gè)純粹的 jquery javascript 繪圖庫(kù)，可以在客戶(hù)端即時(shí)生成圖形，使用非常簡(jiǎn)單，支持放大縮小以及鼠標(biāo)追蹤等交互功能。該插件支持 ie6/7/8, firefox 2.x+, safari 3.0+, opera 9.5+ 以及 konqueror 4.x+。使用的是 safari 最先引入的 canvas 對(duì)象，目前所有主流瀏覽器都支持該對(duì)象，除了 ie, 因此在 ie中使用 javascript 進(jìn)行模擬。這里有一些實(shí)例。
2. js charts
[p][img]http://bbon.cn/wp-content/uploads/2009/03/1543571cf.png[/img][/p]
js charts 是一個(gè)免費(fèi)的基于 javascript 的圖表生成器，表格繪制非常簡(jiǎn)單，幾乎不需要編碼，也不需要插件和服務(wù)器模塊，使用xml 或 javascript 數(shù)組緩存數(shù)據(jù)。
3. tabletochart
tabletochart 是一個(gè) mootools 腳本，可以將 html table 對(duì)象中存儲(chǔ)的數(shù)據(jù)繪制成圖表。你可以使用 table 標(biāo)簽生成圖表，柱狀圖，曲線圖，圓餅圖等。
4. plotkit
plotkit 是一個(gè) javascript 繪圖庫(kù)，支持 html canvas 標(biāo)簽，也支持 svg。
5. yahoo ui charts control
[p][img]http://bbon.cn/wp-content/uploads/2009/03/154359ilg.png[/img][/p]
yui charts control 可以在網(wǎng)頁(yè)上將表格數(shù)據(jù)轉(zhuǎn)換為圖表，支持柱狀圖，曲線圖以及圓餅圖。支持 datasource 工具，可設(shè)置的軸，鼠標(biāo)盤(pán)旋提示，圖表組合，以及皮膚等功能。
6. protochart
[p][img]http://bbon.cn/wp-content/uploads/2009/03/154359h9v.png[/img][/p]
protochart 是一個(gè)基于 prototype 和 canvas 標(biāo)簽的開(kāi)源庫(kù)，這個(gè)庫(kù)深受 flot, flotr, plotkit 等啟發(fā)，支持曲線圖，柱狀圖，圓餅圖等，可以在同一個(gè)圖表上顯示多套數(shù)據(jù)，支持可定制的圖例，網(wǎng)格，邊界以及背景圖。支持 ie6/7, firefox 2/3 以及 safari，甚至支持 iphone.
7. ejschart
[p][img]http://bbon.cn/wp-content/uploads/2009/03/154400l7x.png[/img][/p]
ejschart 支持鼠標(biāo)追蹤，鼠標(biāo)事件，按鍵追蹤與事件，縮放，滾動(dòng)，交互等功能，將用戶(hù)體驗(yàn)上升到一個(gè)新高度。支持曲線圖，面積圖，離散圖，圓餅圖，柱狀圖等形式，擁有完備文檔的屬性和方法可以幫助實(shí)現(xiàn)很好的定制。
8. fgcharting
fgcharting 是一個(gè)很出色的 jquery 插件，支持多種圖形。
9. pure css data chart
[p][img]http://bbon.cn/wp-content/uploads/2009/03/154400twr.png[/img][/p]
以往的數(shù)據(jù)展示往往通過(guò) flash 實(shí)現(xiàn)，現(xiàn)在，我們可以通過(guò)純粹的 css 實(shí)現(xiàn)類(lèi)似的功能。cssglobe 有一個(gè)非常實(shí)用的教程幫你實(shí)現(xiàn)基于 css 的繪圖，甚至不需要 javascript。
本文國(guó)際來(lái)源：http://woork.blogspot.com/2009/03/useful-scripts-to-plot-charts-in-web.html[br]中文翻譯來(lái)源：comsharp cms 官方網(wǎng)站
[p] [/p]
[p][url=http://bbon.cn/2009/03/9-%e4%b8%aa%e5%9f%ba%e4%ba%8ejavascript-%e5%92%8c-css-%e7%9a%84-web-%e5%9b%be%e8%a1%a8%e6%a1%86%e6%9e%b6.html]http://bbon.cn/2009/03/9-%e4%b8%aa%e5%9f%ba%e4%ba%8ejavascript-%e5%92%8c-css-%e7%9a%84-web-%e5%9b%be%e8%a1%a8%e6%a1%86%e6%9e%b6.html[/url][/p]