[Web Chart系列之二] 各种实现js 图表的library汇总与比较 · Web Chart

### 前言使用js 在浏览器展现图表，参考系列一 [Web端图形绘制SVG,VML, HTML5 Canvas 技术比较](http://blog.csdn.net/oscar999/article/details/8474592) ### 汇总目前实现web 图表的js library 数量是很多，此处汇总： <table border="0" cellpadding="0" cellspacing="0" width="1345"><colgroup><col width="219"/><col width="282"/><col width="186"/><col width="150"/><col width="350"/><col width="158"/></colgroup><tbody><tr height="19"><td>Name </td><td>Brief Introduce</td><td>Browser Support</td><td>Site URL</td><td>Comments</td></tr><tr height="56"><td>$fx() </td><td>1. lightweight 2. compress code 3. js+css</td><td>MIT and GPL license open source</td><td>good</td><td><a href="http://fx.inetcat.com/">http://fx.inetcat.com/ </a></td></tr><tr height="38"><td>amcharts</td><td> Column, Bar, Line, Area, Step, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/Polar, XY/Scatter/Bubble charts </td><td> Not open source</td><td><a href="http://www.amcharts.com/">http://www.amcharts.com/</a></td></tr><tr height="20"><td>arbor</td><td>force directed Graph</td><td>not support good in IE</td><td><a href="http://arborjs.org/">http://arborjs.org/</a></td></tr><tr height="38"><td>Bluff</td><td>1.for ruby 2.Bluff, © 2008–2010 James Coglan</td><td>GPL and MIT licenses.</td><td><a href="http://bluff.jcoglan.com/">http://bluff.jcoglan.com/</a></td></tr><tr height="92"><td>Canvas 3D Graph</td><td>Canvas 3D Graph is a special type of bar graph that plot numbers in 3D </td><td> BSD Licence </td><td><a href="http://dragan.yourtree.org/code/canvas-3d-graph/">http://dragan.yourtree.org/code/canvas-3d-graph/</a></td><td>3D</td></tr><tr height="18"><td colspan="2">Canvas Pie Chart with Tooltips</td></tr><tr height="20"><td>CanvasXpress</td><td colspan="2">based on the <canvas> tag implemented in HTML5</td><td>not support good in IE</td><td><a href="http://canvasxpress.org/">http://canvasxpress.org/</a></td></tr><tr height="20"><td>ccchart</td><td>not support good in IE</td><td><a href="http://jsgt.org/c/">http://jsgt.org/c/</a></td></tr><tr height="36"><td>Cubism</td><td>1. base D3 2. time series chart</td><td colspan="2">not support good in IE</td></tr><tr height="20"><td>Cytoscape</td><td> A lot of plugins are available for various kinds of problem domains, including bioinformatics, social network analysis, and semantic web. </td><td>not free,LGPL.</td><td>good</td><td><a href="http://www.cytoscape.org/">http://www.cytoscape.org/</a></td></tr><tr height="18"><td>Cytoscape Web</td></tr><tr height="20"><td>d3.js</td><td>not support good in IE</td><td><a href="http://mbostock.github.com/d3/">http://mbostock.github.com/d3/</a></td></tr><tr height="20"><td>DojoX.Charting</td><td>mobile</td><td><a href="http://dojotoolkit.org/projects/dojox">http://dojotoolkit.org/projects/dojox</a></td></tr><tr height="20"><td>Dracula </td><td colspan="3">Graph Dracula is a set of tools to display and layout interactive graphs, along with various related algorithms.</td><td><a href="https://github.com/strathausen/dracula">https://github.com/strathausen/dracula</a></td></tr><tr height="20"><td>dygraphs</td><td>produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them</td><td>open source </td><td><a href="http://dygraphs.com/">http://dygraphs.com/</a></td><td>time series</td></tr><tr height="20"><td colspan="2">EJSChart(Emprise JavaScript Charts)</td><td>Not open source</td><td><a href="http://www.ejschart.com/">http://www.ejschart.com/</a></td><td>Not open source</td></tr><tr height="128"><td>elycharts</td><td>Raphaël and jQuery libraries. line charts with spline support area and areaspline charts column/bar charts combined line/area charts sparklines and sparkbars pie charts </td><td colspan="2">Open-source and Free (even for commercial use)</td><td><a href="http://elycharts.com/">http://elycharts.com/</a></td></tr><tr height="18"><td>EXT.JS </td><td>not free</td><td>not free</td></tr><tr height="18"><td>fgCharting</td><td>Update to jQuery Visualize</td></tr><tr height="20"><td>Flot</td><td>good</td><td><a href="http://code.google.com/p/flot/">http://code.google.com/p/flot/</a></td><td>no bubble chart</td></tr><tr height="54"><td>Flotr </td><td>based on the Prototype Javascript Framework</td><td>good</td><td><a href="http://code.google.com/p/flotr/" title="Flotr">http://code.google.com/p/flotr/</a></td><td>support not well</td></tr><tr height="20"><td>flotr2</td><td>Flex + flash</td><td><a href="http://www.humblesoftware.com/flotr2/">http://www.humblesoftware.com/flotr2/</a></td></tr><tr height="20"><td>google chart</td><td>good</td><td><a href="https://developers.google.com/chart/?hl=zh-CN">https://developers.google.com/chart/?hl=zh-CN</a></td><td>bubble chart not well</td></tr><tr height="20"><td>gRaphael </td><td>base raphael</td><td>good</td><td><a href="http://g.raphaeljs.com/">http://g.raphaeljs.com/</a></td></tr><tr height="38"><td>gvChart </td><td>base Google Chart Tools Area、Line、Bar、Column和Pie</td><td><a href="http://www.ivellios.toron.pl/technikalia/2010/06/22/gvchart-plugin-jquery-with-google-charts/">http://www.ivellios.toron.pl/technikalia/2010/06/22/gvchart-plugin-jquery-with-google-charts/</a></td><td>bubble chart not well</td></tr><tr height="20"><td>highchart</td><td>not free</td><td><a href="http://www.highcharts.com/">http://www.highcharts.com/</a></td><td>bubble chart not well</td></tr><tr height="20"><td>ico </td><td>base raphael , line chart</td><td><a href="https://github.com/alexyoung/ico">https://github.com/alexyoung/ico</a></td><td>no bubble chart </td></tr><tr height="20"><td>JavaScript InfoVis Toolkit</td><td>good</td><td><a href="http://thejit.org/">http://thejit.org/</a></td></tr><tr height="20"><td>jqPlot</td><td>line, bar and pie charts </td><td>good</td><td><a href="http://www.jqplot.com/">http://www.jqplot.com/</a></td><td>bubble chart not well</td></tr><tr height="20"><td>jQuery Google Charts</td><td>can't access site</td><td><a href="http://www.maxb.net/scripts/jgcharts/">http://www.maxb.net/scripts/jgcharts/</a></td><td>support not well</td></tr><tr height="20"><td>jQuery Sparklines</td><td colspan="2">This jQuery plugin generates sparklines </td><td><a href="http://omnipotent.net/jquery.sparkline/">http://omnipotent.net/jquery.sparkline/</a></td><td>sparklines </td></tr><tr height="20"><td>jQuery Visualize</td><td colspan="2">HTML5 canvas charts driven by HTML table elements</td><td><a href="https://github.com/filamentgroup/jQuery-Visualize">https://github.com/filamentgroup/jQuery-Visualize</a></td><td>bubble not support</td></tr><tr height="20"><td>jschart</td><td>JS Charts lets you create charts in different templates like bar charts, pie charts or simple line graphs. </td><td>not open source</td><td><a href="http://www.jscharts.com/">http://www.jscharts.com/</a></td></tr><tr height="20"><td>jsplumb</td><td>good</td><td><a href="https://github.com/sporritt/jsPlumb">https://github.com/sporritt/jsPlumb</a></td></tr><tr height="20"><td>JSXGraph</td><td> interactive geometry, function plotting, charting, and data visualization</td><td><a href="http://www.gnu.org/licenses/licenses.html#LGPL">LGPL – Lesser GNU General Public License.</a></td><td>good</td><td><a href="http://jsxgraph.uni-bayreuth.de/wp/">http://jsxgraph.uni-bayreuth.de/wp/</a></td><td> 图展现不好</td></tr><tr height="20"><td>leigeber </td><td>can't access site</td><td><a href="http://www.leigeber.com/">http://www.leigeber.com/ </a></td></tr><tr height="20"><td>milkchart</td><td>generate a graph similar to Microsoft Excel.</td><td>MIT license</td><td><a href="http://mootools.net/forge/p/milkchart">http://mootools.net/forge/p/milkchart</a></td></tr><tr height="20"><td>moochart</td><td colspan="2">moochart is a plugin for MooTools 1.2 that draws bubble diagrams on the canvas tag. Future versions might include pie, bar & line graphs.</td><td>not support good in IE</td><td><a href="http://moochart.coneri.se/">http://moochart.coneri.se/</a></td></tr><tr height="74"><td>mootools</td><td>1. provide a unique and elegant way to visualize data using Javascript and the <canvas> object 2. from 2008, only two version</td><td><a href="http://www.labs.unwieldy.net/moowheel/license.txt">MIT-style license.</a></td><td><a href="http://mootools.net/">http://mootools.net/</a></td></tr><tr height="20"><td>moowheel</td><td colspan="2"> plugin MooTools that generates charts from accessible data tables.</td><td>not good</td><td><a href="http://labs.unwieldy.net/moowheel/">http://labs.unwieldy.net/moowheel/</a></td></tr><tr height="20"><td>Morris.js </td><td>base raphael , line chart, bar</td><td><a href="http://www.oesmith.co.uk/morris.js/">http://www.oesmith.co.uk/morris.js/</a></td></tr><tr height="20"><td>Paper.js </td><td colspan="2">runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves,</td><td>not support good in IE</td><td><a href="http://paperjs.org/">http://paperjs.org/</a></td></tr><tr height="20"><td>PlotKit</td><td colspan="3">PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support.</td><td><a href="http://www.liquidx.net/plotkit/">http://www.liquidx.net/plotkit/</a></td><td>support not well</td></tr><tr height="20"><td>Primer</td><td><a href="http://github.com/mojombo/primer/tree/master">http://github.com/mojombo/primer/tree/master</a></td><td>support not well</td></tr><tr height="20"><td>Processing.js</td><td>not support good in IE</td><td><a href="http://processingjs.org/">http://processingjs.org/</a></td></tr><tr height="20"><td>ProtoChart</td><td>no longer maintained</td><td><a href="http://code.google.com/p/protochart/">http://code.google.com/p/protochart/</a></td></tr><tr height="56"><td>protovis</td><td>1.Protovis is no longer under active development. 2. To D3</td><td><a href="http://mbostock.github.com/protovis/">http://mbostock.github.com/protovis/</a></td></tr><tr height="20"><td>raphael</td><td><a href="http://raphaeljs.com/">http://raphaeljs.com/</a></td></tr><tr height="20"><td>Reflection</td><td colspan="3">ogos, icons and dynamic image content such as forum avatars.</td><td><a href="http://cow.neondragon.net/stuff/reflection/">http://cow.neondragon.net/stuff/reflection/ </a></td></tr><tr height="20"><td>RGraph </td><td>not open source</td><td><a href="http://www.rgraph.net/">http://www.rgraph.net/</a></td><td>not open source</td></tr><tr height="20"><td>RGraph2</td><td colspan="2">RGraph是一个基于Raphaeljs完整的点->线图的web实现。</td><td><a href="https://github.com/hafeyang/rgraph2.git">https://github.com/hafeyang/rgraph2.git</a></td></tr><tr height="20"><td>sigma</td><td>sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:</td><td>MIT License. </td><td><a href="http://sigmajs.org/">http://sigmajs.org/</a></td><td>view</td></tr><tr height="20"><td>Smoothie Charts</td><td>not support good in IE</td><td><a href="http://smoothiecharts.org/">http://smoothiecharts.org/</a></td></tr><tr height="20"><td>Style Chart</td><td>line and bar chart, less support</td><td><a href="http://chart.inetsoft.com/">http://chart.inetsoft.com/</a></td></tr><tr height="20"><td>Timeline</td><td>timeline</td><td><a href="http://timeline.verite.co/">http://timeline.verite.co/</a></td></tr><tr height="20"><td>Timeplot</td><td>Timeplot</td><td><a href="http://www.simile-widgets.org/timeplot/">http://www.simile-widgets.org/timeplot/</a></td></tr><tr height="20"><td>TufteGraph</td><td>not support good in IE</td><td><a href="http://xaviershay.github.com/tufte-graph/">http://xaviershay.github.com/tufte-graph/</a></td><td>not support good in IE</td></tr><tr height="56"><td>Yahoo UI Charts Control</td><td> line, marker, area, spline, column, bar and pie charts. </td><td>good</td><td><a href="http://developer.yahoo.com/yui/">http://developer.yahoo.com/yui/</a></td></tr></tbody></table> ### 写在后面如何选择一个好的有适用自己的library . 针对各自需求的不同，评衡的标准也不同。笔者这里给出一些建议的items: 1.No plugin 2. Browser Support 3. UI 4. Performance 5. Free; Open Source 6. Resource 7. othes special function demand