9 個基於JavaScript 和 CSS 的 Web 圖表架構

標籤：

COMSHARP CMS 寫道：jQuery, MooTools, Prototype 等優秀的 JavaScript 架構擁有各種強大的功能，包括繪製 Web圖表，使用這些架構以及相應外掛程式，我們可以非常輕鬆地實現曲線圖，圓餅圖，柱狀圖等 Web 圖表的繪製，而不必象以往那樣通過複雜的 Flash技術實現。本文介紹了9個優秀的基於 JavaScript 與 CSS  的 Web 圖表架構。

1. Flot

Flot是一個純粹的 jQuery JavaScript繪圖庫，可以在用戶端即時產生圖形，使用非常簡單，支援放大縮小以及滑鼠追蹤等互動功能。該外掛程式支援 IE6/7/8, Firefox 2.x+, Safari 3.0+, Opera 9.5+ 以及 Konqueror 4.x+。使用的是 Safari 最先引入的 Canvas對象，目前所有主流瀏覽器都支援該對象，除了 IE, 因此在 IE中使用 JavaScript 進行類比。這裡有一些執行個體。

2. JS Charts

JS Charts 是一個免費的基於 JavaScript 的圖表產生器，表格繪製非常簡單，幾乎不需要編碼，也不需要外掛程式和伺服器模組，使用XML 或 JavaScript 數組快取資料。

3. TableToChart

TableToChart 是一個 MooTools 指令碼，可以將 HTML Table 對象中儲存的資料繪製成圖表。你可以使用 table 標籤組建圖表，柱狀圖，曲線圖，圓餅圖等。

4. PlotKit

PlotKit 是一個 JavaScript 繪圖庫，支援 HTML Canvas 標籤，也支援 SVG。

5. Yahoo UI Charts Control

YUI Charts Control 可以在網頁上將表格式資料轉換為圖表，支援柱狀圖，曲線圖以及圓餅圖。支援 DataSource 工具，可設定的軸，滑鼠盤旋提示，圖表組合，以及皮膚等功能。

6. ProtoChart

ProtoChart是一個基於 Prototype 和 Canvas 標籤的開源庫，這個庫深受 Flot, Flotr, Plotkit等啟發，支援曲線圖，柱狀圖，圓餅圖等，可以在同一個圖表上顯示多套資料，支援可定製的圖例，網格，邊界以及背景圖。支援 IE6/7, Firefox 2/3 以及 Safari，甚至支援 iPhone.

7. EJSChart

EJSChart 支援滑鼠追蹤，滑鼠事件，按鍵追蹤與事件，縮放，滾動，互動等功能，將使用者體驗上升到一個新高度。支援曲線圖，面積圖，離散圖，圓餅圖，柱狀圖等形式，擁有完備文檔的屬性和方法可以協助實現很好的定製。

8. fgCharting

fgCharting 是一個很出色的 jQuery 外掛程式，支援多種圖形。

9. Pure Css Data Chart

以往的資料展示往往通過 flash 實現，現在，我們可以通過純粹的 CSS 實作類別似的功能。CSSGlobe 有一個非常實用的教程幫你實現基於 CSS 的繪圖，甚至不需要 JavaScript。

9 個基於JavaScript 和 CSS 的 Web 圖表架構