作者 | 鄰川

程序員懂畫圖，一寶變?nèi)龑殹?/span>

本期，菜鳥國(guó)際物流技術(shù)部高級(jí)開發(fā)工程師鄰川將分享他在數(shù)據(jù)可視化圖標(biāo)方面的積累。

常聽到一句話，“能用圖描述的就不用表，能用表就不用文字”。這句話也直接的表明了：在認(rèn)知上，大家對(duì)于圖形的敏感度遠(yuǎn)比文字高。

但同時(shí)我們也面臨著這樣一些問題：

寫 PPT、做 demo 時(shí)，心中有萬千想法和海量數(shù)據(jù)想要去展現(xiàn)，但總是最后還是以文字和枯燥的圖表堆疊呈現(xiàn)了出來，苦于怎么把這些數(shù)據(jù)展現(xiàn)的直觀、性感、一看就懂。

這時(shí)候，在心里怎么想和手上怎么畫之間，差了一座“理解圖表內(nèi)涵”的橋梁了。

常見的圖表選擇原則文章有很多，這里只做簡(jiǎn)單總結(jié)，重點(diǎn)是從逆向來看常見場(chǎng)景選用以及按照數(shù)據(jù)關(guān)系選用，最后是使用中會(huì)遇到的一些常見問題。本文將分為以下幾個(gè)部分：

兩個(gè)優(yōu)秀的數(shù)據(jù)可視化案例

基礎(chǔ)圖形及特點(diǎn)

如何選用圖標(biāo)

常見的問題

兩個(gè)優(yōu)秀的數(shù)據(jù)可視化案例

A.按年齡段分布的美國(guó)人口百分比：

這個(gè) GIF 動(dòng)畫，顯示了隨著時(shí)間推移的人口統(tǒng)計(jì)數(shù)量的變化。這是如何以令人信服的方式呈現(xiàn)一種單一的數(shù)據(jù)的好榜樣。

B.最有價(jià)值的運(yùn)動(dòng)隊(duì)

這是通過疊加數(shù)據(jù)來講述深層故事的一個(gè)例子。

這個(gè)交互由 ColumnFive 設(shè)計(jì)，受福布斯“2014年最具價(jià)值的運(yùn)動(dòng)隊(duì)50強(qiáng)”名單得到的啟發(fā)。但是它不僅將列表可視化，用戶還可以通過它看到每支隊(duì)伍參賽的時(shí)間以及奪得總冠軍的數(shù)量。這為各隊(duì)的歷史和成功提供了更全面的看法。

基礎(chǔ)圖形及特點(diǎn)

接下來給大家介紹下數(shù)據(jù)可視化圖表的基本類型和選用原則，選用正確的數(shù)據(jù)可視化的圖表。

柱形圖（Bar Chart）

優(yōu)勢(shì)：柱形圖利用柱子的高度，能夠比較清晰的反映數(shù)據(jù)的差異，一般情況下用來反映分類項(xiàng)目之間的比較，也可以用來反映時(shí)間趨勢(shì)。

注意：柱形圖的局限在于它僅適用于中小規(guī)模的數(shù)據(jù)集，當(dāng)數(shù)據(jù)較多時(shí)就不易分辨。一般而言，不要超過10個(gè)。

通常來說，柱形圖的橫軸是時(shí)間維度，用戶習(xí)慣性認(rèn)為存在時(shí)間趨勢(shì)。如果遇到橫軸不是時(shí)間維度的情況，建議用顏色區(qū)分每根柱子。

衍生 - 堆疊柱狀圖

不僅可以直觀的看出每個(gè)系列的值，還能夠反映出系列的總和，尤其是當(dāng)需要看某一單位的綜合以及各系列值的比重時(shí)，比如：1-8月倫敦和柏林房產(chǎn)交易筆數(shù)（萬）。

條形圖(Bar Chart)

優(yōu)勢(shì)：條形圖用來反映分類項(xiàng)目之間的比較，適合應(yīng)用于跨類別比較數(shù)據(jù)。在我們需要比較項(xiàng)類的大小、高低時(shí)適合使用條形圖。

折線圖(Line Chart)

優(yōu)勢(shì)：折線圖用來反映隨時(shí)間變化的趨勢(shì)。當(dāng)我們需要描述事物隨時(shí)間維度的變化時(shí)常常需要使用該圖形。

衍生 - 光滑折線圖（Smooth line chart）

假如關(guān)注的是數(shù)據(jù)反映的整體趨勢(shì)，光滑折線圖最適合，尤其是當(dāng)數(shù)據(jù)波動(dòng)較大時(shí)，采用折線圖會(huì)顯得很亂。

衍生 - 面積圖（Area chart）

折線圖下方填充陰影，構(gòu)成面積圖，如果有兩個(gè)或以上折線圖，在各自折線的下方填充不同顏色的陰影，構(gòu)成堆積面積圖，便于了解折線的相對(duì)占比

餅圖（Pie Chart）

注意：餅圖是一種應(yīng)該避免使用的圖表，因?yàn)槿庋蹖?duì)面積大小不敏感。是最容易被誤用的。但在具體反映某個(gè)比重的時(shí)候，配上具體數(shù)值，會(huì)有較好的效果。

在需要描述某一部分占總體的百分比時(shí)，適合使用餅圖。例如：占據(jù)公司全部資金一半的兩個(gè)渠道；某公司員工的男女比例等。

而需要比較數(shù)據(jù)時(shí)，尤其是比較兩個(gè)以上整體的成分時(shí)，請(qǐng)務(wù)必使用條形圖或柱形圖，切勿要求看圖人將扇形轉(zhuǎn)換成數(shù)據(jù)在餅圖間相互比較，因?yàn)槿说娜庋蹖?duì)面積大小不敏感，會(huì)導(dǎo)致對(duì)數(shù)據(jù)的誤讀。

另外，為了使餅圖發(fā)揮最大作用，在使用中一般不宜超過6個(gè)部分，如需要表達(dá)6個(gè)以上的部分，也請(qǐng)使用條形圖，扇形邊個(gè)數(shù)過多，會(huì)導(dǎo)致餅圖分塊的意義解釋過于困難。不要出現(xiàn)下面這種餅圖。

散點(diǎn)圖(Scatter Chart)

散點(diǎn)圖的數(shù)據(jù)為三維數(shù)據(jù)，使用兩組數(shù)據(jù)構(gòu)成多個(gè)坐標(biāo)點(diǎn)，分析坐標(biāo)點(diǎn)的分布情況，判斷兩個(gè)變量之間的關(guān)聯(lián)或分布趨勢(shì)。

可以用顏色區(qū)分系列，也可以用散點(diǎn)大小定第三維度，這就衍生圖出了氣泡圖。

氣泡圖（Bubble chart）

氣泡圖是散點(diǎn)圖的一種衍生，通過每個(gè)點(diǎn)的面積大小來衡量第三維度，適合三維數(shù)據(jù)的對(duì)比，且需要強(qiáng)調(diào)第三維，超過三維就搞不定。

衍生 - 力學(xué)氣泡圖（Mechanical bubble chart）

雷達(dá)圖（radar chart）

雷達(dá)圖適用于多維數(shù)據(jù)（四維以上），且每個(gè)維度必須可以排序。數(shù)據(jù)點(diǎn)一般6個(gè)左右，太多的話辨別起來有困難。

如何選用圖標(biāo)

在講完了每種圖表的優(yōu)勢(shì)和缺點(diǎn)，使用禁忌外，接下來就要為大家介紹：

按應(yīng)用場(chǎng)景選擇

雖然圖表種類繁多，但是基于使用場(chǎng)景大致可以分為以下幾種情況。

基于這個(gè)大致的應(yīng)用場(chǎng)景，可以初步選出可用的可視化圖，但對(duì)于細(xì)微的選擇差異，在下面會(huì)進(jìn)一步的闡述；對(duì)于單一的可視化圖無法滿足需要時(shí)，就需要考慮組合展示，這里暫且不過多談。

按數(shù)據(jù)關(guān)系選擇

根據(jù)可視化專家 Andrew Abela 對(duì)該數(shù)據(jù)關(guān)系分類方式的提煉，他提出將圖表展示的數(shù)據(jù)關(guān)系分為四類：比較、分布、構(gòu)成和聯(lián)系。下面對(duì)這四種關(guān)系以及應(yīng)用舉例和對(duì)應(yīng)的可視化解決方案做了簡(jiǎn)要的分析。

大部分情況下，我們根據(jù)這份選擇指南按圖索驥就可以找到，方便又輕松，在實(shí)際應(yīng)用中，也存在需要展示多種數(shù)據(jù)關(guān)系的情況，那么對(duì)應(yīng)的圖表類型也是每種關(guān)系對(duì)應(yīng)的基本圖形的綜合運(yùn)用。例如多個(gè)時(shí)間點(diǎn)上構(gòu)成的比較等。

常見問題

最后整理了一些常見問題，供大家在實(shí)際操作中使用。

Q:柱形圖和條形圖都可以表示分類比較，那兩者在使用上有何差異呢？

A:當(dāng)所比較項(xiàng)目的標(biāo)簽文本比較長(zhǎng)時(shí)，柱形圖的橫軸下的標(biāo)簽會(huì)出現(xiàn)重疊或者傾斜，且占用空間大，影響閱讀者的目光移動(dòng)。所以在表示分類時(shí)，如項(xiàng)目數(shù)量較少，使用柱形圖或條形圖均可，如項(xiàng)目_數(shù)量較多_，則建議使用_條形圖_。

Q:柱形圖和折線圖都可以表示時(shí)間序列的趨勢(shì)，如何選擇？

A:一般來說，建議使用折線圖反映趨勢(shì)變化。柱形圖強(qiáng)調(diào)各數(shù)據(jù)點(diǎn)值之間的差異，折線圖則強(qiáng)調(diào)起伏變化的趨勢(shì)；柱形圖更適于表現(xiàn)離散型的時(shí)間序列，_折線圖適合表現(xiàn)連續(xù)型的時(shí)間序列_。所以當(dāng)時(shí)間序列的_數(shù)據(jù)點(diǎn)較少時(shí)，可以使用柱形圖_，而當(dāng)數(shù)據(jù)點(diǎn)較多時(shí)，則建議使用折線圖。

Q:面積圖和折線圖都可以表示時(shí)間序列的趨勢(shì)，兩者之間如何選擇？

A:當(dāng)只展示一個(gè)度量數(shù)據(jù)的趨勢(shì)時(shí)，兩者完全等價(jià)，都可以使用，通常使用折線圖更多。

但是，當(dāng)在大型會(huì)議室展示數(shù)據(jù)時(shí)，即讀圖人離圖表可能較遠(yuǎn)的情況，使用面積圖能讓后排的人看的更清楚。當(dāng)比較多個(gè)度量數(shù)據(jù)的趨勢(shì)時(shí)，建議使用折線圖。如使用面積圖，則存在數(shù)據(jù)序列之間相互遮擋的情況，除了靠近橫軸的那個(gè)數(shù)據(jù)序列外，很難觀察出其他數(shù)據(jù)序列的變化趨勢(shì)。

Q:是不是應(yīng)該避免使用餅圖，能不用就不用？

A:從精確比較數(shù)據(jù)的角度來說，條形圖的確更易于比較數(shù)據(jù)點(diǎn)之間的差異，但每種圖表都有它的長(zhǎng)處和適用場(chǎng)景，餅圖能給我們一種整體和構(gòu)成的印象，適用于表達(dá)“占比”——看到餅圖就讓想起100%，這個(gè)特點(diǎn)是條形圖所沒有的。

但是要盡量避免并列使用兩個(gè)及以上的餅圖，雖然這種用法很常見。例如如下圖，分布展示兩個(gè)國(guó)家在不同年份家庭花銷占比，由于讀圖人很難通過餅圖直接、準(zhǔn)確的看出各個(gè)分類的變化趨勢(shì)和幅度，需要反復(fù)在4個(gè)餅圖之間比較和判斷，如果變化幅度不大，很容易造成誤讀。所以同樣是想表示占比，這種情況使用餅圖就不是很有效的圖表形式。

充分了解每種圖表類型的特征，針對(duì)于實(shí)際的使用場(chǎng)景，判定其數(shù)據(jù)關(guān)系，結(jié)合場(chǎng)景判定圖和圖表類型選擇指南，從而有效的傳遞數(shù)據(jù)信息，讓你的數(shù)據(jù)更加直白，make sense！