11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦。通过所有这些数据弄清楚他们的意思是非常不容易的。可视化对于解决这个问题起到了重要的作用。可视化降低了数据阅读的难度,帮助决策者获得可操作的见解。
“Dataviz”是数据可视化的缩写,其主要目标是:
作为开发人员,我们必须确保我们使用正确的工具来从数据中创建有意义的图表,当我们看图的时候能够获得适当的细节信息。
有很多的 jQuery 图表插件可以帮你的网页创建交互式的可视化图表,但是哪些是真正的有价值呢?这篇文章中列出了我最喜欢的一些,并且标注了每一个插件最适用的场景。通过这种方式,你可以根据你的目的准确的选择插件而不需要浪费很多的精力和时间。
1. FusionCharts
作为JavaScript图表库的一部分,FusionCharts也提供了一个jQuery的插件,它组合了FusionCharts所有好的部分–智能设计、动画以及丰富的交互体验。图表无缝工作在所有类型的设备包括PC,Mac,Android设备以及iPad和iPhone,并且向后兼容了IE6。
这个jQuery插件,有一些非常强大的功能。图表可以从JSON数据、XML数据、HTML表格数据生成。随着图表的时间轴会有很多的事件(这是一个完整的列表),从而使你很容易地连接到侦听器来执行特定的动作。
他们有一个方便的使用指南来帮助您开始使用插件,并且提供了你可以直接使用的在线的代码片段。你也可以在Github上找到插件和相应的代码。
License:非商业用户免费,商业用户收费。
2. Flot
在丹麦,Flot意味着优雅、迷人、令人印象深刻,这也正是Flot的目的。它的主要目的就是创建易于使用、有吸引力、互动的图形和图表。交互功能包括把一系列的开或关,平移和缩放。其它功能包括多轴支撑,叠图,使用Canvas渲染文本而非HTML,还有其他许多功能。
有很多的视频教程可以帮你学习如何使用Flot,并且有很多实例你可以参考。
License: 开源,对所有人免费
3. Highcharts
Highcharts 是另一个非常流行的JavaScript图表库。它发布于2009年,提供常见的图表、地图和股票图表。
你可以从开发库本身的下载主页下载到jQuery的版本,你可以不需要处理JavaScript就能体会到它的强大功能。
跟FusionCharts一样,它也支持所有的浏览器(包括IE6)、设备和平台。并且它有很好的社区支持,你可以在社区主页找到所有的插件。另一个非常酷的功能是它的演示部分,使你可以很快的运行起来。
License:非商业用户免费,商业用户需要付费
4. Morris.js
Morris.js 是一个界面简洁功能强大的图表库,基于jQuery。它的目的是提供简单易用的漂亮的图表。默认的图表类型有 line, bar, area, and donut graphs。该库提供了一些例子,你可以通过这些代码入门并在几分钟之内创建出好看的图表。
License: Simplified BSD License.
5. CanvasJS jQuery
CanvasJS jQuery是一个源自与CanvasJS的jQuery图表库。使用这个插件的时候,你可以利用所有CanvasJS的标准功能,以及一个扩展的功能集,包括动态更新,平移和缩放,事件和输出图像。图表表现相当好,对于大数据集和基本包,包括24个不同的图表类型,所有这些都是响应。
这里有一些很好的例子源代码展示的图表功能以及jQuery UI集成。
License:非商业用户免费,商业用户需要付费
6. Cytoscape.js
Cytoscape.js并不是一个常见的图表库,但它足以被列出这个列表。不像我们目前讨论倒的其他插件,Cytoscape真的是一个jQuery图表库(例如它有助于可视化图形或网络)。当它把网络原始数据转化成图表的时候,它是高度可定制的,并且它可以出来超大的数据量。它兼容所有现代的浏览器,CommonJS/NodeJS, jQuery and Meteor/Atmosphere。它还支持触摸事件和标准手势。为了更全面的功能列表,请参阅cytoscape.js简介页面。
Cytoscape.js的文档包含一些在线的实例,和一套完整的单元测试。
License: Open-source. Free for all users. (LGPL3+)
7. Peity
有时候你需要的只是符合你的内容小图,peity是这些情况下一个完美的解决方案。它能够让你使用一小段代码将一个数据集转化为 bar charts, donut graphs, line graphs, or mini pies。它以SVG的形式展现,因此适用于所有支持SVG元素的浏览器,如Chrome, Opera, Firefox, IE9+, and Safari。您还可以自定义图表的视觉元素并设置动态颜色。图表可以更新,以反映数据的变化。GitHub页面上也有很多的实例和代码。
License: Open-source under the MIT License.
8. Easy Pie Chart
当我们提到简单和高效的时候,我不得不提 Easy Pie Chart。这是一个jQuery插件,它做一件事,并且只做这一件事情–把单数据呈现出饼状图。它使用画布元素来渲染这些图表。该图很容易定制,只需要几行代码。它们也是响应式的,根据分辨率规模,展示清晰的图片,即使是视网膜屏幕。
该插件兼容所有支持画布元素的现代浏览器。在IE 8及更旧版本,你可以使用excanvas渲染图。你可以在GitHub页面上发现一些有趣的实例。
License: Open-source under the MIT License.
9. jqPlot
jqPlot是一个jQuery插件,可以让你插入纯客户端图表插入到你的网页。jqPlot扬言声称是高度的可插入性–线,轴线,阴影,网格等–都通过插件来渲染和绘制元素,并且高度可定制。它有很多钩子让你可以自定义处理事件函数,添加新的图表类型,添加新的画布的情节和其他高级功能。
详细的使用教程可以参考这里。一些动态渲染实例和单页测试请看这里。
License: Open source project. Dual licensed under the MIT and GPL version 2 licenses.
10. jQuery Sparklines
jQuery Sparklines(类似于Peity),生成直接应用与HTML或者JavaScript的内嵌数据图表。上图中每一个例子只需要用一行代码来创建。最好的是,你甚至不必自己写代码。它有一个整洁的代码生成器,你可以在这里填写数据,并设置选项,它就可以为你生成代码。注意,你无法为这些图表添加任何文本或者标签。他们的目的是在你的文本行中提供快速的印象或者趋势。如果你想注释或其他功能,你最好选择我们上面提到的全功能插件。
如果你想使用这个插件,这里有一个详细的文档,包括选项,语法和高级用法。
License: Open-source. Free for all uses.
11. jQuery.Gantt
目前为止,我们讨论的都是一些创建正规图形图表的插件、网络图插件、以及迷你的内嵌图形图表。但是如果你需要一个项目管理功能的仪表盘,你可能需要甘特图(Gantt charts)。jQuery.Gantt 通过Ajax获取JSON数据来为你创建甘特图。功能包括平移,缩放,分页,每行的多个任务,每个任务有不同的颜色等。想学习使用这个插件以及它提供的参数,你可以参考此文档。
License: Open source project. Dual under the MIT and GPL license.
总结
我最喜欢的jQuery图表库–至少那些我用过–到此结束。它们涵盖了每一个图表类型、功能,以及你可能需要的定制功能。
你呢?当你需要创建图形和图表时,你会使用什么?你最喜欢的插件是什么?为什么?请在下面的评论中与我们分享,让我们开始讨论。
via:sitepoint.com 翻译:http://info.9iphp.com/
11个很棒的 jQuery 图表库的更多相关文章
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- 11 个超棒的 jQuery 分步指引插件
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
- 11个超棒的 jQuery 分步指引插件(转)
当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...
- 很棒的jQuery代码片段分享
jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoot ...
- 手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
- 9款很棒的网页绘制图表JavaScript框架脚本
推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...
- 双11不再孤单,结识ECharts---强大的常用图表库
又是一年双十一,广大单身狗们有没有很寂寞(好把,其实我也是)!但是这次的双十一,我不再孤单,因为结识了一个js的强大的图表库---ECharts. 最近做软件工程项目的时候,由于设计图中有柱状图和饼图 ...
- Afreechart很强大的图表库,支持股票曲线图,饼图,曲线
Afreechart是一个很强大的图表库,支持股票曲线图,饼图,曲线等.源码下载:http://www.23code.com/afreechart/
随机推荐
- choorme 升级到最新版 adobe flash提示过期解决方案
进入adobe flash 官网,下载最新版的adobe flash http://labs.adobe.com/downloads/flashplayer.html
- hbase批量数据导入报错:NotServingRegionException
批量导入数据到hbase的时候,报错: org.apache.hadoop.hbase.client.RetriesExhaustedWithDetailsException: Failed 1 ac ...
- 浅析基本AI五子棋算法
五子棋是所有棋类博弈中比较简单的了,这里介绍的也只是一种非常基本的AI策略.其实,包括之前的AI贪吃蛇,感觉这两个AI其实体现的都是一种建模思想,把一个现实中的问题模型化,抽象化,得到其一般特征,再设 ...
- OpenGLES入门笔记四
原文参考地址:http://www.cnblogs.com/zilongshanren/archive/2011/08/08/2131019.html 一.编译Vertex Shaders和Fragm ...
- Nginx系列1之部分模块详解
1 内核模块: 名称: daemon 语法: daemon on |off 默认值: on 功能: 决定nginx 在前台执行还是后台守护进程执行的 ================== 名称: En ...
- POJ 3678 Katu Puzzle(强连通 法)
题目链接 题意:给出a, b, c 和操作类型 (与或异或),问是否满足所有的式子 主要是建图: 对于 and , c == 1: 说明 a 和 b都是1,那么 0 就不能取, a' -> a ...
- Python核心编程第三版第二章学习笔记
第二章 网络编程 1.学习笔记 2.课后习题 答案是按照自己理解和查阅资料来的,不保证正确性.如由错误欢迎指出,谢谢 1. 套接字:A network socket is an endpoint of ...
- markdown安装和使用
下载 运行markdownpad2-setup.exe文件,下一步一直到结束. 使用 标题 列表 引用.网页链接.图片链接 代码框 星号
- Redis学习-开始
C:\Program Files\Redis\redis-cli.exe 使用servicestack.redis class Program { static void Main(string[] ...
- phpcms响应式布局导航条