"数据可视化"可以帮助用户理解数据，一直是热门方向。
图表是"数据可视化"的常用手段，其中又以基本图表----柱状图、折线图、饼图等等----最为常用。
用户非常熟悉这些图表，但如果被问道，它们的特点是什么，最适用怎样的场合（数据集）？恐怕答得上来的人就不多了。
本文是电子书《Data Visualization with JavaScript》第一章的笔记，总结了六种基本图表的特点和适用场合，非常好地回答了上面的问题。
零、序言
进入正题之前，先纠正一种误解。
有人觉得，基本图表太简单、太原始，不高端，不大气，因此追求更复杂的图表。但是，越简单的图表，越容易理解，而快速易懂地理解数据，不正是"数据可视化"的最重要目的和最高追求吗？
所以，请不要小看这些基本图表。因为用户最熟悉它们，所以只要是适用的场合，就应该考虑优先使用。
一、柱状图（Bar Chart）
柱状图是最常见的图表，也最容易解读。
它的适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。年销售额就是二维数据，"年份"和"销售额"就是它的两个维度，但只需要比较"销售额"这一个维度。
柱状图利用柱子的高度，反映数据的差异。肉眼对高度差异很敏感，辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。
通常来说，柱状图的X轴是时间维，用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况，建议用颜色区分每根柱子，改变用户对时间趋势的关注。
上图是英国足球联赛某个年度各队的赢球场数，X轴代表不同球队，Y轴代表赢球数。
二、折线图（Line Chart）数据
折线图适合二维的大数据集，尤其是那些趋势比单个数据点更重要的场合。
它还适合多个二维数据集的比较。
上图是两个二维数据集（大气中二氧化碳浓度，地表平均气温）的折线图。
三、饼图（Pie Chart）
饼图是一种应该避免使用的图表，因为肉眼对面积大小不敏感。
上图中，左侧饼图的五个色块的面积排序，不容易看出来。换成柱状图，就容易多了。
一般情况下，总是应该用柱状图替代饼图。但是有一个例外，就是反映某个部分占整体的比重，比如贫穷人口占总人口的百分比。
四、散点图（Scatter Chart）
散点图适用于三维数据集，但其中只有两维需要比较。
上图是各国的医疗支出与预期寿命，三个维度分别为国家、医疗支出、预期寿命，只有后两个维度需要比较。
为了识别第三维，可以为每个点加上文字标示，或者不同颜色。
五、气泡图（Bubble Chart）
气泡图是散点图的一种变体，通过每个点的面积大小，反映第三维。
上图是卡特里娜飓风的路径，三个维度分别为经度、纬度、强度。点的面积越大，就代表强度越大。因为用户不善于判断面积大小，所以气泡图只适用不要求精确辨识第三维的场合。
如果为气泡加上不同颜色（或文字标签），气泡图就可用来表达四维数据。比如下图就是通过颜色，表示每个点的风力等级。
六、雷达图（Radar Chart）
雷达图适用于多维数据（四维以上），且每个维度必须可以排序（国籍就不可以排序）。但是，它有一个局限，就是数据点最多6个，否则无法辨别，因此适用场合有限。
下面是迈阿密热火队首发的五名篮球选手的数据。除了姓名，每个数据点有五个维度，分别是得分、篮板、助攻、抢断、封盖。
画成雷达图，就是下面这样。
面积越大的数据点，就表示越重要。很显然，勒布朗·詹姆斯（红色区域）是热火队最重要的选手。
需要注意的时候，用户不熟悉雷达图，解读有困难。使用时尽量加上说明，减轻解读负担。
七、总结
| 图表 | 维度 | 注意点 |
|---|---|---|
| 柱状图 | 二维 | 只需比较其中一维 |
| 折线图 | 二维 | 适用于较大的数据集 |
| 饼图 | 二维 | 只适用反映部分与整体的关系 |
| 散点图 | 二维或三维 | 有两个维度需要比较 |
| 气泡图 | 三维或四维 | 其中只有两维能精确辨识 |
| 雷达图 | 四维以上 | 数据点不超过6个 |
（完）
shenfeng 说：
谢谢老师的总结。
有个疑问，想向老师请教。
比如，对于工资数据数据，统计了400个样本：
25%： 5k以下
17%： [5k－7k)
38%： [7k - 10k)
20%: [10k - 15k)
10%: 15k以上。
想表达类似的数据：
看起来pie是个不错的选择，表达了和为1，但pie辨识起来困难，不容易区分
柱状图易于识别和观察，但失去了和为1的信息
折线图，感觉表达大量数据（连续的），因此，这个看起来不是太好。
老师觉得哪种图更好一些呢？ 或者有更好的选择？
2014年11月29日 14:54 | # | 引用
Jak Wings 说：
@shenfeng：
路过。同时提供两种图就没压力了。也可以试画一条长带，带子按百分比分段后同时按百分比升高。不过我还是建议前者。
2014年11月29日 19:24 | # | 引用
iijjll 说：
@shenfeng：
多图联动，左边是饼状图，表达所占百分比，右边再来一个柱状图。
要表达为1最好的是饼状图，对比数据差异最好用柱状图。
2014年11月29日 19:33 | # | 引用
爱国者 说：
哇，很好的科普文
2014年11月30日 16:25 | # | 引用
兔二爷 | 理性的感性生活 说：
学习了，正确使用图表类型能帮助展示数据。不过未来互动的数据展示会更重要。
2014年11月30日 18:08 | # | 引用
铁锚 说：
这真是极好的入门文章,虽然我们很多时候会用几中图表库来作图，但是哪种情况适合使用什么图很多时候都不太确定。另外，阮一峰老师引用的那本书也非常不错,值得收藏.
2014年11月30日 19:52 | # | 引用
岚 说：
非常好的资源，不说点什么太可惜。哈哈！学习了
2014年12月 1日 03:59 | # | 引用
袁源 说：
这本书看来真的很好啊
2014年12月 1日 12:55 | # | 引用
nigou 说：
@shenfeng：
pie图识别比较麻烦,但是南丁格尔玫瑰图表现起来就好多了,这个是pie图的变种,推荐使用echarts,最近在使用这个,算是为他做个广告吧.
2014年12月 1日 14:44 | # | 引用
Jak Wings 说：
噢，之前也想过，就是在多个同心圆上的饼图。不过建议标上具体数字，因为旋转起来的柱子也不太容易比较高度。
2014年12月 1日 21:09 | # | 引用
nigou 说：
2014年12月 2日 09:51 | # | 引用
Bruce Lee 说：
您的文章写得非常好，非常感谢！
2014年12月 3日 18:11 | # | 引用
小谈博客 说：
用可视化的视图展现数据非常直观！
2014年12月 6日 11:44 | # | 引用
manu 说：
文章非常棒 但是强烈抗议将我魔弄成黑色的 要求和旁边的娜娜换红色的
2015年1月 4日 10:18 | # | 引用
transtone 说：
你魔早就黑化了好吧，只有枪手永远有着争四的红心。
2015年1月25日 08:07 | # | 引用
transtone 说：
@shenfeng 其实我觉得只要是百分比的图，就可以用pie。可以和本文第一张图一样只用两种颜色表示，鼠标放上去再突出点击部分。当然主要还是看你需要突出展现什么，如果要突出单项对比，就用柱图。如果要突出部分与整体的关系，就用饼图。如果要合二为一，楼上还说了别的好方法。
2015年1月25日 08:17 | # | 引用
计算机的潜意识 说：
很好的文章，赞一下。
2015年2月10日 10:18 | # | 引用
Chener 说：
正好要用到，很好的文章，100个赞！
谢谢每一篇用心的博文。
2015年3月16日 15:41 | # | 引用
kikcn 说：
散点图和雷达图感觉数据多几个的话就看不出来什么了，还不如不用。
2015年3月31日 13:57 | # | 引用
师弟文 说：
大侠语言描述一语中的，甚好，转走。
2015年11月22日 11:37 | # | 引用
杨丽 说：
写得蛮好的，最近也在学习可视化工具，感觉BDP个人版还是蛮好用，至少简单。。。
2015年12月29日 17:50 | # | 引用
王素 说：
老师好，数据共五维，一维是类别名称，三维是数值型数据，还有一维是布尔型数据，请问画什么图展示数据比较好？
2016年4月14日 20:24 | # | 引用
杨琦 说：
me.bdp.cn，这个可视化工具很不错~
2017年1月10日 21:34 | # | 引用
crystal 说：
阮老师这篇文章作为图表入门，算是十分透彻了。除了上面提到echarts，我再推荐一款专业制作可视化数据的网站——图表秀。个人觉得它能满足各类图表制作，还有丰富的行业模板，希望能对大家有帮助！
2017年4月11日 09:24 | # | 引用
crystal 说：
图表秀：www.tubiaoxiu.com
2017年4月11日 09:29 | # | 引用
小明 说：
阮老师有没有自定义仪表盘的图呢
2017年8月 2日 23:16 | # | 引用
小甜甜 说：
主要还是在传统的图表类型，数据地图、词云、漏斗图、旭日图等更多图表的适用场景，可以参考下这篇文章：https://zhuanlan.zhihu.com/p/23221414
2017年8月21日 15:22 | # | 引用
qingxi 说：
现在可以可视化拖拽配置这些图表了 magicalcoder.com
2020年9月 8日 14:09 | # | 引用