数据可视化:基本图表

作者: 阮一峰

日期: 2014年11月29日

珠峰培训

"数据可视化"可以帮助用户理解数据,一直是热门方向。

图表是"数据可视化"的常用手段,其中又以基本图表----柱状图、折线图、饼图等等----最为常用。

用户非常熟悉这些图表,但如果被问道,它们的特点是什么,最适用怎样的场合(数据集)?恐怕答得上来的人就不多了。

本文是电子书《Data Visualization with JavaScript》第一章的笔记,总结了六种基本图表的特点和适用场合,非常好地回答了上面的问题。

零、序言

进入正题之前,先纠正一种误解。

有人觉得,基本图表太简单、太原始,不高端,不大气,因此追求更复杂的图表。但是,越简单的图表,越容易理解,而快速易懂地理解数据,不正是"数据可视化"的最重要目的和最高追求吗?

所以,请不要小看这些基本图表。因为用户最熟悉它们,所以只要是适用的场合,就应该考虑优先使用。

一、柱状图(Bar Chart)

柱状图是最常见的图表,也最容易解读。

它的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。年销售额就是二维数据,"年份"和"销售额"就是它的两个维度,但只需要比较"销售额"这一个维度。

柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。

通常来说,柱状图的X轴是时间维,用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况,建议用颜色区分每根柱子,改变用户对时间趋势的关注。

上图是英国足球联赛某个年度各队的赢球场数,X轴代表不同球队,Y轴代表赢球数。

二、折线图(Line Chart)数据

折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。

它还适合多个二维数据集的比较。

上图是两个二维数据集(大气中二氧化碳浓度,地表平均气温)的折线图。

三、饼图(Pie Chart)

饼图是一种应该避免使用的图表,因为肉眼对面积大小不敏感。

上图中,左侧饼图的五个色块的面积排序,不容易看出来。换成柱状图,就容易多了。

一般情况下,总是应该用柱状图替代饼图。但是有一个例外,就是反映某个部分占整体的比重,比如贫穷人口占总人口的百分比。

四、散点图(Scatter Chart)

散点图适用于三维数据集,但其中只有两维需要比较。

上图是各国的医疗支出与预期寿命,三个维度分别为国家、医疗支出、预期寿命,只有后两个维度需要比较。

为了识别第三维,可以为每个点加上文字标示,或者不同颜色。

五、气泡图(Bubble Chart)

气泡图是散点图的一种变体,通过每个点的面积大小,反映第三维。

上图是卡特里娜飓风的路径,三个维度分别为经度、纬度、强度。点的面积越大,就代表强度越大。因为用户不善于判断面积大小,所以气泡图只适用不要求精确辨识第三维的场合。

如果为气泡加上不同颜色(或文字标签),气泡图就可用来表达四维数据。比如下图就是通过颜色,表示每个点的风力等级。

六、雷达图(Radar Chart)

雷达图适用于多维数据(四维以上),且每个维度必须可以排序(国籍就不可以排序)。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。

下面是迈阿密热火队首发的五名篮球选手的数据。除了姓名,每个数据点有五个维度,分别是得分、篮板、助攻、抢断、封盖。

画成雷达图,就是下面这样。

面积越大的数据点,就表示越重要。很显然,勒布朗·詹姆斯(红色区域)是热火队最重要的选手。

需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

七、总结

图表 维度 注意点
柱状图 二维 只需比较其中一维
折线图 二维 适用于较大的数据集
饼图 二维 只适用反映部分与整体的关系
散点图 二维或三维 有两个维度需要比较
气泡图 三维或四维 其中只有两维能精确辨识
雷达图 四维以上 数据点不超过6个

(完)

一灯学堂

留言(27条)

谢谢老师的总结。

有个疑问,想向老师请教。

比如,对于工资数据数据,统计了400个样本:

25%: 5k以下
17%: [5k-7k)
38%: [7k - 10k)
20%: [10k - 15k)
10%: 15k以上。

想表达类似的数据:

看起来pie是个不错的选择,表达了和为1,但pie辨识起来困难,不容易区分
柱状图易于识别和观察,但失去了和为1的信息
折线图,感觉表达大量数据(连续的),因此,这个看起来不是太好。

老师觉得哪种图更好一些呢? 或者有更好的选择?


@shenfeng:

路过。同时提供两种图就没压力了。也可以试画一条长带,带子按百分比分段后同时按百分比升高。不过我还是建议前者。

@shenfeng:

多图联动,左边是饼状图,表达所占百分比,右边再来一个柱状图。
要表达为1最好的是饼状图,对比数据差异最好用柱状图。

哇,很好的科普文

学习了,正确使用图表类型能帮助展示数据。不过未来互动的数据展示会更重要。

这真是极好的入门文章,虽然我们很多时候会用几中图表库来作图,但是哪种情况适合使用什么图很多时候都不太确定。另外,阮一峰老师引用的那本书也非常不错,值得收藏.

非常好的资源,不说点什么太可惜。哈哈!学习了

这本书看来真的很好啊

@shenfeng:

pie图识别比较麻烦,但是南丁格尔玫瑰图表现起来就好多了,这个是pie图的变种,推荐使用echarts,最近在使用这个,算是为他做个广告吧.

引用nigou的发言:

@shenfeng:

pie图识别比较麻烦,但是南丁格尔玫瑰图表现起来就好多了,这个是pie图的变种,推荐使用echarts,最近在使用这个,算是为他做个广告吧.

噢,之前也想过,就是在多个同心圆上的饼图。不过建议标上具体数字,因为旋转起来的柱子也不太容易比较高度。

引用Jak Wings的发言:

噢,之前也想过,就是在多个同心圆上的饼图。不过建议标上具体数字,因为旋转起来的柱子也不太容易比较高度。

是的,可以通过 label里面的formatter调整显示的格式,直接显示出来对应的比例就好看多了

您的文章写得非常好,非常感谢!

用可视化的视图展现数据非常直观!

文章非常棒 但是强烈抗议将我魔弄成黑色的 要求和旁边的娜娜换红色的

引用manu的发言:

文章非常棒 但是强烈抗议将我魔弄成黑色的 要求和旁边的娜娜换红色的

你魔早就黑化了好吧,只有枪手永远有着争四的红心。

@shenfeng 其实我觉得只要是百分比的图,就可以用pie。可以和本文第一张图一样只用两种颜色表示,鼠标放上去再突出点击部分。当然主要还是看你需要突出展现什么,如果要突出单项对比,就用柱图。如果要突出部分与整体的关系,就用饼图。如果要合二为一,楼上还说了别的好方法。

很好的文章,赞一下。

正好要用到,很好的文章,100个赞!

谢谢每一篇用心的博文。

散点图和雷达图感觉数据多几个的话就看不出来什么了,还不如不用。

大侠语言描述一语中的,甚好,转走。

写得蛮好的,最近也在学习可视化工具,感觉BDP个人版还是蛮好用,至少简单。。。

老师好,数据共五维,一维是类别名称,三维是数值型数据,还有一维是布尔型数据,请问画什么图展示数据比较好?

me.bdp.cn,这个可视化工具很不错~

阮老师这篇文章作为图表入门,算是十分透彻了。除了上面提到echarts,我再推荐一款专业制作可视化数据的网站——图表秀。个人觉得它能满足各类图表制作,还有丰富的行业模板,希望能对大家有帮助!

图表秀:www.tubiaoxiu.com

阮老师有没有自定义仪表盘的图呢

主要还是在传统的图表类型,数据地图、词云、漏斗图、旭日图等更多图表的适用场景,可以参考下这篇文章:https://zhuanlan.zhihu.com/p/23221414

我要发表看法

«-必填

«-必填,不公开

«-我信任你,不会填写广告链接