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

傷城~ 2022-08-18 00:55 1236阅读 0赞

来自：http://www.iteye.com/news/24535

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

本文推荐10款强大的绘制图表图形的JavaScript插件。其中一些插件需要主流浏览器的支持，而另外一些经过整合后，也能在不同的平台和老版本的浏览器上工作。有些工具是独立的框架，大部分支持常规的功能：条形图、线形图、饼形图，有的还可以生成更复杂的图表：关联图、维恩图、热区图、Newick树图、二维散点图、二维气泡图、三维散点图。   
  
[**1. Humble Finance**][1. Humble Finance]    
  
这是一个非常好用的HTML5数据可视化工具，与Flash工具颇为相似。基于JavaScript，利用了Prototype 和 Flotr 库，可用于显示两组实时二维数据。

![d4224798-49bf-32c9-b70b-bec6390dd661.jpg][]

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

![84e17f29-b4c4-3de3-ae3a-850530fdeeeb.jpg][]

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

![eb40e245-3bcb-3302-ad69-b3e14dd9fc42.jpg][]

[**4. jqPlot**][4. jqPlot]    
  
这是一个基于jQuery（最流行的JavaScript库）的绘图制表插件。jqPlot可以生成线形图、条形图、饼形图。

![3e3e2ba9-05b1-378e-b33c-b3af8f8e35c5.jpg][]

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

![442b4195-794e-3a8b-92fb-ee9daef1870d.jpg][]

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

![431ef6a6-08db-38a8-8dee-2438b6d27183.jpg][]

[**7. CanvasXpress**][7. CanvasXpress]    
  
一个基于HTML5标签的库，支持大量极其复杂的图表和图形。

![24a286dc-fa62-303a-9717-d7f355fff739.jpg][]

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

![85dd29dc-7a04-3788-928b-ce1dec5d86a0.jpg][]

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

![55c8d32f-ad41-3625-a966-c58e403fe639.jpg][]

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

![aa90a8e1-7def-3463-b46e-3528e365766a.jpg][]

英文原文： [10 Awesome Javascript Plugins For Plotting Charts and Graphs][]

[1. Humble Finance]: http://www.humblesoftware.com/finance/index
[d4224798-49bf-32c9-b70b-bec6390dd661.jpg]: /images/20220731/3fe936bd960145859c1a6b753a9e62aa.png
[2. D3]: http://mbostock.github.com/d3/
[84e17f29-b4c4-3de3-ae3a-850530fdeeeb.jpg]: /images/20220731/1067589a92bd4368898b6250c7df663c.png
[3. Rickshaw]: http://shutterstock.github.com/rickshaw/
[eb40e245-3bcb-3302-ad69-b3e14dd9fc42.jpg]: /images/20220731/cd3aebf8acbe4bae8c6a6125eb538ef2.png
[4. jqPlot]: http://www.jqplot.com/
[3e3e2ba9-05b1-378e-b33c-b3af8f8e35c5.jpg]: /images/20220731/3b28db374e524f6baf4ed8858ca2d9d6.png
[5. rGraph]: http://www.rgraph.net/
[442b4195-794e-3a8b-92fb-ee9daef1870d.jpg]: /images/20220731/946c27c1afe4489db0358575dd34db25.png
[6. Digraphs]: http://dygraphs.com/
[431ef6a6-08db-38a8-8dee-2438b6d27183.jpg]: /images/20220731/e580e85931064a55a9fbb55a5b88706b.png
[7. CanvasXpress]: http://canvasxpress.org/
[24a286dc-fa62-303a-9717-d7f355fff739.jpg]: /images/20220731/95e2ab356dda489dbb8a9469fe14ec79.png
[8. gRaphael]: http://g.raphaeljs.com/
[85dd29dc-7a04-3788-928b-ce1dec5d86a0.jpg]: /images/20220731/3bcbb2c004ec4aec868ca5cf17983fd2.png
[9. Flotr2]: http://www.humblesoftware.com/flotr2/
[55c8d32f-ad41-3625-a966-c58e403fe639.jpg]: /images/20220731/4a9209676568423a802dd9c9b760ebeb.png
[10. Awesome Chart JS]: http://cyberpython.github.com/AwesomeChartJS/
[aa90a8e1-7def-3463-b46e-3528e365766a.jpg]: /images/20220731/57648596c517448d9af89c116d5ba73f.png
[10 Awesome Javascript Plugins For Plotting Charts and Graphs]: http://smashinghub.com/awesome-javascript-plugins.htm