HTML5优秀图表控件
不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字。在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件。
在HTML5非常流行的当下,现代浏览器提供越来越强大的功能,涌现出许多优秀的图表控件,它们基于Canvas/SVG技术来绘制图表(低版本IE使用VML技术),不再需要flash等额外的插件,提供丰富的表现形式以及交互方式,而且性能更加优越。
对于不支持Canvas的浏览器(主要是针对IE),一般都是使用excanvas来适配,它会自动转化成vml来兼容。
Raphaël
一个小型的js库,但是功能非常强大,可以用它在页面上绘制任意类型的图形,以及对图形进行一些操作。
D3
以数据驱动的方式来构建可视化图表,但是操作起来并不简单,而且只支持现代浏览器(古董浏览器就白白吧)
Highcharts
纯js实现,兼容所有现代浏览器,包括iPhone/iPad的移动浏览器,甚至包括古董的IE6。
主要使用SVG技术来渲染,IE8及以下使用VML技术。内置jQuery的支持,对于Mootools和PrototypeJS也提供适配。更详细的兼容性请看:http://www.highcharts.com/documentation/compatibility
支持折线图、样条图、面积图、面积样条图、柱形图、条形图、饼图、散点图、极坐标图、仪表图、范围图表系列等图表类型。
Chart.js
轻量级的js控件(4.5k),不依赖任何js库如jQuery等,有较多的选项可以控制,良好的表现效果。
主要提供折线图、条形图、雷达图、饼图、极坐标图、圆环图。
gRaphaël
基于raphaeljs创建折线图、条形图、柱状图、饼状图等,兼容所有主流浏览器。
RGraph
基于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
使用canvas,用于创建交互式图表(主要是在网页中连接各种元素),功能相当强大。
jsPlumb
用于在网页中连接UI元素,支持主流浏览器。
InfoVis
主页:http://philogb.github.io/jit/
用于创建各种交互式图表,如面积图、条形图和饼图,但主要是用于创建一些图形,并对他们进行连接。
Flot
基于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
迷你的时序图
jQuery.Gantt
主页:https://github.com/thegrubbsian/jquery.ganttView
基于jQuery的甘特图插件,支持编辑、缩放等。
jQuery.ganttView
主页:https://github.com/thegrubbsian/jquery.ganttView
基于jQuery的甘特图插件,支持拖拽以及调整大小。
JointJS
用于创建各种图表并对它们进行连接,支持所有现代标准浏览器,但是对古董浏览器支持不太好(ie9-)。
arbor.js
用于创建动态的连接图,在IE下无法工作。
HTML5优秀图表控件的更多相关文章
- Web端优秀图表控件
百度echart http://echarts.coding.io/doc/example.html C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计 ...
- echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...
- 图表控件Anychart常见问题
AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...
- ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
- 比achartengine更加强大的Android图表控件。
比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- HighchartsNET快速图表控件-开源
前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...
- HighChats图表控件显示精度小数点的方法
相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{ fo ...
- 图表控件FlowChart.NET详细介绍及免费下载地址
FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中.能够帮助你创建工作流程图.对象层次和关系图.网络拓扑 ...
随机推荐
- 添加了有道生词本的 chrome google翻译扩展和有道翻译扩展
在chrome发布项目,需要先花美金认证,还得要美国ID,无奈. 直接上源码,需手动导入. 原始项目源码并未开源,个人是从chrome本地文件里拿出来的,拓展来的,侵删(本来想着自已写一个,业余时间, ...
- CentOS 6.5 RPM包方式安装 Mysql 5.6
1. 下载MySQL 5.6 下载页面:http://dev.mysql.com/downloads/mysql/此处选择“Red Hat Enterprise Linux 6 / Oracle Li ...
- command line
command line terminal vim 编辑工具 vim 编辑命令 j 光标上移 k 光标下移 l 光标左移 h 光标右移 x / dd 删除一行 v 多行模式 :w 保存 :q 不保存退 ...
- The different between ng-grid & ui-grid
ui-grid is replacing ng-grid, and support for ng-grid is getting thin as most of the original (2.x) ...
- XE3随笔19:实例 - 借用 Google 实现全文翻译
调用 Google 翻译的地址格式: http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=" + ...
- jsp文件引入js文件的方式(项目部署于web容器中)
在页面中引入javascript文件的方式是多种多样的,本文介绍两种. 通过<script>标签插入js文件 通过这种方式引入的js,写对js文件和jsp文件的路径很重要.下面给出一个项目 ...
- Spring.net 间接调用被AOP拦截的方法失效(无法进入aop的拦截方法)
.下面的tx要定义 <objects xmlns="http://www.springframework.net" xmlns:db="http://www.spr ...
- Windows结构化异常
不错的总结: http://hi.baidu.com/wangxvfeng101/item/518f6efdab4e5616ff35820e http://www.vckbase.com/index. ...
- 推荐有料哥:HR社保公积金状况大揭底
昨天下午有料哥和几位三茅运营成员一起和大家进行三个小时的面对面,如潮的问题让几位三茅团队成员都措手不及了,有料哥也融入了大家紧张好奇问题的好奇,无奈水平有限不能很好回复,请大家谅解,有问题还可以在有料 ...
- IntegerCache类
先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...