本文介紹了數(shù)據(jù)產(chǎn)品經(jīng)理需要懂的常用圖表設(shè)計，并針對19種圖表的定義、適用場景、優(yōu)缺點(diǎn)，進(jìn)行了分析說明。

概述

數(shù)據(jù)產(chǎn)品經(jīng)理在日常產(chǎn)品設(shè)計時經(jīng)常需要設(shè)計一些圖表來對數(shù)據(jù)進(jìn)行更好的展現(xiàn)，也能方便用戶更好的從數(shù)據(jù)中獲得有價值的信息。圖表是將數(shù)據(jù)進(jìn)行可視化展現(xiàn)的圖，用來方便理解大量數(shù)據(jù)以及數(shù)據(jù)間的關(guān)系。數(shù)據(jù)產(chǎn)品經(jīng)理在進(jìn)行圖表設(shè)計時首先進(jìn)行需求的分析，熟悉數(shù)據(jù)并且明確數(shù)據(jù)要展現(xiàn)出來的信息，然后選用合適的圖表來進(jìn)行數(shù)據(jù)的展現(xiàn)。

常用圖表

常用的圖表有很多，在進(jìn)行數(shù)據(jù)產(chǎn)品設(shè)計時需要根據(jù)數(shù)據(jù)選用合適的圖表展現(xiàn)來把數(shù)據(jù)的信息傳達(dá)給用戶，因此，我們需要熟悉每種圖表的定義、適用場景、優(yōu)缺點(diǎn)，這樣才能快速選擇合適的圖表。

1. 柱狀圖

定義：柱狀圖是一種以長方形的長度為變量的統(tǒng)計圖表。長條圖用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數(shù)據(jù)集分析。

適用場景：數(shù)據(jù)集不大時數(shù)據(jù)比較

優(yōu)點(diǎn)：直觀表達(dá)各組數(shù)據(jù)差異性，強(qiáng)調(diào)個體與個體之間的比較。

缺點(diǎn)：不適合大量的數(shù)據(jù)集數(shù)據(jù)展現(xiàn)；不適合表示趨勢。

2. 折線圖

定義：用于顯示數(shù)據(jù)在一個連續(xù)的時間間隔或者時間跨度上的變化，它的特點(diǎn)是反映事物隨時間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征。

適用場景：反映變化趨勢

優(yōu)點(diǎn)：直觀反映數(shù)據(jù)變化趨勢

缺點(diǎn)：數(shù)據(jù)集太小時顯示不直觀

3. 條形圖

定義：條形圖是用寬度相同的條形的高度或長短來表示數(shù)據(jù)多少的圖形。條形圖能夠使人們一眼看出各個數(shù)據(jù)的大小，易于比較數(shù)據(jù)之間的差別。

適用場景：適用于數(shù)據(jù)規(guī)模不大的數(shù)據(jù)展現(xiàn)

優(yōu)點(diǎn)：直觀展現(xiàn)數(shù)據(jù)的差別

缺點(diǎn)：不適用數(shù)據(jù)集較大展現(xiàn)

4. 餅圖

定義：用于表示不同分類的占比情況，通過弧度大小來對比各種分類。餅圖通過將一個圓餅按照分類的占比劃分成多個區(qū)塊，整個圓餅代表數(shù)據(jù)的總量，每個圓弧所在的塊表示該分類占總體的比例大小，所有圓弧所在的塊組成的圓餅等于 100%?？梢院芎玫貛椭脩艨焖倭私鈹?shù)據(jù)的占比分配。

適用場景：對一個對象和整體之間的關(guān)系進(jìn)行比較

優(yōu)點(diǎn)：直觀反映比例關(guān)系，了解數(shù)據(jù)的分布情況

缺點(diǎn)：分類過多，則扇形越小，無法展現(xiàn)圖表；無法直觀進(jìn)行各個數(shù)據(jù)的比較，難以直接對數(shù)據(jù)大小進(jìn)行排序。

5. 散點(diǎn)圖

定義：數(shù)據(jù)點(diǎn)在直角坐標(biāo)系平面上的分布圖，表示因變量隨自變量而變化的大致趨勢。

適用場景：有效幫助查找異常值或了解數(shù)據(jù)的分布情況

優(yōu)點(diǎn)：有一定的數(shù)據(jù)量時展現(xiàn)兩個變量之間是否存在數(shù)量關(guān)聯(lián)趨勢

缺點(diǎn)：數(shù)據(jù)量較少時無法展現(xiàn)關(guān)聯(lián)趨勢

6. 氣泡圖

定義：氣泡圖是顯示變量之間相關(guān)性的一種圖表，使用直角坐標(biāo)系的兩個軸變量、氣泡大小和顏色變量來分析數(shù)據(jù)的規(guī)律。

適用場景：有一定的數(shù)據(jù)量是展現(xiàn)三個變量之前的相關(guān)性，數(shù)據(jù)具有3個序列、特征及相關(guān)值。

優(yōu)點(diǎn)：數(shù)據(jù)量適中時反映數(shù)據(jù)的相關(guān)、分布和聚合。

缺點(diǎn)：數(shù)據(jù)量較小時無法反映數(shù)據(jù)的規(guī)律，數(shù)據(jù)量較大時不便于理解。

7. 面積圖

定義：是隨時間變化而改變范圍的圖表，又稱區(qū)域圖。

適用場景：用于傳達(dá)趨勢的大小，而不是確切的單個數(shù)據(jù)值。

優(yōu)點(diǎn)：更直觀的表現(xiàn)趨勢的大小

缺點(diǎn)：數(shù)據(jù)盡量不要重疊，否則可讀性較差。

8. 雷達(dá)圖

定義：雷達(dá)圖又稱為蜘蛛網(wǎng)圖、網(wǎng)絡(luò)圖，蜘蛛圖，星圖，是以在同一點(diǎn)開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數(shù)據(jù)的方法，其中軸的相對位置和角度通常是無信息意義的。

適用場景：適用于顯示三個或更多的維度的變量，常用于排名、評估、評論等數(shù)據(jù)的展示。

優(yōu)點(diǎn)：用于綜合分析多個指標(biāo)，具有完整，清晰和直觀的優(yōu)點(diǎn)。

缺點(diǎn)：多維度但是不能太多，一般四到八個；比較的記錄條數(shù)不宜太多。

9. 箱型圖

定義：又稱盒須圖、盒式圖或箱線圖，是一種用作顯示一組數(shù)據(jù)分布情況的統(tǒng)計圖，使用了5個數(shù)字對分布進(jìn)行概括，即一組數(shù)據(jù)的最大值、最小值、中位數(shù)、下四分位數(shù)及上四分位數(shù)。

適用場景：適用于比較多組數(shù)據(jù)的分布情況，快速識別異常值。

優(yōu)點(diǎn)：能夠準(zhǔn)確穩(wěn)定地描繪出數(shù)據(jù)的離散分布情況，排除異常值的干擾，有利于數(shù)據(jù)的清洗

缺點(diǎn)：不能提供關(guān)于數(shù)據(jù)分布偏態(tài)和尾重程度的精確度量；在數(shù)據(jù)量較大時反映的形狀信息更加模糊；用中位數(shù)代表總體平均水平有一定的局限性。

10. K線圖

定義：原名蠟燭圖，又稱陰陽圖、棒線、紅黑線或蠟燭線，是反映價格走勢的一種圖線，其特色在于一個線段內(nèi)記錄了多項訊息，相當(dāng)易讀易懂且實用有效。K線可分“陽線”、“陰線”和“中立線”三種，陽線代表收盤價大于開盤價，陰線代表開盤價大于收盤價，中立線則代表開盤價等于收盤價。將某段時間內(nèi)的各單位時間下的K線綜合起來便可繪出“K線圖”，其橫軸為時間，縱軸為價格。

適用場景：常用于展示股票、數(shù)字貨幣、期貨市場等交易數(shù)據(jù)。

優(yōu)點(diǎn)：能夠全面透徹地觀察到市場上價格的真正變化，了解市場趨勢和波動。

缺點(diǎn)：繪制方法十分繁復(fù)，陰線與陽線的變化繁多，有一定的理解門檻。

11. 熱力圖

定義：以特殊高亮的形式顯示數(shù)據(jù)集中的區(qū)域和數(shù)據(jù)所在的地理區(qū)域的圖示，其背景往往是圖片或者地圖。

適用場景：適合用于直接對數(shù)據(jù)量較大的、相對原始的數(shù)據(jù)進(jìn)行分析。

優(yōu)點(diǎn)：可以直觀清楚地看到每一個區(qū)域的數(shù)據(jù)分布情況。

缺點(diǎn)：不適用于數(shù)值字段是匯總值，需要連續(xù)數(shù)值數(shù)據(jù)分布。

12. 儀表盤

定義：一個鐘表或者可讀盤，有刻度和指針，其中刻度表示度量，指針表示維度，指針角度表示數(shù)值，指針指向當(dāng)前數(shù)值。

適用場景：數(shù)據(jù)總覽、管理報表或報告，直觀的表現(xiàn)出某個指標(biāo)的進(jìn)度或?qū)嶋H情況。

優(yōu)點(diǎn)：用于進(jìn)度或占比的展現(xiàn)

缺點(diǎn)：每個儀表盤只能一個維度，同時展現(xiàn)的指標(biāo)也不宜過多，展示信息有限，不適用于表現(xiàn)數(shù)據(jù)的趨勢、分布特征。

13. 漏斗圖

定義：由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關(guān)系，梯形面積表示某個業(yè)務(wù)量與上一個環(huán)節(jié)之間的差異。

適用場景：適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析，通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較能夠直觀的發(fā)現(xiàn)和說明問題所在的環(huán)節(jié)，進(jìn)而做出決策。

優(yōu)點(diǎn)：清晰分析各個環(huán)節(jié)數(shù)據(jù)表現(xiàn)情況

缺點(diǎn)：無法比較數(shù)值，需要較大的數(shù)據(jù)量。

14. 地圖

定義：使用地圖作為背景，通過圖形的位置來表現(xiàn)數(shù)據(jù)的地理位置，將數(shù)據(jù)在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。

適用場景：適合帶有地理位置信息的數(shù)據(jù)集展現(xiàn)，展現(xiàn)的通常是以某個地區(qū)為單位的匯總的連續(xù)信息。

優(yōu)點(diǎn)：和地圖相結(jié)合，對數(shù)據(jù)的地理分步顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小。

缺點(diǎn)：必須有地理信息，并且數(shù)據(jù)為匯總數(shù)據(jù)，氣泡容易疊加；數(shù)據(jù)分布和地理區(qū)域大小的不對稱。

15. 樹圖

定義：通過樹形結(jié)構(gòu)來展現(xiàn)數(shù)據(jù)的組織關(guān)系，以父子層次結(jié)構(gòu)來組織對象。

適用場景：適用于與組織結(jié)構(gòu)有關(guān)的分析，即有明確的層次關(guān)系的數(shù)據(jù)。

優(yōu)點(diǎn)：直觀的展現(xiàn)數(shù)據(jù)的層次關(guān)系，能夠看到各層級指標(biāo)間的關(guān)系，可以進(jìn)行簡單的上卷、下鉆等操作。

缺點(diǎn)：數(shù)據(jù)層級不宜過多，每層的成員不宜過多，無法展現(xiàn)各部分占比關(guān)系。

16. 矩形樹圖

定義：矩形樹圖采用矩形表示層次結(jié)構(gòu)里的節(jié)點(diǎn)，父子節(jié)點(diǎn)之間的層次關(guān)系用矩形之間的相互嵌套隱喻來表達(dá)，矩形的面積大小通常對應(yīng)節(jié)點(diǎn)的屬性。

適用場景：適合展現(xiàn)具有層級關(guān)系的數(shù)據(jù)，能夠直觀體現(xiàn)同級之間的比較。

優(yōu)點(diǎn)：矩形樹圖比樹形結(jié)構(gòu)圖能更有效的利用空間，并且擁有展示占比的功能。

缺點(diǎn)：當(dāng)分類占比太小的時候文本會變得很難排布；矩形樹圖的樹形數(shù)據(jù)結(jié)構(gòu)表達(dá)的不夠直觀、明確。

17. ?；鶊D

定義：?；鶊D用于描述一組值到另一組值的流向，是一種特定類型的流圖。它的起始流量和結(jié)束流量相同，所有主支寬度的總和與所有分出去的分支寬度總和相等，保持能量的平衡；在內(nèi)部，不同的線條代表了不同的流量分流情況，它的寬度成比例地顯示此分支占有的流量；節(jié)點(diǎn)不同的寬度代表了特定狀態(tài)下的流量大小。

適用場景：通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。

優(yōu)點(diǎn)：能較好的描述多級關(guān)系，按照層級給節(jié)點(diǎn)分類，適合的數(shù)據(jù)條數(shù)超過10條

缺點(diǎn)：?；鶊D需要保持能量守恒，不能在中間過程創(chuàng)造出流量，流失的流量應(yīng)流向表示損耗的節(jié)點(diǎn)，所以每條邊的寬度是保持不變的。

18. 微型圖

定義：又稱迷你圖，主要是配合數(shù)值、比例進(jìn)行圖形化展現(xiàn)其大小或者占比。

適用場景：多條數(shù)據(jù)列表展現(xiàn)

優(yōu)點(diǎn)：突出每一條數(shù)據(jù)的數(shù)值、比例，強(qiáng)調(diào)單條數(shù)據(jù)的大小和趨勢。

缺點(diǎn)：數(shù)據(jù)項較多時，有效信息的獲取較為耗時；圖形中展現(xiàn)的信息較少，不能給出更詳細(xì)的信息。

19. 詞云

定義：又稱文字云，是文本數(shù)據(jù)的視覺表示，由詞匯組成類似云的彩色圖形，用于展示大量文本數(shù)據(jù)。每個詞的重要性以字體大小或顏色顯示。

適用場景：對比大量文本；使用圖片做邊界限制

優(yōu)點(diǎn)：適合大量數(shù)據(jù)，展示文字更為直觀

缺點(diǎn)：不適合用于數(shù)據(jù)區(qū)分度不大和數(shù)量太少的數(shù)據(jù)

參考資料

https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

https://www.echartsjs.com/examples/zh/index.html

https://www.highcharts.com.cn/demo/highcharts

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

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