為什么“一圖勝千言”呢?如果語言是一維的，那么圖像就是二維或多維的， 降維打擊體現(xiàn)在一個(gè)“勝”字。如果將圖像使用自然語言進(jìn)行表達(dá)看作一種數(shù)據(jù)降維的方式， 那這種降維能力可能是需要訓(xùn)練的。不同的人面對同一幅圖可能有不同的表達(dá)，對于數(shù)據(jù)產(chǎn)品而言， 有沒有數(shù)據(jù)與圖像之間的內(nèi)在關(guān)系模式呢?

習(xí)慣上， 我們會(huì)學(xué)習(xí)圖表的特點(diǎn)，進(jìn)而找到不同圖表適用于表達(dá)哪些數(shù)據(jù)類型。但是，在工作中， 我們經(jīng)常遇到的是已知數(shù)據(jù)指標(biāo)，如何在Dashboard上呈現(xiàn)這些數(shù)據(jù)。不論是產(chǎn)品經(jīng)理、設(shè)計(jì)師還是工程師，理解怎樣的數(shù)據(jù)通過怎樣的圖像表達(dá)比較合適都是有意義的。

數(shù)據(jù)類型是老生常談，從數(shù)據(jù)維度來看，有單變量和多變量，從變量自身來看，有離散和連續(xù)的區(qū)別。從數(shù)據(jù)類型出發(fā)，面向需要表達(dá)的指標(biāo)，老碼農(nóng)嘗試對常見的可視化圖例進(jìn)行了梳理。

一、單變量的可視化

如果我們關(guān)注單一變量的指標(biāo)變化，可以優(yōu)先考慮直方圖以及箱形圖。

1.直方圖

直方圖(Histogram)，又稱質(zhì)量分布圖，是一種統(tǒng)計(jì)報(bào)告圖，由一系列高度不等的縱向條紋或線段表示數(shù)據(jù)分布的情況。

數(shù)據(jù)類型：單變量的序列。

使用場景：表達(dá)單變量的序列分布。

表達(dá)形態(tài)：數(shù)據(jù)被分為相等的區(qū)間，高度一般表達(dá)數(shù)據(jù)的頻率。

局限：不適合跨數(shù)據(jù)組的比較。

2.箱形圖

箱形圖(Box-plot)又稱為盒式圖或箱線圖，是一種用作顯示一組數(shù)據(jù)分散情況資料的統(tǒng)計(jì)圖。因形狀如箱子而得名。在各種領(lǐng)域也經(jīng)常被使用，常見于品質(zhì)管理。

數(shù)據(jù)類型：單變量的連續(xù)值

使用場景：數(shù)據(jù)的分布及異常值檢測

表達(dá)形態(tài)：用矩形代表4分位間距，中值由框內(nèi)的一條線表示，異常值繪制為單個(gè)點(diǎn)。

局限：當(dāng)數(shù)據(jù)是分類的或顯示隨時(shí)間變化的趨勢時(shí)，避免使用箱形圖。

二、兩個(gè)變量的可視化

如果關(guān)注兩個(gè)變量關(guān)系，我們可以優(yōu)先考慮散點(diǎn)圖及其變體氣泡圖。

3.散點(diǎn)圖

散點(diǎn)圖(scatter plot)一般用在回歸分析中，數(shù)據(jù)點(diǎn)在直角坐標(biāo)系平面上的分布圖，散點(diǎn)圖表示因變量隨自變量而變化的大致趨勢，據(jù)此可以選擇合適的函數(shù)對數(shù)據(jù)點(diǎn)進(jìn)行擬合。

數(shù)據(jù)類型：兩個(gè)連續(xù)變量

使用場景：表達(dá)兩個(gè)連續(xù)變量的關(guān)系

表達(dá)形態(tài)：一個(gè)變量代表橫軸，另一個(gè)變量代表縱軸

局限：不適用于相關(guān)性不強(qiáng)的數(shù)據(jù)，也不適合比較多個(gè)類別。

氣泡圖

氣泡圖(bubble chart)是可用于展示三個(gè)變量之間的關(guān)系，一般可視為散點(diǎn)圖的變體。

使用場景：表達(dá)兩個(gè)變量在第三個(gè)維度之間的關(guān)系

表達(dá)形態(tài)：氣泡圖與散點(diǎn)圖相似， 但加入了一個(gè)表示大小的變量，氣泡由大小指示相對重要的程度

局限：氣泡的大小不能沒有意義，且不適合比較多類別的更多維度。

對于更一般的情況，多個(gè)變量的數(shù)據(jù)可以劃分成離散型和連續(xù)型兩種。

三、多個(gè)離散變量的可視化

多個(gè)離散變量一般表達(dá)不同的類別，不同類別之間的關(guān)系一般包括：

類別標(biāo)量大小

內(nèi)部組成

類別相對于整體的占比

類別之間的層次關(guān)系

類別之間的線性依賴

類別之間的多屬性對比

4.柱狀圖

柱狀圖(bar chart)，又稱長條圖、條圖、條狀圖、棒形圖，是一種以長方形的長度為變量的統(tǒng)計(jì)圖表。

數(shù)據(jù)類型：類別數(shù)值

使用場景：跨類別的數(shù)量比較

表達(dá)形態(tài)：使用長方條表示數(shù)據(jù)，長度代表數(shù)量，可以是垂直方向的，也可以是水平方向的。

局限：不適合類別太多的場景，也不適合連續(xù)數(shù)據(jù)的表達(dá)。

堆積柱狀圖

堆積柱形圖(stacked bar chart)的特點(diǎn)是它能將每根柱子進(jìn)行分割,可以顯示大類目下的細(xì)分類目占比情況。

數(shù)據(jù)類型：類別及內(nèi)部元素的數(shù)值

使用場景：表達(dá)不同類別的對比，包括各類別內(nèi)部的組成

表達(dá)形態(tài)：堆疊的矩形來表示類別，里面的小方塊表示每個(gè)類別內(nèi)部的元素，小方塊的長度代表元素的值，堆疊而成矩形代表類別的值。

局限：每個(gè)類別內(nèi)的元素不能太多，一般不大于6。

5.多納圖

實(shí)際上，餅圖是更為常見的，英文為Sector Graph，又名Pie Graph。餅圖顯示一個(gè)數(shù)據(jù)系列 中各項(xiàng)的大小與各項(xiàng)總和的比例。多納圖(donut chart)，是餅圖的一種變體。

數(shù)據(jù)類型：類別的占比。

使用場景：表達(dá)不同類別的百分比。

表達(dá)形態(tài)：餅圖的另一種表達(dá)，每一個(gè)局部環(huán)代表了該類別的總體占比。

局限：不適合類別太多以及跨組比較。

6.樹狀圖

樹形圖(tree map)是樹的數(shù)據(jù)結(jié)構(gòu)的圖形表示形式，以父子層次結(jié)構(gòu)來組織對象，是枚舉法的一種表達(dá)方式。

數(shù)據(jù)類型：層次型的類別。

使用場景：表達(dá)數(shù)據(jù)的層級關(guān)系以及占比。

表達(dá)形態(tài)：一般用線條和節(jié)點(diǎn)表示。這里給出的是一種變體，以嵌套的矩形表達(dá)數(shù)據(jù)，矩形大小表達(dá)占比的值，另外，顏色可以表達(dá)額外的信息。

局限：不適合類別過多的場景， 也不適用于離散變量之間沒有層級關(guān)系的場景。

7.雷達(dá)圖

雷達(dá)圖(Radar Chart)，也稱為蜘蛛圖，星圖，網(wǎng)圖，極坐標(biāo)圖或Kiviat圖，是以從同一點(diǎn)開始的軸上表示的三個(gè)或更多個(gè)定量變量的二維圖表形式來顯示多變量數(shù)據(jù)的圖形方法。軸的相對位置和角度通常是無信息的。

數(shù)據(jù)類型：多變量的多個(gè)維度。

使用場景：表達(dá)復(fù)雜變量的整體性能，以及多個(gè)維度的整體特性。

表達(dá)形態(tài)：多個(gè)軸代表多個(gè)維度，不同顏色線代表不同的變量，軸上的點(diǎn)組成的面積形狀代表整體衡量。

局限：不適用于低維場景，一般維數(shù)大于4，也不適用于變量太多的場景。

8.漏斗圖

漏斗圖(funnel chart)類似于漏斗的形狀，其中每個(gè)部分逐漸變窄。分段垂直排列，以顯示層次結(jié)構(gòu)。在漏斗圖中，每個(gè)分段對應(yīng)于順序過程中的一個(gè)步驟或階段。它們說明了數(shù)據(jù)點(diǎn)在各個(gè)階段中的進(jìn)展。

數(shù)據(jù)類型：具有階段性的類別。

使用場景：流程的處理，例如銷售、轉(zhuǎn)化和客戶旅程等。

表達(dá)形態(tài)：每個(gè)遞減的梯形代表一個(gè)類別的階段，每個(gè)梯形的比例寬度代表了該類別的值。

局限：不適合數(shù)據(jù)連續(xù)的場景，以及非單一順序流程。

四、多個(gè)連續(xù)變量的可視化

對于連續(xù)型的多變量，一般應(yīng)用于時(shí)間序列分析。

9.線狀圖

線狀圖(line chart)把特定時(shí)間單位內(nèi)的變量值以點(diǎn)的形式標(biāo)在坐標(biāo)系中，并連點(diǎn)成線。

數(shù)據(jù)類型：時(shí)間序列的數(shù)據(jù)。

使用場景：表達(dá)數(shù)據(jù)的趨勢。

表達(dá)形態(tài)：點(diǎn)線形式，橫軸表達(dá)時(shí)間，縱軸表達(dá)數(shù)據(jù)的值。

局限：不適用于數(shù)據(jù)之間沒有關(guān)系或沒有邏輯順序。

面積圖

面積圖(area chart)是線狀圖的擴(kuò)展，又稱區(qū)域圖，強(qiáng)調(diào)數(shù)量隨時(shí)間而變化的程度，也可用于引起人們對總值趨勢的注意。

數(shù)據(jù)類型：多個(gè)連續(xù)的變量。

使用場景：數(shù)據(jù)隨時(shí)間的大小或容量變化。

表達(dá)形態(tài)： 現(xiàn)狀圖的變體，線與橫軸之間的面積強(qiáng)調(diào)了變量的體積或大小。

局限：不適用于多變量序列有交叉重疊的場景。

10.熱力圖

熱力圖(heatmap)又稱熱圖，以特殊高亮的形式顯示某一區(qū)域。對于一般網(wǎng)站而言，常見熱圖共有點(diǎn)擊熱圖、注意力熱圖、分析熱圖、對比熱圖、分享熱圖、浮層熱圖和歷史熱圖等七種。

數(shù)據(jù)類型：多個(gè)連續(xù)的變量。

使用場景：以顏色密度表達(dá)變量之間的關(guān)系，典型的是兩個(gè)變量之間的關(guān)系。

表達(dá)形態(tài)：兩個(gè)變量分別是x、y軸，顏色深淺代表對應(yīng)點(diǎn)的值的大小。

局限：不適用于變量無關(guān)的場景，以及離散變量及其對比。

五、小結(jié)

在dashboard的設(shè)計(jì)中，有太多的可視化圖例可以選擇，而且很方便通過echart等前端庫來實(shí)現(xiàn)。

可視化表達(dá)的選擇方式依賴于所要呈現(xiàn)的數(shù)據(jù)及指標(biāo)類型，這涉及一個(gè)相對簡單的數(shù)據(jù)建模過程。我們可以考慮是單變量還是多變量中的相關(guān)指標(biāo)，然后根據(jù)數(shù)據(jù)是否連續(xù)型做進(jìn)一步的篩選，進(jìn)而選擇相對合適的可視化方法，本文梳理了10個(gè)常見的可視化圖例。當(dāng)然，適用于多變量的可視化方法在一般條件下也可降維使用。