21个Javascript图表插件程序

图表(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/

jQuery

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

Canvas

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 Flash Chart1.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

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

Prototype

10, Visifire

Visifire 是一组开源的Microsoft Silverlight图表制作组件。 Visifire让你利用ASP、ASP.Net、PHP、JSP、ColdFusion、Ruby on Rails或是只有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/

Mootools

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/

jQuery

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/

jQuery

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/

Canvas jQuery

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/

Mootools

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/

Image

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/