基础图表设计总结

折线图、柱形图、堆积柱形图、环形(饼)图 .....  它们有关系么?该怎么选择?最近接触了两个数据分析类项目,发现其实柱形图是许多图的“坯子”,其他图形不过是从不同角度对它进行改造。

从一个例子来看看,各种图形是怎么从柱形图演变出来的?以及各种图表绘制注意事项和适用场景。随便编了一份数据(用真实车系名称会让人更有代入感,便于理解):

原始数据(数据纯属虚构)

柱形图

上表中有三个车系,假设是它们今年1-3月份在汽车媒体上的关注时长(关注时长可以简单理解为用户浏览该车、以及将该车与其他车对比并浏览对比报告所花的时间,这个指标对于了解用户的购车意向很有帮助)。

一般来说,我们了解一件事,都是先了解概况,再往下看详细情况。就像考研录取先得先过总分数线,然后在看各科是否都过线 。这份数据,我们看到的概况是:奔驰GLC总关注时长>奥迪Q5>宝马X3,反应在图上就是:

柱形图

通过它,可以很容易对各车系总关注时长进行对比,即使没有数字标注,肉眼也大致能看出奔驰比奥迪多大约不到20个单位(奔驰奥迪之间差值不到两条参考线高度的一半,而两条参考线之间是40个单位。所以奔驰比奥迪多大约不到20个单位)、奥迪比宝马多大约40个单位。试想一下,环形图/饼图/折线图 都无法做到扫一眼就给人这样的整体直观感受。

绘制小贴士

1.柱形最好从大到小排序;

2.各柱形均采用一个颜色 以避免颜色导致的精力分散,我这里是考虑到后面折线图、环形图等的延续性,所以用不同颜色代表不同车系了。

小结1:柱形图擅长表达类目间的对比


折线图

接下来注意喽,要变身啦~~~~把每根柱都拍扁揉成团,再按时间横向抻开,像抻面一样,就得到了折线图:

柱形图 --> 折线图

通过折线图可以看到,奔驰上升势头最明显,奥迪和宝马都有下降趋势。折线图能够最直观表达趋势变化。

关于折线图,想多说两句,因为它是被滥用最多的图,比如下例:

用错的折线图

为什么说这个折线图被滥用了?看下横坐标:“尖草坪区”、“晋源区”、“万柏林区”...各区之间是独立的,任意两个中间无法继续分割出新区------这种无法一直分割下去的数据类型属于【离散数据】,离散数据并不适合用折线图来表达,柱形图更适合。

那么,什么类型数据最适合用折线图表达呢?就是与离散数据相对的【连续数据】-----可以无限分割的数据。如果数据可以不断分割出有意义的实体,那它就属于连续数据。例如时间,8:00和10:00中间是9:00;8:00到9:00中间是8:30;8:30:00到8:31:00中间是8:30:30.....你可以一直往下抻,它的组成要素是无法穷尽的。而离散数据中间什么都没有,无法把它们想象成一根抻面,它们是一堆散落的石头,两块石头中间是空气,没有连接,没法抻。

绘制小贴士:

1. 如果一定要展示多条折线,最多不要同时展示超过5条。根据7加减2法则,一般人的短时记忆容量约为7个加减2个,即5--9之间。

2. 如果一定要用双Y轴,确保这两个指标是有关系的。比如市场份额虽然增加了,但是收入却在下滑。这可以提醒决策者,是否要修改战略因为市场在萎缩。

小结2:折线图擅长表达趋势


堆积条/柱形图

柱形图可以秒变堆积柱形图:

柱形图 --> 堆积条/柱形图

方案一 连起来:如果把每个车关注时长连起来 再横过来,就是堆积条形图(偷懒没画坐标轴):可以看到三个车系总共获得多少关注时长、以及各车系关注时长分月构成;

方案二 按月细分:把每个车的关注时长按月细分,会得到三个堆积柱形:既能看到三个车系关注时长总量对比,也能下钻看到每个车系各月份的构成。

堆积柱/条形图还有一个变种,就是百分比堆积柱/条形图,能够相对方便的对比各个月份占比----例如 想对比奔驰一月占奔驰一季度的占比 和 奥迪一月占奥迪一季度的占比,以及二月的、三月的.... 只要把代表三个车系的柱形都拉伸到等高,就可以了。见下图右侧的百分比堆积柱形图

绝对值堆积柱图 --> 百分比堆积柱图

小贴士:要素尽量不要太多,超过五个就不好对比了。上方右侧图中,只有一月和三月很容易做对比,因为有共同起点或终点,而二月的就不太容易对比了。 距离X轴最近和最远的两个小柱形)比较方便做对比。因此,如果有很多长尾要素,最好合并成其他。

小结3:堆积柱/条形图擅长表达要素构成


环形图

堆积柱/条形图头尾相连,就能得到环形图:

堆积柱形图 --> 环形图


环形图会让人对各个车占整体的份额有比较直观的感受,即使不看占比数值标注,也可以一眼从图形得出奔驰份额最多 接近总关注时长的一半;奥迪比奔驰少一点点。而堆积柱形图就不太容易看一眼就得出这个结论。毕竟,我们的大脑均分一个圆形比均分一个长方形容易太多。不信你试试,很容易做到一次把一个圆形平均分多达八份,但很难一次把一个长方形平均切八份,拿我自己来说,我一次最多能均分两份,想分四份我得先标上一半的位置,然后再把这两份分别再切两份。

饼图和环形图是同类,并且很容易通过环形图变幻出来。将环形图圆心与每个颜色交接出连线再涂上对应的颜色,就会得到一个饼图,其表达含义与环形图一致,也是比较方便看份额

环形图 --> 饼图


小贴士:环形或扇形切片的排序有讲究:份额排名第一和第二的要素,放在左上角和右上角,份额第三及以后的要素可以顺着排名第二的往下排。这样可以保证最重要的内容在最重要的位置,因为人的阅读习惯是从上到下的。否则,如果只是简单按顺时针或者逆时针排,反正无论哪个时针,份额最小的要素都会跑到最上面。(但目前很多插件比如echart、highcharts确实是按照简单逆时针排序,不知道是没有意识到这一点还是程序上实现有困难)

小结4:环形图、饼图擅长表达个体占整体的份额


旭日图

环形图或饼图,把每一环或每个扇形继续细分,可以得到旭日图。偷个懒就不画了,就是在环形或饼形外面再套一层或多层环形。示意图:

来源:highcharts


这种图优势:不但能看到一级类目(浏览器)的份额,还能看到二级类目(浏览器版本)占整体市场的份额;

缺点:元素多的时候会比较乱,所以占比小于某个值的类目就不做显示了。

小结5:旭日图擅长表达两级类目份额


总结:数据图表就是为了让人更直观的理解数据背后的结论,尽量让人一看就明白。匹配对业务场景是关键。千万不要追求形式好看 为了作图而作图,明明不适合用某些图 却因为追求dashboard的视效丰富,非用某些图。跑偏了难以理解那还不如直接用文字把结论写出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,445评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,889评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,047评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,760评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,745评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,638评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,011评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,669评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,923评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,655评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,740评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,406评论 4 320
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,995评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,961评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,023评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,483评论 2 342

推荐阅读更多精彩内容