13个JavaScript图表图形绘制插件
fmms 12年前
<div id="news_body"> <p> 现在网络上又有越来越多的免费的 JavaScript 图表图形绘制插件。我之前给一家网站做过复杂的图形，我们用的是 highchart。在那段时间，没有很多可供选择的插件。但现在不同了，很容易就可以找到很多功能非常不错的图表库。个人而言，此类插件的上升，是因 为：</p> <p> 1. Flash 过去是最佳解决方案，但很多人多在从那迁移；</p> <p> 2. <a href="/misc/goto?guid=4958330453578757110" target="_blank">现代浏览器</a>及其更强大的计算能力，使其在转化绘制实时数据方面的能力更佳；</p> <p> 3. 绘制矢量图的不同技术愈发成熟：VML、SVG 和 Canvas。</p> <p> 当然了，你需要仔细选择，以符合自身需求。正如前面提到的，正因使用了各种技术，因此一些支持 Canvas 的插件仅需要一个现代浏览器。</p> <p> 在这篇文章中，我们已收集 13 个 JavaScript 图表和图形绘制插件。少数是独立的框架，大多数支持条图、线图、饼图等基本图形，很多甚至支持更加复杂的图形，比如：维恩图、热图、进化树、二维散点图、 二维散点气泡图、三维散点图等。相信你应当能在这个列表中找到所需的。</p> <p> <strong>1. <a href="/misc/goto?guid=4958330454385699767" rel="nofollow" target="_blank">Flotr2</a></strong></p> <p style="text-align:center;"><img title="Flotr2" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/872c350cd2d66fc47a6b751b049fbbea.jpg" width="500" height="250" /></p> <p> Flotr2 是个独立框架库，支持 HTML5 图表和图形。它是 flotr 的一个分支版本，移除了 Prototype 依赖性，并且有很多改进。支持：线图、条图、蜡状图、饼图、气泡图。诸如 IE6 类的老浏览器也支持。</p> <p> <strong>2. <a href="/misc/goto?guid=4958330455178823730" rel="nofollow" target="_blank">Rickshaw</a></strong></p> <p style="text-align:center;"><img title="Rickshaw" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/34a1e2f4ebfe55bd2b4c329fe062d2ee.jpg" width="500" height="250" /></p> <p> Rickshaw 是个用于创建交互式时序图的 JS 工具。它依赖 D3 可视化库和其他一些 jQuery 和 jQuery UI 的插件。</p> <p> <strong>3. <a href="/misc/goto?guid=4958330455963716813" rel="nofollow" target="_blank">D3</a></strong></p> <p style="text-align:center;"><img title="D3" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/a67fe20734490db7aca6e218a3da29b1.jpg" width="500" height="250" /></p> <p> D3 是一款著名且高效的可视化库。</p> <p> <strong>4. <a href="/misc/goto?guid=4958330456751111881" rel="nofollow" target="_blank">Awesome Chart JS</a></strong></p> <p style="text-align:center;"><img title="Awesome Chart JS" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/6ca8657efb077afb0cb7d92d67c4f907.jpg" width="500" height="250" /></p> <p> AwesomeChartJS 是个简洁的 JS 库，用于基于 HTML5 画布元素的图表。</p> <p> 5. <a href="/misc/goto?guid=4958330457538442733" rel="nofollow" target="_blank">canvasXpress</a></p> <p style="text-align:center;"><img title="canvasXpress" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/ad8acfd3e6f3d3418e7b667cbeb0b8ba.jpg" width="500" height="250" /></p> <p> CanvasXpress is a javascript library based on the tag implemented in HTML5. I developed this library as the core visualization component for our BMS systems biology platform. It supports crazy amount of highly complicated charts and graphs.</p> <p> <strong>6. <a href="/misc/goto?guid=4958330458319912366" rel="nofollow" target="_blank">Humble Finance</a></strong></p> <p style="text-align:center;"><img title="Humble Finance" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/5ccd805f282d5b174fd79c30d2237e11.jpg" width="500" height="250" /></p> <p> HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on http://finance.google.com/. The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. It can be used to display any two 2-D data sets of real numerical data which share an axis.</p> <p> <strong>7. <a href="/misc/goto?guid=4958330459111945894" rel="nofollow" target="_blank">RGraph</a></strong></p> <p style="text-align:center;"><img title="RGraph" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/b47cd7d40f58ab0fc6155481bf3f918f.jpg" width="500" height="250" /></p> <p> RGraph is a HTML5 Javascript charts library that supports over 20 different types of charts. Using the new HTML5 canvas tag, RGraph creates these Javascript charts in the web browser, meaning quicker pages and less web server load. Using RGraph is an easy way of speeding up your website.</p> <p> <strong>8. <a href="/misc/goto?guid=4958330459895862558" rel="nofollow" target="_blank">dygraphs</a></strong></p> <p style="text-align:center;"><img title="dygraphs" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/7a994fc74a8ad6fbe744b9ea00eadffe.jpg" width="500" height="250" /></p> <p> dygraphs is an open source JavaScript library that produces produces interactive, zoomable charts of time series. It is designed to display dense data sets and enable users to explore and interpret them. This is a lightweight solution and works in Internet explorer too.</p> <p> <strong>9. <a href="/misc/goto?guid=4958183403619584665" rel="nofollow" target="_blank">HighChart</a></strong></p> <p style="text-align:center;"><img title="HighChart" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/7c3e474b2919e5d83feaa0620a15b1db.jpg" width="500" height="250" /></p> <p> Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. A famous chart/graph solution used by many well-known organization such as IBM, NASA, Siemens, HP etc.</p> <p> <strong>10. <a href="/misc/goto?guid=4958330461416779588" rel="nofollow" target="_blank">gRaphael</a></strong></p> <p style="text-align:center;"><img title="gRaphael" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/4cc6a19e5ce17c6f07810dc8165333e2.jpg" width="500" height="250" /></p> <p> gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action. gRaphaël currently supports Firefox 3.0+， Safari 3.0+， Opera 9.5+ and Internet Explorer 6.0+.</p> <p> <strong>11. <a href="/misc/goto?guid=4958184957011927528" rel="nofollow" target="_blank">jqPlot</a></strong></p> <p style="text-align:center;"><img title="jqPlot" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/38ce320953b7130bef25d68be8b8b101.jpg" width="500" height="250" /></p> <p> jqPlot is a plotting and charting plugin for the jQuery Javascript framework. jqPlot produces beautiful line, bar and pie charts with many features.</p> <p> <strong>12. <a href="/misc/goto?guid=4958329815815713923" rel="nofollow" target="_blank">JS Charts</a></strong></p> <p style="text-align:center;"><img title="JS Charts" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/53cdccc3f7c6770a6929976e010bf5a0.jpg" width="500" height="250" /></p> <p> JS Charts is a JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. Just include our scripts, prepare chart data in XML, JSON or JavaScript Array and your chart is ready!</p> <p> <strong>13. <a href="/misc/goto?guid=4958330463669138107" rel="nofollow" target="_blank">JSXGraph</a></strong></p> <p style="text-align:center;"><img title="JSXGraph" alt="13个JavaScript图表图形绘制插件" src="https://simg.open-open.com/show/a4261c02992ece293280a3907d99fa63.jpg" width="500" height="250" /></p> <p> JSXGraph is a cross-browser library for interactive geometry， function plotting, charting, and data visualization in a web browser. It is implemented completely in JavaScript, does not rely on any other library， and uses SVG, VML, or canvas. JSXGraph is easy to embed and has a small footprint: less than 100 KByte if embedded in a web page. No plug-ins are required! Special care has been taken to optimize the performance.</p> <p> 原文：<a href="/misc/goto?guid=4958330464464777789" rel="nofollow" target="_blank">Kevin Liew</a> 编译：<a title="伯乐" href="/misc/goto?guid=4958185140659301754">伯乐</a>在线 – <a href="/misc/goto?guid=4958330465978524640" target="_blank">黄利民</a></p> </div>