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

“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，本文由 Specs 翻译整理，发布在 WEB资源网，转载请注明来源。