如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦。通过所有这些数据弄清楚他们的意思是非常不容易的。可视化对于解决这个问题起到了重要的作用。可视化降低了数据阅读的难度,帮助决策者获得可操作的见解。

  “Dataviz”是数据可视化的缩写,其主要目标是:

通过统计图形、图表、信息图像、表格以及选定表格来清晰的、有效的与用户交流信息。
Wikipedia

  作为开发人员,我们必须确保我们使用正确的工具来从数据中创建有意义的图表,当我们看图的时候能够获得适当的细节信息。

  有很多的 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 图表库的更多相关文章

  1. 21个很棒的jQuery分页插件下载

    分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...

  2. 11 个超棒的 jQuery 分步指引插件

    当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...

  3. 11个超棒的 jQuery 分步指引插件(转)

    当一个网站或者一个Web应用推出新功能时,为了让用户了解你的站点(或应用)如何操作,往往都会在站点(应用)中添加一个分步指引的效果.然而这样的效果,对于不懂原生JS的同学来说,是件很头痛的事情. 下面 ...

  4. 很棒的jQuery代码片段分享

    jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoot ...

  5. 手绘风格的 JS 图表库:Chart.xkcd

    本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...

  6. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  7. 9款很棒的网页绘制图表JavaScript框架脚本

    推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...

  8. 双11不再孤单,结识ECharts---强大的常用图表库

    又是一年双十一,广大单身狗们有没有很寂寞(好把,其实我也是)!但是这次的双十一,我不再孤单,因为结识了一个js的强大的图表库---ECharts. 最近做软件工程项目的时候,由于设计图中有柱状图和饼图 ...

  9. Afreechart很强大的图表库,支持股票曲线图,饼图,曲线

    Afreechart是一个很强大的图表库,支持股票曲线图,饼图,曲线等.源码下载:http://www.23code.com/afreechart/

随机推荐

  1. 新建的SQL Server账号无法使用跟踪功能

    如题,出现了如下图所示: 在IDE中,死活找不到哪里可以设置,最终发现,这功能只能用语句实现: GRANT ALTER TRACE TO 用户名 搞定,特此记录一下.

  2. Non Lasting Storage File System、procfs、sysfs

    catalog . 引言 . proc文件系统 . 简单的文件系统 . sysfs 0. 引言 传统上,文件系统用于在块设备上持久存储数据,但也可以使用文件系统来组织.提供.交换并不存储在块设备上的信 ...

  3. GitBash上传代码不计入贡献的问题处理

    发现最近写的代码,通过GitBash上传到github,但是格子确一个都没亮,今天通过一番检索解决了此问题,特做记录: 通过这篇文章找到了原因所在: GitHub 更新代码到底怎样才算贡献? 通过这篇 ...

  4. 数据结构算法C语言实现(十一)--- 3.4队列的链式表示和实现

    一.简介 FIFO. 二.头文件 //3_4_part1.h /** author:zhaoyu email:zhaoyu1995.com@gmail.com date:2016-6-9 note:r ...

  5. JavaScript 写几个简单的知识点

    首先,还是用比较官方的文字描述来解释下JavaScript: JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为 ...

  6. Linux Basis --- commands of vi

    EDIT mode to GENERAL mode: press ESC general mode: CLOSE FILE :q!    :force to close the file but no ...

  7. Tomcat_Java Web_内存溢出总结

    在抛出内存溢出错误的时候,一般都会提示内存泄露的种类,一般也都是按照区域进行划分: 1. 堆(heap)内存泄漏java.lang.OutOfMemoryError: Javaheap space:大 ...

  8. window.location.href的用法

    在写ASP.Net程序的时候,我们经常遇到跳转页面的问题,我们经常使用Response.Redirect 做ASP.NET框架页跳转,如果客户要在跳转的时候使用提示,这个就不灵光了,如: Respon ...

  9. jquery 图片浏览功能实现

    效果展示: HTML代码: <div id="no3"> <img src="./img/last.png" id="last&qu ...

  10. MFC学习-第一课 MFC运行机制

    最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...