作者 | Destiny

來源 | 木東居士

0x00 前言

第1篇文章《數據可視化過程》發出后，通過居士收到一些讀者的反饋，大家的共同心聲是，希望在后續的文章中，結合具體的業務場景，多分享一些實例及其優缺點。多謝大家的意見，也感謝大家的支持，后續會不斷改進，輸出更多干貨。

在數據可視化的過程當中，根據數據間的關系選擇合適的圖表，是保證數據可視化效果的關鍵。今天這篇文章，主要分享以下兩類數據關系的可視化：

• 時序數據可視化；
• 比例型數據可視化；

0x01 時序數據可視化

時序數據，是指任何隨著時間而變化的數據，如一天中氣溫隨時間的變化。

要進行時序數據的可視化，我們首先需要了解「時間」所具有的特征：

• 有序性：時間都是有序的，事件之間有先后順序。
• 周期性：許多自然或商業現象都具有循環規律，如季節等周期性的循環。
• 結構性：時間的尺度可以按照年、季度、月、日、小時、分鐘、秒等去切割。

「時間數據」按是否連續可分為：離散型時間和連續型時間兩類，時間類型的差異決定了圖表的表現形式也不同。

1. 離散時間的可視化

離散時間：數據來源于具體的時間點或者時間段，且時間數據的可能取值是有限的。

對于分布在離散時間的數據的可視化，可以采用柱狀圖、堆疊柱狀圖、散點圖來表示，下面分別來看下三種圖形來進行離散時間可視化的適用場景和不適用場景。

（1）單一柱狀圖

1）適用場景

• 適合表示離散時間數據的趨勢，且數據條個數一般不超過12條。
• 適用于單類別數據的時間趨勢表示，即系列值單一的數據。

2）不適用場景

• 不適合展示連續時間的變化趨勢。
• 不適合數據條過多的離散時間的趨勢展示。

（2）并列柱狀圖

單一柱狀圖，是表示某一系列數值在離散時間上的可視化方式。當需要對比某一離散時間上的多個系列，以及展示隨時間的變化趨勢時，并列柱狀圖是一種選擇。

但是要注意一點，并列柱狀圖的屬性系列，通常不能超過3條，否則圖表橫向空間會比較擁擠，展示的效果也不好。

（3）堆疊柱狀圖

單一柱狀圖，是表示各個離散時間點總體數值的一個方式。但是，當我們想知道各個離散時間點總體的構成部分，是如何隨著時間而變化的，這個時候，就需要引入堆疊柱狀圖。

堆疊柱狀圖，按照堆疊的部分，展示的是實際體量還是相對體量，可以分為兩類：

• 普通堆疊柱狀圖：展示實際體量。
• 百分比堆疊柱狀圖：展示相對體量。

1）普通堆疊柱狀圖

假設某電影院想分析，2019年上半年個月的票房情況，同時也想知道各個月的國產片和外國片共貢獻的票房分別為多少，這種情況下，我們可以用普通的堆疊柱狀圖來表示，具體如下：

普通堆疊柱狀圖，整體的構成部分，最好不要超過5項。若實際構成項大于5個時，需要做適當的歸類，以保證圖表重點突出。

2）百分比堆疊柱狀圖

若影院想知道上半年各月，國產片和外國片的貢獻占比隨時間的變化情況，這個時候就可以使用百分比堆疊柱狀圖。

（3）散點圖

散點圖，通常用來表示兩個變量間的相關關系。在表示離散時間數據時，其表達的是某一變量隨時間的變化關系。

柱狀圖是用高度作為數值的映射，而散點圖則是用位置來作為數值的視覺通道。

注意：當有多個系列列時，不不適合?用散點圖來表示時間趨勢，因為多個系列列的圓點同時出現時，很難將其中某個系列列視為?一個整體，?比較起來很吃?力力。此時除了了把顏?色作為映射的視覺通道之外，也可以給各個系列列選擇不不同的數據標記，如正?方形、圓、三?角形、菱形等。

2. 連續時間

連續時間：連續時間數據的可視化和離散時間數據的可視化相似。因為就算數據是連續的，我們采集的數據大部分還是離散且有限的。

連續型數據和離散型數據，在數據結構上并沒有差別，區別在于它們所反映的真實世界的數據是否是不斷變化的。如一天當中的氣溫變化，就是連續型數據，因為你在一天中的任何時候都可以進行測量，且氣溫在不同時刻是變化的。

（1）折線圖

折線圖用于顯示數據在一個連續的時間間隔或者時間跨度上的變化。在折線圖中，一般水平軸（X軸）用來表示時間的推移，并且間隔相同；而垂直軸（Y軸）代表不同時刻的數據的大小。

折線圖主要包括三類：點線圖、折線圖、曲線圖。

• 點線圖：當數據集中的數據項有限，不超過12個時，采用此種點線圖比較合適。有時候，對應日期的數據點上方，會直接顯示數值。
• 折線圖：當數據集中的數據項比較多，大于12條時，采用點線圖，會讓整條線上的點很密集，影響看數據的趨勢，此時采用折線圖是不錯的選擇。
• 曲線圖：相比于折線圖，曲線圖相鄰節點的連線更加平滑，可視化效果也更加美觀。

從點線圖中，可以觀察出4種趨勢：長期性趨勢、季節性趨勢、周期性趨勢、不規則波動。

（2）階梯圖

階梯圖常用來表示，某兩個相鄰的時間節點，后一個節點的數據相對于前一個節點數據的升降變化，常用于商品價格變動、股票價格波動、稅率變化等場景中。

在階梯圖中，有三個關鍵的值：

a.前一時間節點數值；

b.當前時間節點數值；

c.當前節點較前一節點的差值；

（3）擬合曲線圖

若我們想要研究數據隨時間的變化所表現出來的整體趨勢時，可以根據多個離散點（T1,D1）、（T2,D2）….、（Tn,Dn），擬合一個最接近的一個連續函數關系。

擬合曲線圖，在數據預測中應用較多。比如，某一電商網站要預測今年雙十一的GMV，那么它可以根據往年每月的交易額趨勢，今年每月與去年同期的數據等多個變量，去擬合出交易額與時間等其他因素所滿足的關系。具體要考慮哪些因素，這個和數據模型的搭建息息相關，此處不做延伸。

0x02 比例型數據可視化

比例數據，通常是按照類別、子類別、群體進行的劃分。對于比例型數據，我們進行可視化的目的，是為了尋找整體中的最大值、最小值、整體的構成分布、以及各部分之間的相對關系。

1.餅圖

當構成整體的數據項較少時，采用餅圖是一種不錯的選擇，餅圖是通過角度來映射各類別對應的數值。

但是，現實的數據情況是，一個維度下的屬性值數量，通常會比較多，如果在餅圖中全部展示出來，一方面會使整個餅圖顯得雜亂，沒有重點，另一方面也失去了可視化的美感。

因此，對于餅圖來說，建議扇區個數最大值在5～7個之間。當數據項超過一定數量時，可以按照占比，把排名最末的幾項歸位「其他」。我通常的做法是：

• 當數據項n<=6時，直接顯示各扇區原始類別的名稱。
• 當數據項n>6時，直接顯示占比排名TOP5扇區的原始類別名稱，剩余的數據項則歸為「其他」。

當然，餅圖中最大可展示的分類項個數可以根據實際情況確定，但是對于一個數據產品內部，建議標準統一，這樣前后端同學會在進行數據、前端開發工作時，可以進行標準化，提高復用性和開發效率。

2.環形圖

餅圖通過各扇區角度去映射各分類項對應的數值，「環形圖」則通過各弧形的長度來衡量數值。

環形圖中心部位是空的，可以放置標簽、整體數值、平均數值或其他內容。環形圖中，數據項的分類和餅圖類似，就不在贅述。

3.百分比堆疊柱狀圖

當比例數據中存在多個父系列，每個父系列又由多個子類構成，且各個系列的子類相同時，此時展示比例數據，可以采用百分比堆疊柱狀圖。

• 各個系列對應的柱形條的高度是相同的，頂部刻度都為100%。
• 每根柱形條內部，各子項柱形條的高度，代表在該系列中的占比。
• 當各系列的子類數目較少時，可以直接在矩形內部展示占比；當數目較多時，建議隱藏。
• 當各系列的子類目較多時，為了保證重點突出和視覺效果，需要對子類目進行歸類，歸類方法參照餅圖。

4.百分比堆疊面積圖

當比例數據中存在多個父系列，且父系列的數據類型為時間，要分析父系列的各構成部分占比隨時間的變化趨勢，此時可以采用堆疊面積圖來表示比例關系的變化。

如果從某一點上對堆疊面積圖進行垂直切片，那么就可以得到該時間段上的比例分布情況。

5.矩形樹圖

矩形樹圖，是一種基于面積的可視化方法。外部矩形代表父級類別，內部矩形代表子類別。相比于其他表示比例型的數據，矩形樹圖更適合展示具有樹狀結構的數據。

樹狀結構，簡單理解，就是首先按一級分類來觀測各構成部分的比例，然后再看某個一級分類下，是由哪些二級分類構成的，依次類推，逐步細化，可以直到葉子結點。

若用矩形樹圖來表示具有多個層級結構的比例數據，通常需要使用一些交互方式來輔助數據的展示。比如，單擊對應區塊進行下鉆，懸停展示具體數值和比例，使用面包屑進行層級的跳轉等。

0xFF 總結

在可視化圖表選擇之初，我們首先要明確的是，我們希望從圖表中獲取什么信息。然后，根據數據的特征、數據之間的關系，選擇合適的可視化圖表。

如上所述：

• 時序數據，主要目的是研究數據隨時間的變化，這種變化包括總量的變化、構成部分的變化、以及變化的趨勢和規律。
• 比例數據，區別于其他數據類型的一個關鍵，在于它是為了尋求整體中的各個構成部分，及其相互關系。