編輯導(dǎo)語：圖表是數(shù)據(jù)展示的常見方法，合理的圖表設(shè)計(jì)可以讓用戶更加清晰地獲取信息，也可以讓業(yè)務(wù)更加順利地推進(jìn)。而不同的業(yè)務(wù)場景下，圖表的具體應(yīng)用也有所差別。本篇文章里，作者總結(jié)了圖表在具體場景下的使用與建議，一起來看一下。

一、第一部分：設(shè)計(jì)思路

設(shè)計(jì)思路主要是看你要展示突出數(shù)據(jù)哪個(gè)方面，是比較結(jié)果、數(shù)據(jù)分布情況、多元素間的聯(lián)系、流程轉(zhuǎn)變變化、展示不同地理位置分布情況還是多元素組成構(gòu)成方面。

1. 比較

突顯值與值之間的不同和相似之處。使用圖形的長度、寬度、位置、面積、角度和顏色來比較數(shù)值的大小，通常用于展示不同分類間的數(shù)值對比，不同時(shí)間點(diǎn)的數(shù)據(jù)對比。

常見圖表：柱狀圖、雙向柱狀圖、氣泡圖、子彈圖、色塊圖、漏斗圖、直方圖、堆疊柱狀圖和詞云等。

1）基于時(shí)間

若是少周期的數(shù)據(jù)建議采用柱狀圖（單個(gè)或少數(shù)分類）或曲線圖（多者分類），若是多周期的數(shù)據(jù)比較建議采用雷達(dá)圖（循環(huán)數(shù)據(jù)）或曲線圖（循環(huán)數(shù)據(jù)）。

柱狀圖

曲線圖

雷達(dá)圖

曲線圖

2）基于分類

若是每個(gè)項(xiàng)目1個(gè)變量則采用條形圖（多項(xiàng)目）或柱狀圖（少數(shù)）或表格或內(nèi)嵌表格的表格，若是每個(gè)項(xiàng)目2個(gè)變量采用不等寬柱狀圖。

條形圖

柱狀圖

內(nèi)嵌表格的表格

不等寬柱狀圖

3）基于數(shù)據(jù)量

若是大量數(shù)據(jù)建議采用詞云。若是少量數(shù)據(jù)采用條形圖。

詞云

條形圖

2. 分布

突出顯示的頻率，數(shù)據(jù)分散在一個(gè)區(qū)間或分組。使用圖形的位置、大小、顏色的漸變程度來表現(xiàn)數(shù)據(jù)的分布，通常用于展示連續(xù)數(shù)據(jù)上數(shù)值的分布情況。

常見圖表：直方圖、熱力圖、散點(diǎn)圖、分布曲線圖、氣泡圖、箱型圖或點(diǎn)描法地圖。

1）單變量

采用直方圖（少數(shù)據(jù)點(diǎn)）、正態(tài)分布圖、熱力圖或點(diǎn)描法地圖（多數(shù)據(jù)點(diǎn)）。

直方圖

熱力圖

點(diǎn)描法地圖

2）2個(gè)變量

采用散點(diǎn)圖或色塊圖或者箱型圖。

散點(diǎn)圖

色塊圖

箱型圖

3）3個(gè)變量

采用多變量采用曲面圖。

曲面圖

3. 聯(lián)系

顯示多元素?cái)?shù)據(jù)之間相互關(guān)系，通常用于表示數(shù)據(jù)之間的相關(guān)性。

常見圖表：散點(diǎn)圖、氣泡圖或?；鶊D等。

1）2個(gè)變量

采用散點(diǎn)圖。

散點(diǎn)圖

2）3個(gè)變量

采用氣泡圖。

氣泡圖

4. 流程

顯示數(shù)據(jù)流轉(zhuǎn)情況，一般流程都會(huì)呈現(xiàn)出多個(gè)環(huán)節(jié)，每個(gè)環(huán)節(jié)之間會(huì)有相應(yīng)的流量關(guān)系，這類圖形可以很好地表示這些關(guān)系，采用漏斗圖和?；鶊D。

常見圖表：漏斗圖和?；鶊D等。

流程流轉(zhuǎn)

5. 地圖

通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置，通常來展示數(shù)據(jù)在不同地理區(qū)域上的分布情況，一般采用帶氣泡的地圖、分級(jí)統(tǒng)計(jì)地圖或點(diǎn)描述地圖。

常見圖表：帶氣泡的地圖、分級(jí)統(tǒng)計(jì)地圖或點(diǎn)描述地圖。

突顯地理位置分布

帶氣泡的地圖

分級(jí)統(tǒng)計(jì)地圖

點(diǎn)描述地圖

6. 構(gòu)成

同一維度多元素?cái)?shù)據(jù)組成構(gòu)成分布。

常見圖表：餅狀圖、瀑布圖、環(huán)圖、堆疊面積圖或堆疊柱狀圖等。

1）靜態(tài)

若是占總體比例采用餅狀圖（數(shù)據(jù)相差比較大）、環(huán)圖（數(shù)據(jù)相差比較大）或玫瑰圖（數(shù)據(jù)相差不大），若是累計(jì)或者扣減到總計(jì)采用瀑布圖。

餅圖

環(huán)圖

玫瑰環(huán)圖

瀑布圖

2）隨時(shí)間變化

若是少數(shù)周期采用堆積百分比柱狀圖（僅相對差異）或堆積柱狀圖（相對或絕對差異），若是多周期采用堆積百分比面積圖（僅相對差異）或堆積面積圖（相對或絕對差異）。

百分比柱狀圖

堆疊柱狀圖

百分比堆疊面積圖

堆疊面積圖

二、第二部分：圖表使用說明

1. 折線圖

1）基礎(chǔ)折線圖

① 用法

• 折線圖主要用來展示數(shù)據(jù)隨著時(shí)間推移的趨勢或變化；
• 折線圖非常適合用于展示一個(gè)連續(xù)的二維數(shù)據(jù)例：如某網(wǎng)站訪問人數(shù)或商品銷量價(jià)格的波動(dòng)；
• 折線圖除了展示某個(gè)事情發(fā)展的趨勢，還可以用來比較多個(gè)不同的數(shù)據(jù)序列。例：如某網(wǎng)站訪問人數(shù)或商品銷量價(jià)格的波動(dòng)。

② 建議

• 使用實(shí)線繪制數(shù)據(jù)線；
• 建議不要繪制4條以上的折線（線都折疊在一起并且又沒有明顯的對比，整張圖表就會(huì)混亂并難以閱讀）；
• 不建議使用過多的裝飾來區(qū)分圖表；
• 展示折線圖的數(shù)據(jù)時(shí)，要避免刻意的歪曲趨勢。

2）面積圖

① 用法

用法用來展示隨著連續(xù)時(shí)間的推移數(shù)據(jù)的變化趨勢。

② 建議

• 避免重疊，若重疊少或中等，以通過將顏色和透明度設(shè)置為適當(dāng)?shù)闹担糁丿B多，改用堆疊面積圖；
• 適合用來展示二到三組數(shù)據(jù)，不超過4組；
• 當(dāng)數(shù)字偏差較小時(shí)，區(qū)域是模糊不清的，此時(shí)不太適合使用面積圖展示用來比較在一個(gè)區(qū)間內(nèi)的多個(gè)變量。

3）堆疊面積圖

① 用法

• 用來比較在一個(gè)區(qū)間內(nèi)的多個(gè)變量；
• 有多個(gè)數(shù)據(jù)系列，并想分析每個(gè)類別的部分到整體的關(guān)系，并展現(xiàn)部分量對于總量的貢獻(xiàn)時(shí)，使用堆積面積圖是非常合適的選擇。

② 建議

• 類別數(shù)量越多，重疊越多，可以用堆疊面積圖；
• 不能用于包含負(fù)值的數(shù)據(jù)的展示；
• 把變化量較大的數(shù)據(jù)放在上方，變化量較小的數(shù)據(jù)放在下方會(huì)獲得更加的展示效果。

2. 柱狀圖

1）基礎(chǔ)柱狀圖

① 用法

• 過使用水平或垂直方向柱子的高度來顯示不同類別的數(shù)值；
• 類型：橫向、縱向（當(dāng)圖表的數(shù)據(jù)標(biāo)簽很長或者有超過10個(gè)項(xiàng)目進(jìn)行比較時(shí)，適用縱向）。

② 建議

• 避免使用太多顏色；
• 柱狀圖柱子間的寬度和間隙要適當(dāng)；
• 不建議使用三維柱狀圖，數(shù)值會(huì)不太精確。

2）雙向柱狀圖

① 用法

用法用于展示包含相反含義的數(shù)據(jù)的對比（例:：一周內(nèi)個(gè)人收入和支出的統(tǒng)計(jì)）。

② 建議

• 使用差值較大的顏色，突出對比；
• 不要在0基線的右邊畫負(fù)值的水平條行圖或在0基線的上邊畫負(fù)值的柱子，以免和常識(shí)違背造成誤解；
• 不建議使用三維柱狀圖，數(shù)值會(huì)不太精確。

3）堆疊柱狀圖

用法

堆疊柱圖則是一個(gè)個(gè)疊加起來的。它可以展示每一個(gè)分類的總量，以及該分類包含的每個(gè)小分類的大小及占比。

4）分組柱狀圖

用法

當(dāng)兩個(gè)或多個(gè)數(shù)據(jù)序列并排顯示并在同一軸上的類別下分組時(shí)，將使用分組柱狀圖。

3. 餅圖

① 用法

• 餅圖主要用于展現(xiàn)不同類別數(shù)值相對于總數(shù)的占比情況。
• 用法(圖中每個(gè)分塊(扇區(qū)）的弧長表示該類別的占比大小，所有分塊數(shù)據(jù)總和為100%。
• 呈現(xiàn)的不是具體的數(shù)據(jù)，而是該數(shù)據(jù)相對于總數(shù)的占比

② 建議

• 呈現(xiàn)的不是具體的數(shù)據(jù)，而是該數(shù)據(jù)相對于總數(shù)的占比；
• 我們很難比較一個(gè)分塊過多的餅圖的數(shù)據(jù)，建議盡量將餅圖分塊數(shù)量控制在五個(gè)以內(nèi)（建議較小部分合并為“其他”）；
• 當(dāng)各類別數(shù)據(jù)占比較接近時(shí)，我們很難對比出每個(gè)類別占比的大小。建議選用柱狀圖或南丁格爾玫瑰圖；
• 大多數(shù)人視覺習(xí)慣是按照順時(shí)針和自上而下的順序去觀察，因此在繪制餅圖時(shí)，建議從12點(diǎn)鐘開始沿順時(shí)針右邊第一個(gè)分塊繪制餅圖最大的數(shù)據(jù)分塊；
• 三維的餅圖歪曲了各分塊相對于整體的比例關(guān)系，會(huì)造成錯(cuò)誤及理解上的困擾。

4. 散點(diǎn)圖

① 用法

• 顯示數(shù)據(jù)的兩個(gè)變量（X和Y軸）之間的關(guān)系，數(shù)據(jù)顯示為點(diǎn)的集合，適合用于在不考慮時(shí)間的情況下比較大量的數(shù)據(jù)點(diǎn)；
• 散點(diǎn)圖通常用來識(shí)別兩個(gè)變量之間的相關(guān)性或用來觀察他們的關(guān)系，從而發(fā)現(xiàn)某種趨勢，有效的說明兩個(gè)變量之間的相關(guān)性，但是并不能有力地證明其中存在因果關(guān)系（正相關(guān)、負(fù)相關(guān)和不相關(guān)）；
• 查找異常值或理解數(shù)據(jù)分布也很有效。

② 建議

• 足夠多的數(shù)據(jù)；
• 數(shù)據(jù)含不同系列，顏色區(qū)分。

5. 氣泡圖

① 用法

• 與散點(diǎn)圖相同類型；
• 散點(diǎn)圖不同的是，氣泡圖是一個(gè)多變量圖，它增加了第三個(gè)數(shù)值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值。

② 建議

• 當(dāng)數(shù)據(jù)具有3個(gè)序列、特征及相關(guān)值（例：代碼提交的日期、具體的時(shí)間點(diǎn)的氣泡圖，氣泡的大小說明了提交的代碼量、Punch Card of github）；
• 氣泡圖還經(jīng)常用于和地圖結(jié)合，其中，x軸和y軸是經(jīng)度和緯度的數(shù)據(jù)定位，氣泡的大小可以表明該位置數(shù)量的多少。

6. 雷達(dá)圖

用法

適用于顯示三個(gè)或更多的維度的變量。

7. 漏斗圖

① 用法

• 漏斗圖將數(shù)據(jù)呈現(xiàn)為幾個(gè)階段，每個(gè)階段的數(shù)據(jù)都是整體的一部分，從一個(gè)階段到另一個(gè)階段數(shù)據(jù)自上而下逐漸下降，所有階段的占比總計(jì)100%。
• 漏斗圖呈現(xiàn)的也不是具體的數(shù)據(jù)，而是該數(shù)據(jù)相對于總數(shù)的占比、漏斗圖不需要使用任何數(shù)據(jù)軸。

② 建議

• 對兩個(gè)基于統(tǒng)一事情前后的兩份數(shù)據(jù)，使用疊加兩個(gè)漏斗圖進(jìn)行對比 如：預(yù)期與實(shí)現(xiàn)值；
• 左右對比的漏斗圖，同時(shí)分析兩個(gè)項(xiàng)目的轉(zhuǎn)化情況；
• 漏斗圖不是表示各個(gè)分類的占比情況，而是展示數(shù)據(jù)變化的一個(gè)邏輯流程。

8. 儀表盤

① 用法

以直觀的表現(xiàn)出某個(gè)指標(biāo)的進(jìn)度或?qū)嶋H情況。示：類似于撥號(hào)/速度計(jì)上的讀數(shù)的數(shù)據(jù)，是一種擬物化的展示形式。

② 建議

適合在量化的情況下顯示單一的價(jià)值和衡量標(biāo)準(zhǔn)，不適合用于比較不同變量或者趨勢的。

9. 詞云

① 用法

• 快速感知最突出的文字；
• 快速定位按字母順序排列的文字中相對突出的部分。

② 建議

• 超過 30 條數(shù)據(jù)（若當(dāng)數(shù)據(jù)的區(qū)分度不大時(shí)使用詞云起不到突出的效果，若數(shù)據(jù)太少時(shí)很難布局出好看的詞云）。

10. 水波圖

用法

• 適用于多個(gè)百分比數(shù)據(jù)的呈現(xiàn)；
• 以直觀的表現(xiàn)出某個(gè)指標(biāo)的進(jìn)度或?qū)嶋H情況
• 不局限于圓形，可以自定義圖標(biāo)，讓可視化更加有趣。

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

題圖來自?Unsplash，基于 CC0 協(xié)議