`

转自CSDN-13款JavaScript图形和图表绘制工具

阅读更多

如今,在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多。作者此前在一家网站从事复杂的图形学方面的工作,使用 highchart,在那期间,没有大量的插件工具可供选择,不像现在,我们可以轻易地找到非常有用的图表库。作者认为,此种插件的兴起源于:

  1. Flash 是最佳的解决方案,大部分人从这方面迁移的;
  2. 现在的浏览器和强大的计算机使其在实时数据方面的能力更加的容易;
  3. 绘制矢量图的工具(技术取向)不同:VML、SVG、Canvas。

当然,你也可以根据自身需求进行选择,正如之前提到的,使用各种技术导致一些插件只能在现代的浏览器的下支持canvas,其他一些技术结合在一起可运行在不同的平台上或旧版本的浏览器上。

在这篇文章中,我们搜集了13个JavaScript插件可用于绘制图形和图表。还有一部分是独立的框架支持bars, lines, pies甚至还有一些更加复杂的图形,比如,plots, Venn diagrams, heatmaps, newick trees, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots。

1. Flotr2

Flotr2是一个独立框架,支持HTML5绘制图表和图形。它是flotr 的分支,可移除 Prototype的依赖,包含许多改进,支持lines, bars, candles, pies and bubbles charts。支持旧版本的浏览器如IE6和移动平台。

2. Rickshaw

Rickshaw是一种用于创建交互式时间列图的JavaScript工具箱。它依赖于D3可视化库、Query扩展和jQuery UI。

3. D3

一款出色且高效的可视化库,可用于图表的插件。使用D3你可以捆绑任意一个数据到DOM(Document Object Model),然后采用数据驱动转化成文件。 作为一个示例,你可以用D3从数组中生成一个基本的 HTML表格。或者你也可以利用相同的数据来创建一个互动的SVG柱状图。

4. AwesomeChartJS

AwesomeChartJS作为一个简单的Javascript库,它可以被用来创建基于HTML 5 canvas元素的图表。目的是让用户只需用几行代码就可创建一个简单的图表。

5. CanvasXpress

CanvasXpress是一个Javascript库利用tag在HTML5中执行任务,该库开发的目的是为 BMS系统生物学平台创建可视化的核心组件。它适用于高度复杂的图表和图形。

6. HumbleFinance

HumbleFinance是HTML5数据可视化编译工具。作为交互式图形的范本,与Flash工具 类似,工具本身是用JavaScript编译的,使用Prototype和Flotr 库,它可以用于显示实际数值共享一个轴的任意两个2D数据集。

7. Graph

Graph是HTML5 Javascript图表库支持超过20种不同类型的图表。使用HTML5 canvas标签,RGrap可以在Web浏览器中创建Javascript图表。也是就说页面响应时间更快,Web服务器加载时间更少。

8. dygraphs

dygraphs是一个开源的 JavaScript库,可生成时间系列的交互式zoomable图表。它的设计是被用来显示密集型的数据集,能够让用户探索和解释这些数据。这是一款轻量级的解决方案,运行在IE中。

9. Highchart

Highchart是用纯JS编写的图表库,给你的网站或者Web应用呈现最直观、交互式的图表。 Highcharts 目前支持 line, spline, area, areaspline, column, bar, pie and scatter等图表类型。这个著名的图表解决方案曾被许多知名的企业使用,比如 IBM, NASA, Siemens, HP等。

10. gRaphael

gRaphael的目标是为您的网站创建绝妙的图表,基于Raphaël 图形库。通过示例能看到静态和动态的图表场景。gRaphaël目前支持Firefox 3.0+,Safari 3.0+, Opera 9.5+、IE 6.0+以上版本。

11. jqPlot

jqPlot是jQuery Javascript 框架的绘图和图表插件。 jqPlot能绘制出美妙的line,bar和pie图形,具有许多独特的性能。

12. JS Charts

JS Charts是JavaScript只需很少或者无需代码即可实现的图形生成器。利用JS来绘制图表既简单又容易,因为你只需要客户端脚本即可实现(通过 Web浏览器实现)。无需额外的插件或者服务器模块。只需要准备脚本、XML图表数据,JSON或JavaScript Array和绘图工具即可。

13. JSXGraph

JSXGraph是一款跨浏览器的交互式几何图、函数绘图、图表的数据可视化工具。它完全在JavaScript实现,不依赖于任何库,并且使用SVG,VML和canvas。JSXGraph容易嵌入网页中,体积小,小于100K字节。无插件,采取特别措施优化性能。

 

文章链接转自:http://sd.csdn.net/a/20120224/312361.html

原文出自:queness.com

分享到:
评论
2 楼 水果硬糖 2012-11-09  
hexawing 写道
D3那个好炫

是吧 我也觉得
1 楼 hexawing 2012-11-09  
D3那个好炫

相关推荐

    行情k线绘制工具

    Canvas API是HTML5中的一个核心特性,它提供了一个基于矢量图形的画布,允许开发者通过JavaScript动态地绘制和修改图像。Canvas API的核心是一块像素级的矩形区域,通过JavaScript的方法调用来进行绘图操作,如绘制...

    Qt4.8.4和Echarts5.3.3绘制图表例子

    Qt4.8.4和Echarts5.3.3绘制图表例子。 ECharts,商业级数据图表,它是一个纯JavaScript的图标库,常用的图表形式,如折线图、柱状图,饼状图、雷达图等,都可绘制,而且效果好看。这是做Web前端的,经常会用到的工具...

    web网页 统计图

    - 饼图:JavaScript计算各扇区的起始角度和弧度,然后用CSS绘制圆和扇形。 5. 动画与交互: - 动画效果:利用CSS3的transition和animation属性,可以为统计图添加平滑过渡效果,如数据加载时的动画。 - 交互功能...

    JavaScript特效

    JavaScript特效在Web开发中扮演着至关重要的角色,它赋予了网页动态性和交互性。通过JavaScript,开发者能够创建各种吸引人的视觉效果,提升用户体验。本文将深入探讨JavaScript特效的基础知识、常用库与框架、以及...

    30个数据可视化超级工具

    1. **Tableau**:Tableau 是一款广泛使用的商业智能工具,它提供了丰富的图表类型和交互式仪表板,支持多种数据源连接,让用户能够快速创建和分享视觉分析。 2. **Power BI**:Microsoft 的 Power BI 是一款集成...

    javascript实现的柱状统计图表

    最后,作者强调了在进行JavaScript图表绘制时,扎实的DOM操作基础至关重要。在开始编写代码之前,先在纸上绘制草图可以帮助理清思路。此外,代码打包下载提供了完整的实现供读者参考和学习。 总的来说,这个...

    【可视化】python绘制马尔可夫链,绘制关系图,但是有问题(csdn)————程序.pdf

    `pyecharts`是一个用于生成交互式图表的Python库,它基于JavaScript库ECharts。在代码中,我们看到了以下关键元素: 1. **数据准备**: - `P` 是一个二维数组,表示马尔可夫链的状态转移概率矩阵。每个元素 `P[i]...

    javascript特效例子50例

    10. **图表绘制**:使用库如Chart.js或D3.js,可以利用JavaScript生成各种数据图表。 11. **地图应用**:如Google Maps API,可以学习如何集成地图到网页中并实现交互功能。 12. **WebSocket**:实时通信协议,可...

    D3.JS 基于javascript的图表展示库<五>-基本柱状图1

    它的全称是Data-Driven Documents,它允许开发者使用HTML、SVG和CSS来创建动态且交互式的图表和图形。在本系列的第五部分,我们将深入探讨如何使用D3.js创建一个基本的柱状图。这个教程将帮助你理解D3.js的基本用法...

    javascript api

    这些API可能包含功能各异的函数,例如一个用于图表绘制,另一个可能涉及数据处理或网络请求。没有具体文件名,我们无法详细讨论这两个API,但通常这样的API会提供丰富的文档和示例代码,帮助开发者快速上手。 使用...

    HTML5统计图表数据初始动画html5-stats-animation.rar

    首先,Canvas API提供了一系列的绘图方法,如`fillRect()`、`strokeRect()`、`beginPath()`、`moveTo()`、`lineTo()`等,这些方法可以帮助我们在画布上绘制矩形、线条和其他形状,从而构建出统计图表的基础结构。...

    HTML5 and JavaScript Projects

    4. **Canvas绘图**:利用JavaScript操作Canvas元素,实现动态图形、图表绘制和动画效果。 5. **地理定位**:使用Geolocation API获取用户的地理位置信息,实现基于位置的服务。 6. **Web Storage**:通过...

    echarts绘制全国地图完整代码

    ECharts 是一个基于 JavaScript 的数据可视化库,由百度开发,广泛应用于前端开发中,用于创建交互式的图表和图形。在“echarts绘制全国地图完整代码”这个主题中,我们将深入探讨如何使用 ECharts 来绘制中国全图,...

    基于js脚本的图表绘制

    介绍了如何使用该jsGraphics.js库绘制图表(条形图,k曲线图,扇形图,饼形图,填充图),您可以用AJAX在后台获取数据,生成不断更新流畅的动态图表。你可以自由的复制传播修改该库,但不能用于任何商业目的。使用时...

    jquery统计图表jscharts

    总结,jsCharts是jQuery环境下构建统计图表的优秀工具,其简洁的API和强大的自定义能力使得开发者能够快速构建出美观且交互性强的图表。无论是在Web应用、数据分析展示还是教学演示中,jsCharts都能发挥重要作用,...

    基于Python的Canvas画布元素定位在HolliView项目自动化测试中的应用.rar

    HolliView项目可能涉及复杂的可视化界面,其中Canvas元素被用来展示图表、地图或其他动态图形。在自动化测试中,我们需要验证这些图形是否正确生成,颜色、形状、位置等是否符合预期。 1. 图形比对:可以将Canvas的...

    CSDN编辑器使用方法.docx

    【CSDN编辑器使用方法】CSDN编辑器是一款专为编程人员和IT爱好者设计的富文本编辑工具,提供了丰富的格式化选项和快捷键,帮助用户高效地编写技术文章和博客。以下是对编辑器主要功能的详细说明: 1. **创建标题与...

    自制:ASP.NET利用VML绘制统计图

    因此,现代项目可能需要考虑使用SVG或者JavaScript库如D3.js、Highcharts等来实现更广泛的兼容性和更多的图表功能。 总结,利用VML在ASP.NET中创建3D统计图是一种有效且直观的方法,尤其是当目标用户主要使用较旧的...

    Echarts最全教程文档和源码

    在学习ECharts之前,你需要准备一些必要的JavaScript插件,例如jQuery和ECharts自身的核心库。ECharts是基于canvas技术的,这意味着它在处理大量数据时性能较好,但不支持3D绘图。相比之下,Highcharts是基于SVG,...

Global site tag (gtag.js) - Google Analytics