21個Javascript圖表插件程式

21個Javascript圖表插件程式

原文位址：http://hi.baidu.com/danghj/blog/item/37aeb1776054ee17b051b912.html

圖表(Chart)能直覺的展示資料，但靜 态圖檔圖表缺乏互動性，更新維護起來比較麻煩。看看有哪些比較好的JavaScript圖表腳本吧。21 個Javascript圖表插件程式。

1, Flot Flot一個純 javascript繪 畫庫，基于 jQuery開 發。它能夠在用戶端根據任何資料集快速生成圖檔。目前隻能繪制線狀圖和柱狀。

首頁: http://code.google.com/p/flot/

下載下傳: http://flot.googlecode.com/files/flot-0.5.zip

示例: http://people.iola.dk/olau/flot/examples/

 2, jQchart 基于Canvas+ jQuery，可 拖放/互動的簡單圖形控件。

首頁: http://plugins.jquery.com/project/jQchart

下載下傳: http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html

示例: http://plugins.jquery.com/files/jquery.jqchart-0.03-beta-1.1.js.txt

3, Open Flash Chart

Open Flash Chart是一個開源的Flash制圖元件。

首頁: http://teethgrinder.co.uk/open-flash-chart/

下載下傳: http://teethgrinder.co.uk/open-flash-chart/download.php

示例: http://teethgrinder.co.uk/open-flash-chart/

4, Plotkit

PlotKit是一個純 javascript繪 圖工具包。它支援HTML Canvas和Adobe SVG。

首頁: http://www.liquidx.net/plotkit/

下載下傳: http://media.liquidx.net/static/plotkit/plotkit-0.9.1.zip

示例: http://media.liquidx.net/js/plotkit-tests/dynamic.html

5, XML SWF Charts

XML SWF Charts是一個簡單，但強大，利用Flash和動态生成XML資料來産生web chart的工具。目前支援的Charts類型包括：

• Line
• Column
• Stacked column
• Floating column
• 3D column
• Stacked 3D column
• Parallel 3D column
• Pie
• 3D Pie
• Bar
• Stacked bar
• Floating bar
• Area
• Stacked area
• Candlestick
• Scatter
• Polar
• Mixed
• Composite

• Joined

  首頁: http://www.maani.us/xml_charts/

  下載下傳: http://www.maani.us/xml_charts/index.php?menu=Download

  示例: http://www.maani.us/xml_charts/index.php?menu=Gallery

 6, jquery.sparkline

這是一個用于生成迷你型線狀圖的 jQuery插 件。

首頁: http://omnipotent.net/jquery.sparkline/

下載下傳: http://omnipotent.net/jquery.sparkline/

示例: http://omnipotent.net/jquery.sparkline/

 7, Flotr

Flotr是一個基于Prototype開發的 javascript繪圖工具。支援圖例，滑鼠跟蹤，圖檔區域選擇，圖檔縮放，添加事件鈎子（event hook），通過CSS設定樣式等。

首頁: http://solutoire.com/flotr/

下載下傳: http://code.google.com/p/flotr/

示例: http://code.google.com/p/flotr/

Prototype

8, Open Flash Chart2

Open Flash Chart2是依據Open FlashChart1.x完全重新建構的一個Flash圖表繪制元件。與1.x版本最大不同之處在于把資料格式改成JSON，以實作一些更酷的功能。該版本全部采用Actionscript3開發,Adobe Flex編譯。

首頁: http://teethgrinder.co.uk/open-flash-chart-2/

下載下傳: http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

示例: http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php

 9, ProtoChart

ProtoChart是一個采用Prototype和Canvas開發的圖表制作開源 javascript工 具包。目前支援的圖表類型包括：

• Line、bar、pie、curve、mix和area charts
• 在同一張圖中支援多個資料資料序列
• 支援Legend标簽
• 能夠自定義網格，網格邊線，背景

• 自定義座标軸标題（包括x軸與y軸）

  首頁: http://blog.deensoft.com/2008/07/28/protochart-prototype-canvas-pretty-charts/

  下載下傳: http://blog.deensoft.com/2008/07/28/protochart-prototype-canvas-pretty-charts/

  示例: http://www.deensoft.com/lab/protochart

  10, Visifire

Visifire 是一組開源的Microsoft Silverlight圖表制作元件。Visifire讓你利用ASP、ASP.Net、PHP、JSP、ColdFusion、Ruby onRails或是隻有HTML都能快速制作出“驚人”的圖表（Charts）。不需要懂得任何Silverlight知識，隻要具備基礎的HTML知識，就能夠使用該強大的Silverlight圖表制作元件。

首頁: http://www.visifire.com/

下載下傳: http://www.visifire.com/download_silverlight_charts.php

示例: http://www.visifire.com/

11, CSS for Bar Graphs

用XHTML+CSS實作各種柱狀圖（Bar Graph） 的示例。

首頁: http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

下載下傳: http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

示例: http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

12, FusionCharts Free

FusionCharts Free是一個制圖元件用于建立好看，資料驅動，擁有動畫效果的Flash charts。它能夠與PHP、Python、Ruby on Rails、ASP、ASP.NET、JSP、ColdFusion、HTML頁面等一起使用。這個元件是FusionCharts的免費版，但功能仍然 很強大。它能夠生成的圖表類型包括：

• 2D/3D column & bar charts
• 2D/3D pie & doughnut charts
• Line charts
• Area charts
• Stacked charts

• Gantt charts

  首頁: http://www.fusioncharts.com/free/

  下載下傳: http://www.fusioncharts.com/free/Download.asp

  示例: http://www.atblabs.com/jquery.corners.html

  13, JS Charts

JS Charts是一個JavaScript制 圖元件。支援的圖表類型包括：柱狀圖，圓餅圖，曲線圖等。JS Charts支援的資料源可以是XML或JavaScript數 組。

首頁: http://www.jscharts.com/

下載下傳: http://www.jscharts.com/free-download

示例: http://www.jscharts.com/examples

14, MooCSSCharts

基于Mootools+CSS實作，擁有動畫效果的柱狀圖（BarCharts）。

首頁: http://www.artness.de/moo/

下載下傳: http://www.artness.de/moo/Web/JS/mootools/artness.moochart.js

示例: http://www.artness.de/moo/

15, jQuery Google Charts

jQuery Google Charts是一個封裝Google API charts的 jQuery插件，提供了更加簡易的使用方法。

首頁: http://www.maxb.net/scripts/jgcharts/include/demo/

下載下傳: http://plugins.jquery.com/files/jgcharts-0.96.zip

示例: http://www.maxb.net/scripts/jgcharts/include/demo/

 16, Axiis

Axiis是一個基于Degrafa，Flex&ActionScript3.0開發的開源資料圖表元件。

首頁: http://www.axiis.org/index.html

下載下傳: http://code.google.com/p/axiis/downloads/list

示例: http://www.axiis.org/examples.html

17, jqPlot

jqPlot是一個 jQuery繪圖 插件，可以利用它制作漂亮的線狀圖和柱狀圖。jqPlot支援為圖表設定各種不同的樣式。提供Tooltips，資料點高亮顯示等功能。

首頁: http://www.jqplot.com/

下載下傳: http://www.bitbucket.org/cleonello/jqplot/downloads/

示例: http://www.jqplot.com/tests/

18, jQuery Visualize Plugin

Visualize是一個利用HTML5 Canvas将Tables标簽轉換成圖表的 jQuery插 件。支援的圖表類型包括：線狀圖，柱狀圖，餅狀圖。可以設定圖表标題，高度/寬度，顔色等。

首頁: http://www.filamentgroup.com/lab/jquery_visualize_plugin_accessible_charts_graphs_from_tables_html5_canvas

下載下傳: http://www.filamentgroup.com/examples/charting_v2/visualize.filamentgroup.zip

示例: http://www.filamentgroup.com/examples/charting_v2/

 19, MilkChart MilkChart是一個易于使用、強大，基于MooTools開發的制圖工具。它使用HTML5<canvas>标簽。支援的圖 表類型包括：

• Column
• Bar
• Line
• Scatter

• Pie

  首頁: http://code.google.com/p/milkchart/

  下載下傳: http://code.google.com/p/milkchart/downloads/list

  示例: http://code.google.com/p/milkchart/

  20, Raphaël

Raphaël 是一個能夠在網頁上建立和操作矢量圖形的 JavaScript Library。它使用SVG&VML來建立圖形。因為每個生成的圖形都是一個DOM對象，是以可以通過 JavaScript操 作這些圖形。支援 大部分浏覽器包括：Firefox3.0+、Safari3.0+、Opera9.5+和Internet Explorer6.0+。

首頁: http://raphaeljs.com/

下載下傳: http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true

示例: http://raphaeljs.com/

 21, gRaphaël

gRaphaël 是一個基于Raphaël實作的開源JavaScript圖表制作Library。它既可以生成靜态圖表，也可以生成具有互動功能的圖表。圖表類型包括：餅圖，柱狀圖，線狀圖和點狀圖。圖表采用VML建立支援大部分浏覽器如：Firefox3.0+、Safari3.0+、Opera9.5+和Internet Explorer6.0。

首頁: http://g.raphaeljs.com/

下載下傳: http://github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true

示例: http://g.raphaeljs.com/