开发人员不少时候须要使用图表来表现一些数据,而一张图表每每可以比几行密密麻麻的数字表格更能直观地展现数据内容。随着Web技术的发展,从传统只能依靠于flash、IE的vml,各个浏览器尚不统一的svg,到现在规范统一的canvas、svg为表明的html5技术,表现点、线、面要素的技术已经愈来愈规范成熟。我在本篇文章中收集了10款免费开源且比较优秀的图表制做插件,以供各位参考。 javascript
1,ichartjs(国产) html
ichartjs是一款优秀的国产开源插件,做者是王鹤,英文名taylor,毕业于南昌大学软件工程专业。 前端
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。是WEB/APP图表展现方面的解决方案 。若是你正在开发HTML5的应用,ichartjs正好适合您。 ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。 html5
2,echarts(国产) java
Echarts是百度前端团队作的基于html5-canvas的开源图表绘制组件。 python
几个特性以下: git
拖拽重计算:拖拽重计算特性(专利)带来了数据统计图表从未有过的用户体验,容许用户对统计数据进行有效的提取、整合,甚至在多个图表间交换数据,赋予了用户对数据进行挖掘、整合的能力。 github
大规模数据模式:如何展示成千上百万的数据?貌似除了用专业的统计工具(如MATLAB)外别无选择?不,在拥有众多交互特性下ECharts依然能够作到直角系图表(折、柱、散点、K线)20万数据秒级出图。 canvas
值域漫游:基于坐标的图表(如地图、散点图)经过色彩变化表现数值的大小能直观形象的展现数据分布。但如何聚焦到我所关心的数值上?ECharts拥有值域漫游的功能,让你能够轻松进行数值筛选。 浏览器
3,Loongchart(国产)
LoongChart是一款基于HTML5-Canvas的开源信息图表绘制组件,难能难得的是该插件可以兼容IE七、IE8,但动画效果较差,静态显示效果基本知足要求。
有如下特色:
纯html5及Javascript,跨平台,原生支持现代浏览器,兼容IE七、IE8,不依赖任何框架;
支持多种经常使用绘图类型;
支持组合图;
支持核心代码内的语言设定(用于错误提示);
支持动画(可关闭);
支持皮肤设定以及自定义定制皮肤功能;
部分图形支持3D图
支持自定义绘图;
记录最终绘制的图形中的各元素位置、大小等信息,以供查询;
支持直接导出图片(非所有均浏览器支持);
LoongChart官网有一个比较贴心的功能,它支持在线修改选项和查看选项,并能够实时显示修改选项后的效果。若是用户找到合适的选项,就能够直接查看实时选项并复制到本身的项目中,很是方便。
4,Chart.js
小巧而轻便的的图表插件,缺点是支持的图形类型较少,数据交互功能也很是有限,但做者之后可能会逐渐完善。
5,Jqplot
一个至关古老而“坚挺”的图表插件,支持现代浏览器和IE7,IE8(和LoongChart同样,抛弃IE6了)。
6,gRaphaël
支持现代浏览器,以及IE6.0+,兼容性至关不错。
7,RGraph
支持现代浏览器, 兼容IE七、IE8。
支持至关多类型的图表,API也至关齐全。
支持的图形类型相对来讲不是不少。
10,Dygraphs
dygraphs is a fast, flexible open source JavaScript charting library.
Features:
Handles huge data sets: dygraphs plots millions of points without getting bogged down.
Interactive out of the box: zoom, pan and mouseover are on by default.
Strong support for error bars / confidence intervals.
Highly customizable: using options and custom callbacks, you can make dygraphs do almost anything.
dygraphs is highly compatible: it works in all major browsers (including IE8). You can even pinch to zoom on mobile/tablet devices!
There's an active community developing and supporting dygraphs.