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

概述

數(shù)據(jù)產(chǎn)品經(jīng)理在日常產(chǎn)品設(shè)計(jì)時(shí)經(jīng)常需要設(shè)計(jì)一些圖表來對(duì)數(shù)據(jù)進(jìn)行更好的展現(xiàn)，也能方便用戶更好的從數(shù)據(jù)中獲得有價(jià)值的信息。圖表是將數(shù)據(jù)進(jìn)行可視化展現(xiàn)的圖，用來方便理解大量數(shù)據(jù)以及數(shù)據(jù)間的關(guān)系。數(shù)據(jù)產(chǎn)品經(jīng)理在進(jìn)行圖表設(shè)計(jì)時(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ù)數(shù)據(jù)選用合適的圖表展現(xiàn)來把數(shù)據(jù)的信息傳達(dá)給用戶，因此，我們需要熟悉每種圖表的定義、適用場(chǎng)景、優(yōu)缺點(diǎn)，這樣才能快速選擇合適的圖表。

1. 柱狀圖

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

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

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

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

2. 折線圖

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

適用場(chǎng)景：反映變化趨勢(shì)

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

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

3. 條形圖

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

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

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

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

4. 餅圖

定義：用于表示不同分類的占比情況，通過弧度大小來對(duì)比各種分類。餅圖通過將一個(gè)圓餅按照分類的占比劃分成多個(gè)區(qū)塊，整個(gè)圓餅代表數(shù)據(jù)的總量，每個(gè)圓弧所在的塊表示該分類占總體的比例大小，所有圓弧所在的塊組成的圓餅等于 100%。可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。

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

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

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

5. 散點(diǎn)圖

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

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

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

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

6. 氣泡圖

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

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

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

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

7. 面積圖

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

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

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

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

8. 雷達(dá)圖

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

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

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

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

9. 箱型圖

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

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

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

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

10. K線圖

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

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

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

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

11. 熱力圖

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

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

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

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

12. 儀表盤

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

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

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

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

13. 漏斗圖

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

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

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

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

14. 地圖

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

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

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

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

15. 樹圖

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

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

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

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

16. 矩形樹圖

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

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

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

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

17. ?；鶊D

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

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

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

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

18. 微型圖

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

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

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

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

19. 詞云

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

適用場(chǎng)景：對(duì)比大量文本；使用圖片做邊界限制

優(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é)議