我们无法想像一个没有图表的Dashboard会是什么样。图表可以对数据进行直观有效的展示。不仅如此,图表的巧妙应用还可以提升网站的整体视觉效果。
本文将介绍一些非常好用的制作图表的JavaScript库。这些库能够帮助你完成你未来项目中的漂亮的、可定制化的图和表。
文中介绍的库大多是免费的,当然也有一些库会提供功能更加强大的付费版。
1. D3.js —— 数据驱动型
今天,当我们想到要制作图表时,D3将是脑海中出现的第一个名字。作为一个开源的库,D3还是提供很多其他现有库所没有的强大功能。“进入和离开”的功能,良好的渐变和语法与jQuery与Prototype相似,这些特性都是D3被推崇为最佳制作图表的库的原因。使用D3制作的图表会被转化为HTML、SVG或CSS的代码。
与其他库不同的是,D3不能与包含任何在box外预先生成的图表。当然,想要了解更多类似的属性,你可以浏览一下已使用D3的项目。
D3对较老浏览器的支持情况不容乐观,例如IE8。你可以使用aight plugin等插件来应对兼容性问题。
应用D3的网站包括NYTimes,Uber和Weather.com。
2. Google Charts
Google Charts 是一款很容易使用的库。它提供了多种预先制作的图,包括面积图、条形图、日期图、饼状图和地理图等。
Google Charts也包含了很多的定制化选项来对图形进行修改。图表会被转化为HTML 5/SVG的代码来解决跨浏览器的跨平台的问题。例如IPhones,IPads和Andriod。它还能够将图表转化为VML来兼容老版本的IE浏览器。
3. Chart.js
ChartJs提供了扁平化的图表,使用HTML 的canvas来进行代码转换,应用ployfill来对IE7/8进行支持。
ChartJS默认是响应式的,在移动和平板设备中运行良好。它有六种不同样式的图表(),这使得它成为了一段时间内最吸引人的开源库。
4. Chartist.js
Chartist可以提供美观的响应式图表。同ChartJS一样,Chartist也是社区的人们无法忍受高费用的JavaScript库而制作的。它使用SVG来进行代码转化,可以通过CSS3 媒介查询和Sass来进行设置。值得注意的是,如果使用现代浏览器中的话,Chartist可以用于制作酷炫的动画。
5. n3-charts
如是你是一名AngularJs开发者,那么你一定会感叹于n3的易用和有趣。n3是构建是基于D3和AngularJs的。它使用指令的形式来提供不同样式的图表。
6. Ember Charts
Ember Charts是一个使用D3和Ember构建的开源库。它提供多种图形,使用简便。代码转化由SVG完成。
7. Smoothie Charts
如果你正在处理流数据,那么Smoothie Charts正适合你。它使用canvas来转化代码,是一个纯JavaScript的代码库,并为实时图表提供了保持和颜色闪烁的功能。
8. Chartkick
Chartkick适用于Ruby的项目,提供了多种图表图形,使用SVG进行代码转化。
9. ZingChart
ZingChart用于快速构建灵活、可交互、响应迅速并可缩放的现代产品。它已被应用于许多项目中,例如Apple、Adobe、Boein个好Walmart。ZingChart使用Ajax、JSON和HTML 5来快速传输美观的图表。
ZingChart不仅提供免费的试用版,还提供了不同价位的商用版来满足您的业务需求。
10. HighchartsJS
HighchartsJS是一款非常流行的库。它为图表提供了许多的动画功能,这些足以牢牢吸引那些顾客的目光。HighchartsJS也提供了很多种类的图形。
HighchartsJS最大的有点之一在于它可以兼容例如IE6这样的老版本浏览器。对于现代浏览器,它使用SVG,对于老板的浏览器,图表则被转化为VML。
HighchartsJS提供了免费的个人试用版和商用付费版。
11. Fusioncharts
Fusioncharts是最悠久的制图表库之一,它发布于2002年。图表的代码会被转化HTML 5/SVG和VML来保证可移植性和兼容性。
与其他不同的是,Fusioncharts提供了直接处理JSON和XML的能力。你还可以使用PNG、JPG或PDF的格式来到处这些图表。
Fusioncharts对老版本浏览器的兼容性十分良好。只这一点就成为了它在众多公司中流行的原因。
你可以带着Fusioncharts的水印来免费使用它。如果想移除这个水印则需要购买付费版。
12. Flot
Flot为jQuery而创造,也是诞生很早的流行库之一。
Flot支持线条图、点状图、面积图、条形图或他们的任意组合。它也兼容老版本的浏览器,例如IE6和Firefox2。
Flot是完全免费的,同时也会应顾客的要求提供付费的商业支持。
13. amChart
amChart无疑是这些库中最漂亮的图标库。它将自己完美地分离为3个独立的库——JavaScript Charts、Maps Charts(amMaps)和Stock Charts。
amMap是上述三者中作者做喜欢的部分。它提供了很多功能,包括地图上的加载图标或图片,热力图,画线,并能够在地图上添加文字,缩放等。
amChart 使用SVG来转化代码,并只能在现代浏览器中运行。有它创建的图表或许不会在IE9以下的浏览器中运行。
免费版的amChart会在每张图上方留有一个指向其网站的链接。他的商用版的费用会比市场上其他产品略高一些。
14. EJS Chart
EJS Chart宣城他们是准符合企业级的软件。有它生成的图表比一些历史悠久的库更加整洁和易读。它也兼容IE6+和其他版本的浏览器。
EJS同时有免费版和付费版。免费版会限制你在一页中只能有一张图,每张图只能展示2组数据。
15.uvCharts
uvChart是一个开源的JavaScript制图表库。他宣称有100种以上的定制化选择和12种不同样式的图表。
uvChart使用D3来构建库。它声称自己移除了D3所有晦涩的代码并提供了创建标准图表的简单方法。uvChart使用SVG,HTML和CSS来进行代码转换。
结论:
现在该由你来选择使用哪个库来构建你未来的应用了。
想要对图表进行更多控制的开发者必然会倾向于选择D3。
这些库都在Stackoverflow的论坛上提供了很好地技术支持。