【学习】15个最棒的JavaScript图形/图表库

阅读目录

• D3.js — Data-Driven Documents

• Google Charts

• ChartJS

• Chartist.js

• n3-charts

• Ember Charts

• Smoothie Charts

• Chartkick

• ZingChart

• Highcharts JS

• Fusioncharts

• Flot

• amCharts

• EJS Chart

• uvCharts

几乎所有的控制面板都会用到图表，它们能够快速有效的展示复杂的统计。此外，一个好的图也可以提高你的网站的整体设计。

这篇文章为大家展示一些最好的JavaScript图形/图表库。这些库会为你将来的项目创建漂亮可定制化的图表。

虽然这些库大部分都是免费的，但其中也有一些提供了收费版本和附加功能。

D3.js — Data-Driven Documents

现在提到图表的时候，我们第一个想到的就是 D3.js。作为一个开源项目，D3.js提供了很多其他现有库所没有的强大的功能。D3.js 图表使用HTML+SVG+CSS渲染。D3.js不支持旧版本的浏览器，如IE8，为了跨浏览器适应，你可以使用 aight插件。

回到顶部

Google Charts

Google Charts 创 建图表更加的简单。它提供了很多内置的图表，如：条形图、日历图、饼图等等。Google Charts 还提供了许多定制选项让你改变图表的外观。它通过HTML5/SVG渲染来支持跨浏览器兼容性，并且可以跨平台移植到iPads、iPhones、 Android。它还包含支持旧版本IE的VML。

这里是一些使用Google Charts生成的图表的例子。

回到顶部

ChartJS

ChartJS 为图表提供了漂亮的平面设计风格。它通过HTML5的canvas属性渲染。支持旧版本的浏览器如IE7/8。ChartJS 默认是响应式的，它良好的适应手机端和平板端。

回到顶部

Chartist.js

Chartist.js 提供了漂亮的响应式图表。它通过SVG来渲染图表，可以通过CSS3的media queries和SASS来控制。另外它提供了一些在现在浏览器中支持的非常炫酷的动画效果。

回到顶部

n3-charts

如果你是一名AngularJS开发者，你会发现 n3-charts 非常有用且有趣。它建立在D3.js和AngularJS的基础上。

n3-charts是一些利用n3-charts创建的图表列表。

回到顶部

Ember Charts

Ember Charts 是另一个使用D3.js和Ember.js建立的开源图表库。它提供了非常容易定制的条形图、饼图、散点图等。通过SVG渲染。

回到顶部

Smoothie Charts

如果你处理实时的数据流的话，Smoothie Charts 可能是非常有帮助的。它通过HTML5的canvas属性渲染。它是一个纯JavaScript库，提供了实时图形的延迟时间及图像色彩的选项。

回到顶部

Chartkick

Chartkick 是一个为Ruby应用创建的图表库。提供几乎所有主要的图表类型，如：pie, column, bar, area, geo, timeline, and multiple series。通过SVG渲染。

回到顶部

ZingChart

ZingChart 是一款提供了灵活、快速、可扩展创建图表的产品。苹果、微软、波音、沃尔玛这些公司都通过它使用Ajax、JSON、HTML5创建好看的图表。

回到顶部

Highcharts JS

Highcharts JS 是另一款非常流行的图形图表库。预置了很多炫酷的动画效果，是你的网站足够吸引眼球。跟其他库一样，它提供了内置的图形，如：spline, area, areaspline, column, bar, pie, scatter等。

使用Highcharts JS最大的优势是它兼容像IE6这样的旧版本浏览器。标准的浏览器使用SVG渲染，而旧版本的IE浏览器则使用VML。

个人免费使用，而商业用户则需要购买许可证。

回到顶部

Fusioncharts

Fusioncharts 是最老的图表库之一。使用HTML5/SVG和VML来确保兼容性和可移植性。

跟其他大部分图表库不同，它同时支持JSON和XML格式的数据，并且可以导出下面三种格式的数据：PNG、JPG、PDF。

兼容IE6。个人用户和商业用户都可以免费使用有水印的版本。购买许可证则可去掉水印。

回到顶部

Flot

Flot是一款jQuery图表库。它也是最老和最流行的图表库之一。

支持lines, points, filled areas, bars以及这些图形的组合。兼容IE6和Firefox 2。

它是完全免费的，但是对一些特殊需求也提供了商业版。这里是用Flot创建的图表列表。

回到顶部

amCharts

amCharts 无疑是最漂亮的图表库之一。它把自己分成三部分：JavaScript图表、地图图表（amCharts）、库存走势图（ Stock charts）。

免费版会在图表上留一个链接，而它的商业许可证则是最昂贵的。

一些炫酷的实例。

回到顶部

EJS Chart

EJS Chart自称是为企业准备的图表库。它的图表比一些老的图表库更加简洁，可读性更强。兼容IE6+和其他旧版本浏览器。

实例列表。

提供免费版和付费版。免费版一个页面最多只能有一张图表。详细价格看这里。

回到顶部

uvCharts

uvCharts 是一款声称有100+可定制选项的开源图表库。有12种标准的图表类型。基于D3.js，使用HTML+SVG+CSS渲染。

PPV课其他精彩文章：

1、回复“干货”查看干货 数据分析师完整知识结构

2、回复“答案”查看大数据Hadoop面试笔试题及答案

3、回复“设计”查看这是我见过最逆天的设计，令人惊叹叫绝

4、回复“可视化”查看数据可视化专题-数据可视化案例与工具

5、回复“禅师”查看当禅师遇到一位理科生，后来禅师疯了！！知识无极限

6、回复“啤酒”查看数据挖掘关联注明案例-啤酒喝尿布

7、回复“栋察”查看大数据栋察——大数据时代的历史机遇连载

8、回复“数据咖”查看数据咖——PPV课数据爱好者俱乐部省分会会长招募

9、回复“每日一课”查看【每日一课】手机在线视频集锦

原文始发于微信公众号（PPV课数据科学社区）：【学习】15个最棒的JavaScript图形/图表库