不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字。在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用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下无法工作。

HTML5优秀图表控件的更多相关文章

  1. Web端优秀图表控件

    百度echart http://echarts.coding.io/doc/example.html C#+JQuery+.Ashx+百度Echarts 实现全国省市地图和饼状图动态数据图形报表的统计 ...

  2. echart图表控件配置入门(一)

    现在主流的web图表控件主要有hightchart.fusionchart.echart: echart作为百度前端部门近期推出的一个基于html5的免费图表控件,以其丰富图表类型和良好的兼容性速度得 ...

  3. 图表控件Anychart常见问题

    AnyChart控件是一款当前流行的数据可视化解决方案,使客户可以创建交互地.生动的图表.实时仪表和地图.同时支持Flash和HTML5显示,控件提供极好的视觉外观和配色方案能够使客户根据不同的需求设 ...

  4. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  5. 比achartengine更加强大的Android图表控件。

    比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...

  6. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  7. HighchartsNET快速图表控件-开源

    前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...

  8. HighChats图表控件显示精度小数点的方法

    相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{    fo ...

  9. 图表控件FlowChart.NET详细介绍及免费下载地址

    FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中.能够帮助你创建工作流程图.对象层次和关系图.网络拓扑 ...

随机推荐

  1. c++父类和子类转化致命的代码错误

    最近在工作中,出现了严重的代码错误,对象的基类和子类的继承,代码大致如下: class A { }; class B : public A { } void main() { A* a;(用于子类对象 ...

  2. 如此清除sql server 2008 记住的用户名

    在C盘下搜索这个文件  SqlStudio.bin 搜索到后删除就可以,这样登录Sql server 时就不会有用户名密码之类的,相当于做了初始化操作,但里面的数据库什么的都是有的. 这只是个删除记住 ...

  3. python configparser模块

    来看一个好多软件的常见文档格式如下: [DEFAULT] ServerAliveInterval = 45 Compression = yes CompressionLevel = 9 Forward ...

  4. 使用 VisualCode + iTerm2 提交github的Pull Request

    VisualCode集成github功能,是程序猿参与开源项目的利器.相比Sublime简单了很多(插件安装繁琐,比如你试试在Sublime2 安装gosublime,这里有坑; Sublime 3修 ...

  5. cocos2dx的build_win32.dat出现问题以及install-template-msvc.dat出现.js没有脚本引擎

    关于cocos2dx-2.x.x版本当中出现build_win32.bat执行失败 (针对VS2013)应当在VS的安装路径查找msbuild的文件夹,再其中查找msbuild.exe文件找到四个东西 ...

  6. 如何辨别具体的一种SaaS是否安全?

    如何辨别具体的一种SaaS是否安全,需要把握以下几点: 1.传输协议加密 首先,要看SaaS产品提供使用的协议,是https://还是一般的http://,别小看这个s,这表明所有的数据在传输过程中都 ...

  7. Ubuntu16.04下安装.NET Core

    以下为控制台输入代码序列一.sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/dotnet ...

  8. KMP详解

    原文: http://blog.csdn.net/v_july_v/article/details/7041827 从头到尾彻底理解KMP 1. 引言 本KMP原文最初写于2年多前的2011年12月, ...

  9. 数据导出Excel中文乱码

    数据导出到EXCEL提供用户下载,当记录数大于5行时不会出现乱码.但只要不退出Excel,再删除除记录,当记录数小于5行时,导出也不会出现乱码.当然一旦退出Excel再导出就会出现乱码了. 可以试试 ...

  10. 【洛谷P3197】越狱

    本来还想了一会dp-- 然而一看数据范围明显是数论-- 那么推一推.. 我们发现可以用总方案数减去不会越狱的方案数 那么我们考虑在长度为n的数列中填数 首先第一个位置有m种选择,后面的位置: 总方案: ...