本文從數(shù)據(jù)間的這三點(diǎn)關(guān)系：比較、構(gòu)成、分布、聯(lián)系進(jìn)行講解，告訴大家如何能使數(shù)據(jù)可視化更高效。

大數(shù)據(jù)時(shí)代，數(shù)據(jù)驅(qū)動(dòng)決策。處理不好龐大、復(fù)雜的數(shù)據(jù)，其價(jià)值將大打折扣。

那如何縮短數(shù)據(jù)與用戶的距離？讓用戶一眼Get到重點(diǎn)？讓老板為你的匯報(bào)方案鼓掌？

本文通過(guò)連環(huán)15關(guān)，層層深入，傳你數(shù)據(jù)匹配圖形神功，讓數(shù)據(jù)可視化更高效。

（注：以下數(shù)據(jù)基于公司業(yè)務(wù)，非真實(shí)數(shù)據(jù)）

無(wú)論數(shù)據(jù)總量和復(fù)雜程度如何，數(shù)據(jù)間的關(guān)系大多可分為三類：比較 / 構(gòu)成 / 分布&聯(lián)系。

一、比較

基于分類 / 時(shí)間的數(shù)據(jù)對(duì)比，通常需用到比較型圖表。用戶通過(guò)圖表輕松識(shí)別最大/最小值，查看當(dāng)前和過(guò)去的數(shù)據(jù)變動(dòng)情況。

常見(jiàn)場(chǎng)景：哪個(gè)地區(qū)的收件量最多？今年的收入和去年相比如何……

條目少 – 柱狀圖

比較條目較少時(shí)，如5個(gè)地區(qū)收件量的對(duì)比，可選用柱狀圖表示。

▲柱狀圖

條目多- 條形圖

當(dāng)條目較多，如大于12 條，移動(dòng)端上的柱狀圖會(huì)顯得擁擠不堪，更適合用條形圖。一般數(shù)據(jù)條目不超過(guò) 30 條，否則易帶來(lái)視覺(jué)和記憶負(fù)擔(dān)。

▲條形圖

看趨勢(shì) – 折線圖

當(dāng)X軸為連續(xù)數(shù)值（如時(shí)間）且注重變化趨勢(shì)時(shí)，則適用折線圖。

▲折線圖

擴(kuò)大差異 – 南丁格爾玫瑰圖

除柱狀圖外，有無(wú)更新穎的表現(xiàn)方式呢？那就屬南丁格爾玫瑰圖了。

▲南丁格爾玫瑰圖

由于扇形的半徑和面積是平方的關(guān)系，南丁格爾玫瑰圖會(huì)將數(shù)值之間的差異放大，適合對(duì)比大小相近的數(shù)值。它不適合對(duì)比差異較大的數(shù)值，因?yàn)閿?shù)值過(guò)小的類目會(huì)難以觀察。

此外，因?yàn)閳A有周期性，玫瑰圖也適于表示周期 / 時(shí)間概念，比如星期、月份。依然建議數(shù)據(jù)量不超過(guò) 30 條，超出可考慮條形圖。

雙向 – 雙向條形圖

前面的例子都是單維度比較，當(dāng)比較正反兩類甚至更多維度的數(shù)據(jù)時(shí)，可試嘗試雙向條形圖，下圖為各大區(qū)的重點(diǎn)地區(qū)的收派件量的對(duì)比。

▲雙向條形圖

用顏色區(qū)分大區(qū)，空心/實(shí)心區(qū)分收件量和派件量，既能整體比較大區(qū)，又能詳細(xì)對(duì)比地區(qū)的情況。

打怪升級(jí)，再加點(diǎn)難度。在雙向圖上再增加一個(gè)維度，如下表，比較 5 個(gè)地區(qū)的利潤(rùn)及相應(yīng)的收入和成本。請(qǐng)先思考一下，再下滑看推薦圖表。

▲業(yè)務(wù)數(shù)據(jù)

▲雙向條形圖（多維度）

通過(guò)圖形一眼就能看出深圳區(qū)的利潤(rùn)低于廣州區(qū)，即使它的收入高于廣州區(qū)，但成本相對(duì)來(lái)說(shuō)高于廣州區(qū)。

目標(biāo)達(dá)成 – 子彈圖

實(shí)際業(yè)務(wù)中，常要考察指標(biāo)的達(dá)成情況，如收入達(dá)標(biāo)情況及所處區(qū)間（優(yōu)、良、差），如下表，你會(huì)怎么可視化呢？動(dòng)手畫(huà)一畫(huà)吧！

▲業(yè)務(wù)數(shù)據(jù)

▲子彈圖

子彈圖，因?yàn)橄褡訌椛浜髱С龅能壍?。相較于儀表盤(pán)，它能夠在狹小的空間中表達(dá)豐富的數(shù)據(jù)信息，在信息傳遞上有更大的效能優(yōu)勢(shì)。

若還要比較4個(gè)季度的收入情況，只需用不同顏色區(qū)分。如下圖，一眼便知第二季度表現(xiàn)較好，而第一季度則不佳。

▲子彈圖

性能 – 雷達(dá)圖

對(duì)于一些多維的性能數(shù)據(jù)，如綜合評(píng)價(jià)，常用雷達(dá)圖表示。指標(biāo)得分接近圓心，說(shuō)明處于較差狀態(tài)，應(yīng)分析改進(jìn)；指標(biāo)得分接近外邊線，說(shuō)明處于理想狀態(tài)。

▲雷達(dá)圖

以上就是“比較”類的常用圖表

▼可歸納如下▼

此表并非一成不變的“鐵表”，相互之間還會(huì)串聯(lián)交叉，大家還需靈活應(yīng)用。

二、構(gòu)成

部分相較于整體，一個(gè)整體被分成幾個(gè)部分。這類情況會(huì)用到構(gòu)成型圖表，如五大區(qū)的收件量占比、公司利潤(rùn)的來(lái)源構(gòu)成等。

單層 – 餅狀圖

第1關(guān)中，對(duì)比5個(gè)地區(qū)的收件量時(shí)用到了柱狀圖。若看占比情況，餅狀圖更合適。

▲餅狀圖

如果變成 17 個(gè)地區(qū)，會(huì)怎樣？

像不像彩色七星瓢蟲(chóng)？

所以餅圖分類一般不超過(guò) 9 個(gè)，超過(guò)建議用條形圖展示。

除餅圖外，環(huán)形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區(qū)域挖空，在空心區(qū)域顯示文本信息，比如標(biāo)題，優(yōu)勢(shì)是其空間利用率更高。

▲環(huán)形圖

分層 – 環(huán)形圖、旭日?qǐng)D

對(duì)于管理層而言，需先把握大局和重點(diǎn)。比如大區(qū)負(fù)責(zé)人需一眼看到重點(diǎn)地區(qū)及重點(diǎn)分部的情況（如下圖），如何展示？

▲環(huán)形圖

▲旭日?qǐng)D

這個(gè)叫旭日?qǐng)D（感受到陽(yáng)光了嗎？），逐層下鉆看數(shù)據(jù)，大區(qū)的重點(diǎn)地區(qū)及相應(yīng)分部的構(gòu)成情況一目了然。

累計(jì)趨勢(shì) – 堆疊面積圖

接下來(lái)，看看數(shù)值構(gòu)成隨時(shí)間變化的案例：第一大區(qū)（包含四個(gè)重點(diǎn)地區(qū)）近四年收入構(gòu)成的趨勢(shì)要如何可視化？自己想一想，再下滑看推薦方案。

▲業(yè)務(wù)數(shù)據(jù)

▲堆疊面積圖

推薦方案是堆疊面積圖，可以展現(xiàn)分量（地區(qū)）對(duì)于總量（大區(qū)）的貢獻(xiàn)，并顯示總量（大區(qū)）的變化過(guò)程。需要說(shuō)明的是，地區(qū)收入的起點(diǎn)并非從 y=0 開(kāi)始，而是在下面的地區(qū)基礎(chǔ)上逐層疊加，最后組成一個(gè)整體。

累計(jì)比較 – 堆疊柱狀圖

如果將上圖X軸的標(biāo)簽文字（即年份）和圖例（即地區(qū)）互換（如下圖A），用來(lái)看每個(gè)地區(qū)近四年的收入構(gòu)成，用哪個(gè)圖更合適？

▲堆疊柱狀圖

是不是覺(jué)得都OK？那圖中 X1 有何含義？堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于，堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)（如時(shí)間），堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù)，因此用 B 方案更適合。

累計(jì)增減 – 瀑布圖

若想表達(dá)兩個(gè)數(shù)據(jù)點(diǎn)間數(shù)量的演變過(guò)程，可使用瀑布圖。開(kāi)始的一個(gè)值，在經(jīng)過(guò)不斷的加減后，得到一個(gè)值。瀑布圖將這個(gè)過(guò)程圖示化，常用來(lái)展現(xiàn)財(cái)務(wù)分析中的收支情況。

▲瀑布圖

以上就是“構(gòu)成”類常用圖表

▼可歸納如下▼

三、分布 & 聯(lián)系

通過(guò)分布 & 聯(lián)系型圖表能看到數(shù)據(jù)的分布情況，進(jìn)而找到某些聯(lián)系，如相關(guān)性、異常值和數(shù)據(jù)集群。

常見(jiàn)使用場(chǎng)景：客戶的年齡段分布？單票成本與收件量的關(guān)系？

兩個(gè)變量 – 散點(diǎn)圖

仍以業(yè)務(wù)為例，下圖為全國(guó)網(wǎng)點(diǎn)的單票成本/收入分布情況。

▲散點(diǎn)圖

單單這樣看，可能看不出什么，如果加兩條平均線就不一樣了。

加了平均線，就知道哪些網(wǎng)點(diǎn)高于平均線，哪些低于平均線。但網(wǎng)點(diǎn)那么多，總不能逐個(gè)點(diǎn)擊查看是哪個(gè)大區(qū)的，給散點(diǎn)加上顏色后，就很有意義了。

通過(guò)此圖，可以看出哪些大區(qū)單票利潤(rùn)較低，急需提升，比如廣泛聚集于右下角的第四大區(qū)，單票收入低于平均線，單票成本卻高于平均線。

三個(gè)變量 – 氣泡圖

大家都知道，網(wǎng)點(diǎn)總利潤(rùn)除了和單票利潤(rùn)有關(guān)，還和體量（即收件量）有關(guān)，用散點(diǎn)的面積大小表示收件量，就變成了氣泡圖。

▲氣泡圖

結(jié)合地圖 – 熱力圖

氣泡圖與地圖結(jié)合可演變?yōu)闊崃D。通過(guò)熱力圖，能看到哪些網(wǎng)點(diǎn)收派件量較多，需進(jìn)行資源調(diào)配。

▲熱力圖

以上是 “分布&聯(lián)系”類的常用圖表

▼可歸納如下▼

小結(jié)

當(dāng)我們拿到數(shù)據(jù)后，先提煉關(guān)鍵信息，明確數(shù)據(jù)關(guān)系及主題，再選擇合適的圖表進(jìn)行可視化。希望下圖能給各位一些參考（結(jié)合可視化專家Andrew Abela的圖表選擇指南，進(jìn)行了簡(jiǎn)化調(diào)整）。

數(shù)據(jù)可視化設(shè)計(jì)只要多練習(xí)、多總結(jié)，總有一天會(huì)得心應(yīng)手的！

作者：SF_UED，順豐科技用戶體驗(yàn)設(shè)計(jì)部，簡(jiǎn)稱SFUED （SF. Tech User Experience Design）是順豐科技的核心設(shè)計(jì)團(tuán)隊(duì)，負(fù)責(zé)順豐相關(guān)產(chǎn)品的用戶體驗(yàn)設(shè)計(jì)與研究。微信公眾號(hào)：SFUED

本文由 @SF_UED 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。