注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

HTML5优秀图表控件  

2013-09-22 13:29:52|  分类: HTML5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字。在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件。

在HTML5非常流行的当下,现代浏览器提供越来越强大的功能,涌现出许多优秀的图表控件,它们基于Canvas/SVG技术来绘制图表(低版本IE使用VML技术),不再需要flash等额外的插件,提供丰富的表现形式以及交互方式,而且性能更加优越。

对于不支持Canvas的浏览器(主要是针对IE),一般都是使用excanvas来适配,它会自动转化成vml来兼容。

 

Rapha?l

主页:http://raphaeljs.com/

一个小型的js库,但是功能非常强大,可以用它在页面上绘制任意类型的图形,以及对图形进行一些操作。

 

D3

主页:http://d3js.org/

以数据驱动的方式来构建可视化图表,但是操作起来并不简单,而且只支持现代浏览器(古董浏览器就白白吧)

 

Highcharts

主页:http://www.highcharts.com

纯js实现,兼容所有现代浏览器,包括iPhone/iPad的移动浏览器,甚至包括古董的IE6。

主要使用SVG技术来渲染,IE8及以下使用VML技术。内置jQuery的支持,对于Mootools和PrototypeJS也提供适配。更详细的兼容性请看:http://www.highcharts.com/documentation/compatibility

支持折线图、样条图、面积图、面积样条图、柱形图、条形图、饼图、散点图、极坐标图、仪表图、范围图表系列等图表类型。

 

Chart.js

主页:http://www.chartjs.org/

轻量级的js控件(4.5k),不依赖任何js库如jQuery等,有较多的选项可以控制,良好的表现效果。

主要提供折线图、条形图、雷达图、饼图、极坐标图、圆环图。

 

gRapha?l

主页:http://g.raphaeljs.com/

基于raphaeljs创建折线图、条形图、柱状图、饼状图等,兼容所有主流浏览器。

 

RGraph

主页:http://www.rgraph.net/

基于HTML5 Canvas,支持超过20种不同类型的图表:条形、现状、饼图、仪表图,用于计划管理的甘特图、漏斗图、瀑布图等。

 

morris.js

主页:http://www.oesmith.co.uk/morris.js/

基于jQuery和Raphaeljs,支持折线图、柱状图、面积图、圆环图等。

 

xCharts

主页:http://tenxer.github.io/xcharts/

基于D3的图表,支持折线图、柱状图、时序图等。

 

dhtmlxChart

主页:http://dhtmlx.com/docs/products/dhtmlxChart

跨浏览器的HTML5图表,支持折线图、柱状图、面积图、饼图等,支持XML/JSON等格式的数据源。此外,还有dhtmlxGantt专门用于显示甘特图。

 

GoJS

主页:http://gojs.net/

使用canvas,用于创建交互式图表(主要是在网页中连接各种元素),功能相当强大。

 

jsPlumb

主页:http://jsplumbtoolkit.com

用于在网页中连接UI元素,支持主流浏览器。

 

InfoVis

主页:http://philogb.github.io/jit/

用于创建各种交互式图表,如面积图、条形图和饼图,但主要是用于创建一些图形,并对他们进行连接。

 

Flot

主页:http://www.flotcharts.org/

基于jQuery的图表库,支持折线图、柱形图、时序图等,并可以通过插件扩展不同的图表类型。

 

Cubism.js

主页:http://square.github.io/cubism/

D3的插件,用于显示时序图。

 

peity

主页:http://benpickles.github.io/peity/

jQuery插件,生成迷你的折线图、饼图、条形图、时序图等,使用非常灵活。

 

jQuery Sparklines

jQuery插件,用于生成迷你图表如折线图、柱状图等。

 

Timeline

主页:http://almende.github.io/chap-links-library/timeline.html

交互式的时间轴图表,可以自由移动、拖动、放大以及在时间轴中编辑。

 

Smoothie Charts

主页:http://smoothiecharts.org/

迷你的时序图

 

jQuery.Gantt

主页:https://github.com/thegrubbsian/jquery.ganttView

基于jQuery的甘特图插件,支持编辑、缩放等。

 

jQuery.ganttView

主页:https://github.com/thegrubbsian/jquery.ganttView

基于jQuery的甘特图插件,支持拖拽以及调整大小。

 

JointJS

主页:http://jointjs.com/

用于创建各种图表并对它们进行连接,支持所有现代标准浏览器,但是对古董浏览器支持不太好(ie9-)。

 

arbor.js

主页:http://arborjs.org/

用于创建动态的连接图,在IE下无法工作。

作者:囧月
出处:http://lwme.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  评论这张
 
阅读(705)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017