10 款强大的JavaScript图表图形插件推荐

网上有很多用于绘制图表图形的免费JavaScript插件和图表库,这类插件大量出现的原因,一是人们不再依赖于Flash,二是浏览器和精密的计算使呈现实时数据变得容易,而且各种向量绘图技术像VML、SVG和Canvas的发展也使之成为可能。

本文推荐10款强大的绘制图表图形的JavaScript插件。其中一些插件需要主流浏览器的支持,而另外一些经过整合后,也能在不同的平台和老版本的浏览器上工作。有些工具是独立的框架,大部分支持常规的功能:条形图、线形图、饼形图,有的还可以生成更复杂的图表:关联图、维恩图、热区图、Newick树图、二维散点图、二维气泡图、三维散点图。

1. Humble Finance

这是一个非常好用的HTML5数据可视化工具,与Flash工具颇为相似。基于JavaScript,利用了Prototype 和 Flotr 库,可用于显示两组实时二维数据。

 

 

 

 

 

2. D3

D3是最流行的可视化库之一,它可以将任意数据绑定到DOM(Document Object Model,文档对象模型),然后对该文件提供数据驱动转换。还可以将一组数据生成基本的HTML表,或生成一个SVG条形图。

 

 

 

 

 

3. Rickshaw

Rickshaw可以创建交互时间序列图。它依赖于D3的可视化库,需要一些扩展比如jQuery和jQuery UI来辅助实现。

 

 

 

 

4. jqPlot

这是一个基于jQuery(最流行的JavaScript库)的绘图制表插件。jqPlot可以生成线形图、条形图、饼形图。

5. rGraph

这是HTML5的JS图表库,拥有20多个类型的图表。利用最新的HTML5 canvas标签,这个工具可在网页浏览器中生成JavaScript的图表,这意味着更快的网页加载和更少的Web服务器负载。

6. Digraphs

开源JS库,能生成交互、可缩放的时间序列图表。可显示密集的数据组,用户还可对这些数据进行分析和说明。

7. CanvasXpress

一个基于HTML5标签的库,支持大量极其复杂的图表和图形。

8. gRaphael

这个工具可在网站上创建美观的图表,它基于Raphael图形库,可以查看静态图表和互动图表的演示。

9. Flotr2

一个独立框架库,可以绘制HTML5的图表图形,实际上是flotr的一个分支,功能更完善。可生成线形图、条形图、烛形图、饼形图和气泡图,还支持旧的浏览器(如IE 6)和移动平台。

10. Awesome Chart JS

顾名思义,这是一个很棒的JavaScript库,它可用于创建基于HTML 5 canvas元素的图表。这个库很简单,只需要几行代码就能快速生成简单的图表。

英文原文:10 Awesome Javascript Plugins For Plotting Charts and Graphs

10 Awesome Javascript Plugins For Plotting Charts and Graphs

A plethora of amazing free Javascript plugins for plotting charts and graphs are now present online. Many good charting libraries are available. The rapid increase in the availability of this kind of plugins is because of the fact that people are no longer dependant on Flash. Modern browsers and sophisticated computing has made it easy to render live data. Advancement in various vector drawing technologies like VML, SVG and Canvas has also made it possible.

So today we have a list of 10 Awesome Javascript Plugins For Plotting Charts and Graphs. Some of these plugins use various technologies, thus supporting canvas only requiring modern browsers; while others integrate different technologies together to allow it to work on different platforms and older browsers. Some of these tools are framework independent and most of them support the usuals: bars, lines, pies; while some supports more complicated ones like correlation plots, Venn diagrams, heatmaps, newick trees, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots. So check out the list and pick the ones that suit your needs the best!

If you like this article, You May like Our Other Articles on Top 50 JavaScript,  JavaScript Tools For Developers and JavaScript Sliders.

Humble Finance

Humble-Finance

This one is a really nice HTML5 data visualization tool. It is quite similar to the Flash tool available on http://finance.google.com/. Humble Finance itself is written completely in JavaScript, utilizing the Prototype and Flotr libraries. You can use it for displaying any two 2-D data sets of real numerical data that share the axis.

D3

D3

Advertisement

D3 is one of the most popular visualization library. It is utilized by a few chart plugin in this post. It allows binding arbitrary data to a DOM (Document Object Model ), and then applying data-driven transformations to the document. You can use it for creating a basic HTML table from an array of numbers; or utilize the same data for creating an amazing SVG bar chart with fluid transitions and interaction.

Rickshaw

Rickshaw

Rickshaw is an amazing tool that lets you create interactive time series graphs. It D3 visualization library dependant and requires some extensions like jQuery and jQuery UI.

jqPlot

jqPlot

This is a great plugin for plotting and charting for jQuery Javascript framework. jqPlot creates amazing line, bar and pie charts with various features.

RGraph

RGraph

It is a HTML5 JS charts library that boasts support for more than 20 types of charts. Utilizing the latest HTML5 canvas tag, this tool generates Javascript charts in the web browser, which means that pages would be quicker and web server load would be less. This tool is a great way of speeding up your website.

dygraphs

dygraphs

This one is a really amazing open source JS library that creates interactive, zoomable charts of time series. It allows displaying dense data sets and lets users explore and interpret them. It is a minimal tool that even works in IE too.

canvasXpress

canvasXpress

This one is a library based on the tag applied in HTML5. It supports a huge amount of extremely complicated charts and graphs.

gRaphael

gRaphael

This tool allows creating beautiful charts on your website. gRaphael is based on Raphael graphics library. You can also viewe the demos to see static and interactive charts. It presently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and IE 6.0+.

Flotr2

Flotr2

It is a great framework independent library which allows drawing HTML5 charts and graphs. It is actually a branch of flotr that gets rid of the Prototype dependence and boasts various meliorations. You can create lines, bars, candles, pies and bubbles charts. It even supports older browsers like Internet Explorer 6 and mobile platform too.

Awesome Chart JS

Awesome-Chart-JS

Well, as the name suggests, it is an ‘awesome’ Javascript library which can be used for creating charts based on the HTML 5 canvas element. It is a simple library which allows users to generate simple charts easily and quickly with a few lines of coding.