波多野结衣视频,韩日综合成人中文字幕,色偷偷的xxxx8888

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

B端設(shè)計(jì)｜數(shù)據(jù)可視化 (一) 圖表選擇篇

JQ Design

2021-05-20

0 評(píng)論 10176 瀏覽 102 收藏

32 分鐘

編輯導(dǎo)讀：數(shù)據(jù)可視化是B端設(shè)計(jì)最常見(jiàn)的設(shè)計(jì)之一。在一個(gè)產(chǎn)品中，如何清晰、高屏效展示數(shù)據(jù)，讓用戶高效、簡(jiǎn)潔的讀取數(shù)據(jù)并做出判斷，這是B端設(shè)計(jì)師的基礎(chǔ)技能。本文作者分享了自己做數(shù)據(jù)可視化的經(jīng)驗(yàn)，本篇為圖表選擇篇。

數(shù)據(jù)可視化是B端設(shè)計(jì)最常見(jiàn)的設(shè)計(jì)之一。在一個(gè)產(chǎn)品中，如何清晰、高屏效展示數(shù)據(jù)，讓用戶高效、簡(jiǎn)潔的讀取數(shù)據(jù)并做出判斷，這是B端設(shè)計(jì)師的基礎(chǔ)技能。

大部分設(shè)計(jì)師朋友問(wèn)我的問(wèn)題，大致如下：

產(chǎn)品展示數(shù)據(jù)，該展示哪些呢？
產(chǎn)品經(jīng)理給了很多數(shù)據(jù)表格，我該如何可視化？
為什么我設(shè)計(jì)的圖表用戶看不懂？
圖表如何做響應(yīng)式布局？
為什么我設(shè)計(jì)的圖表在視覺(jué)上總感覺(jué)亂七八糟？

其實(shí)，這些問(wèn)題都可以通過(guò)一些方法來(lái)快速解決，個(gè)人認(rèn)為掌握設(shè)計(jì)方法優(yōu)于冥思苦想的閉門造車，沿著方法加以融合、創(chuàng)新，才是最高效的方式。B端存在的意義就是降本提效，作為B端設(shè)計(jì)師，這些方法就是我們腦子里的”軟件”，為我們的工作降本提效。

目前準(zhǔn)備寫三篇數(shù)據(jù)可視化設(shè)計(jì)的文章來(lái)分享自己做數(shù)據(jù)可視化的經(jīng)驗(yàn)：

《B端設(shè)計(jì) 數(shù)據(jù)可視化 (一 ) 圖表選擇篇》
《B端設(shè)計(jì) 數(shù)據(jù)可視化 (二 ) 視覺(jué)表現(xiàn)》
《B端設(shè)計(jì) 數(shù)據(jù)可視化 (三 ) 可視化實(shí)現(xiàn)》

進(jìn)入正題，這篇文章主要分成三個(gè)部分：

Part 1: 數(shù)據(jù)可視化定義
Part 2: 常見(jiàn)圖表的構(gòu)成
Part 3: 常見(jiàn)圖表選擇

Part 1：數(shù)據(jù)可視化定義（Definition）

要回答數(shù)據(jù)可視化是什么，首先我們要知道的是其出現(xiàn)的原因?？梢暬瘓D表的出現(xiàn)是為了呈現(xiàn)更簡(jiǎn)潔、直觀的數(shù)據(jù)情況，使得用戶可以基于圖表高效抓取有價(jià)值的信息加以記憶和判斷。

比較客觀的定義為：

為了清晰有效地傳遞信息，數(shù)據(jù)可視化使用統(tǒng)計(jì)圖形、圖表、信息圖表和其他工具。

在14年的時(shí)候，我曾就職于美國(guó) Purdue 大學(xué)的 Center for Innovation through Visualization and Simulation (CIVS), 創(chuàng)始人Dr. Chenn Zhou 很有創(chuàng)意的將大家迷惑的工業(yè)數(shù)據(jù)，借助于ANSYS Computational Fluid Dynamics 呈現(xiàn)為可視狀態(tài)，并借助于AR技術(shù)呈現(xiàn)給用戶，這讓 CIVS 成為了Purdue 最高級(jí)的實(shí)驗(yàn)室之一，也讓Dr. Zhou 成為了美國(guó) Indian 最有影響力的十大女性之一。CIVS的成功離不開數(shù)據(jù)可視化的功勞，可視化數(shù)據(jù)讓工業(yè)上繁雜的數(shù)據(jù)變得平易近人，學(xué)者和老板都可以輕松的通過(guò)酷炫的AR技術(shù)，進(jìn)入設(shè)備內(nèi)部，看到內(nèi)部的化學(xué)反應(yīng)、溫度、燃?xì)獗壤鹊取?/p>

B端數(shù)據(jù)的可視化設(shè)計(jì)比工業(yè)仿真數(shù)據(jù)可視化呈現(xiàn)要簡(jiǎn)單的多，我們不用自己去算數(shù)據(jù)在三維空間中呈現(xiàn)的位置，只需根據(jù)流程完成交互及視覺(jué)設(shè)計(jì)即可。

我們經(jīng)常見(jiàn)到的數(shù)據(jù)可視化有：

商家后臺(tái)、金融類產(chǎn)品、運(yùn)動(dòng)類產(chǎn)品、檢測(cè)類產(chǎn)品、To Do 類產(chǎn)品、各種排行榜、游戲類產(chǎn)品、還有交互設(shè)計(jì)師最熟悉的漏斗圖等等。

總結(jié)一下數(shù)據(jù)可視化的優(yōu)勢(shì)：

簡(jiǎn)潔直觀
容易理解記憶
信息傳遞更直接

Part 2：常見(jiàn)圖表的構(gòu)成（Composition）

常見(jiàn)的圖表由如下組件構(gòu)成其實(shí)可以參見(jiàn)Excel，在這里，我總結(jié)了UI設(shè)計(jì)中常見(jiàn)的圖表構(gòu)成：

1. 標(biāo)題：圖表的標(biāo)題，有時(shí)可以沒(méi)有，一般在圖表頂部放或者頂部居中

2. 提示信息/數(shù)據(jù)標(biāo)簽：當(dāng)前坐標(biāo)詳細(xì)信息，可以在主體圖形內(nèi)，也可以在主體圖形外，Hover State顯示比較常見(jiàn)

3. 圖例：圖例是集中于圖表一角或一側(cè)的地圖上各種符號(hào)和顏色所代表內(nèi)容與指標(biāo)的說(shuō)明，有助于更好的認(rèn)識(shí)圖表

4. 切換選項(xiàng)：切換選項(xiàng)可以為下拉，也可為 Tab 切換，用于值域選擇、不同圖表類型切換等功能

5. 更多選項(xiàng)：一般用于收納不常用選項(xiàng)，如隱藏、分享等

6. 圖形主體：根據(jù)圖表類型及數(shù)據(jù)展示的抽象幾何元素

7. 坐標(biāo)軸：根據(jù)情況選擇顯示與否，二維空間只有x、y軸，一般情況下，只選擇主要橫、縱坐標(biāo)軸之一即可

8. 坐標(biāo)軸標(biāo)題：坐標(biāo)軸的標(biāo)題，一般可不用顯示。標(biāo)題有橫、縱坐標(biāo)軸標(biāo)題

9. 誤差線：顯示潛在的誤差或相對(duì)于系列中每個(gè)數(shù)據(jù)標(biāo)志的不確定程度。一般分為標(biāo)準(zhǔn)誤差，百分比誤差，標(biāo)準(zhǔn)偏差使用較少

10. 輔助線/趨勢(shì)線：輔助或突出顯示平均值、目標(biāo)、標(biāo)準(zhǔn)值、趨勢(shì)等，幫助用戶更快抓取

11. 網(wǎng)絡(luò)線：輔助用戶快速確定圖形在特定位置的值，一般只使用主軸水平網(wǎng)絡(luò)線（條形圖使用主軸垂直網(wǎng)絡(luò)線），主軸次要水平網(wǎng)絡(luò)線會(huì)比較密集，建議避免使用

Part 3：常見(jiàn)圖表選擇 (Selection)

為了方便設(shè)計(jì)師方便記憶，我將常用圖表以其主體圖形形狀作為分一級(jí)分類標(biāo)準(zhǔn)，比較類、構(gòu)成類等二級(jí)分類標(biāo)準(zhǔn)作為標(biāo)簽顯示，二級(jí)分類是借鑒了 AntX 對(duì)于圖表的分類，鏈接放在了參考鏈接中。

主要常用圖表的形狀為五大類：點(diǎn)、線、面、矩形、圓，也常復(fù)合地圖去使用，關(guān)系及空間類圖表應(yīng)用相對(duì)較少，本篇文章暫不贅述。

3.1 點(diǎn)類圖表

常用點(diǎn)類圖表其實(shí)非常少：散點(diǎn)圖和氣泡圖，從圖形上看，也就是“點(diǎn)的大小”有不同，都是用來(lái)觀察分布情況。氣泡圖是散點(diǎn)圖的衍生，氣泡的面積增添了對(duì)比維度。

3.1.1 散點(diǎn)圖 (Scatter graph)

定義：散點(diǎn)圖也叫 X-Y 圖，它將所有的數(shù)據(jù)以點(diǎn)的形式展現(xiàn)在直角坐標(biāo)系上，以顯示變量之間的相互影響程度，點(diǎn)的位置由變量的數(shù)值決定。

使用場(chǎng)景：散點(diǎn)圖用于表達(dá)數(shù)值在連續(xù)變量之間的分布情況。

使用目的：觀察分布

Tips：簡(jiǎn)單來(lái)講就是把數(shù)值標(biāo)記在二維坐標(biāo)系，方便用戶去判斷分布、趨勢(shì)等信息，有時(shí)也可以結(jié)合輔助線來(lái)看平局值和趨勢(shì)。散點(diǎn)圖也可以結(jié)合顏色來(lái)標(biāo)記不同的類別。

例如：

X連鎖雞尾酒吧想制定一個(gè)合理價(jià)格，看單品收入及單品成本的分布情況，就可以使用散點(diǎn)圖配合盈虧輔助線。

一級(jí)分類：門店；二級(jí)分類：盈利線

從上圖可以看出A店及B店幾乎所有產(chǎn)品的都在盈利線上，在盈利線下產(chǎn)品需要分析原因，決定是否下架。C店有部分產(chǎn)品在盈利線下，需要找到原因，做出合理分析。通過(guò)這個(gè)例子，我們可以清晰得看出ABC店商品的盈利情況，來(lái)判斷需要主推、下架還有問(wèn)題產(chǎn)品，C店也可能是因?yàn)闋I(yíng)銷或者內(nèi)部成本貪污等問(wèn)題造成成本偏高，這讓用戶可以很清晰的做出推斷。

3.1.2 氣泡圖 (Bubble Chart)

定義：氣泡圖是一種多變量圖表，是散點(diǎn)圖的變體，也可以認(rèn)為是散點(diǎn)圖和百分比區(qū)域圖的組合。

使用場(chǎng)景：氣泡圖最基本的用法是使用三個(gè)值來(lái)確定每個(gè)數(shù)據(jù)序列，必須有連續(xù)變量

使用目的：觀察分布，并且對(duì)比數(shù)據(jù)的大小

注意：第三個(gè)變量是通過(guò)氣泡的面積大小決定。

Tips：可以結(jié)合輔助線和不同顏色氣泡來(lái)達(dá)到更好的識(shí)圖效果，提示信息在hover到氣泡時(shí)體現(xiàn)。

例如：

X連鎖雞尾酒吧想查看單品價(jià)格、成本分布及銷售情況，就可以使用氣泡圖

一級(jí)分類：門店；二級(jí)分類：銷售額；三級(jí)分類：盈利線

從上圖可以看出C店某產(chǎn)品銷量很高，但是在盈利線下，需要迅速調(diào)整。

3.2 線類圖表

常用的線類圖表有折線圖、面積圖、堆疊面積圖，這些圖的共通性就是都可以看趨勢(shì)，都有連續(xù)變化的橫坐標(biāo)。其中面積圖是折線圖的衍生，能比較總量；堆疊面積圖是面積圖的衍生，能看占比。

3.2.1 折線圖 (Line Chart)

定義：折線圖用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化，它的特點(diǎn)是反映事物隨時(shí)間或有序類別而變化的趨勢(shì)。

主要功能：觀察變化趨勢(shì)。

使用場(chǎng)景：具有有序變量的圖表，且有序變量不小于 3 條。

Tips：折線下的裝飾可使用漸變

例如：

x 連鎖酒吧想看 A 店及 B店在 2021 年第三季度的營(yíng)業(yè)走勢(shì)。

從圖可以看出 A 店的走勢(shì)向上，B 店走勢(shì)向下需要改善經(jīng)營(yíng)

3.2.2 面積圖 (Area Chart)

定義：面積圖又叫區(qū)域圖。面積圖是折線圖基礎(chǔ)上添加面積而來(lái)，也用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化，它的特點(diǎn)是反映事物隨時(shí)間或有序類別而變化的趨勢(shì)，且面積可以代表當(dāng)前區(qū)域的總量。

主要功能：觀察變化趨勢(shì)及總量對(duì)比

使用場(chǎng)景：具有有序變量的圖表，且有序變量不小于 3 條。

Tips：折線下的面積填充可使用簡(jiǎn)便。

例如：

x 連鎖酒吧想看 A 店及 B店在 2021 年第三季度的營(yíng)業(yè)走勢(shì)。

一級(jí)分類：門店；二級(jí)分類：營(yíng)業(yè)額

從上圖不單能看出走勢(shì)，面積也是總也營(yíng)業(yè)的代表，A 店在當(dāng)前季度營(yíng)業(yè)額明顯好于 B 店

3.2.3 堆疊面積圖 (Stacked Area Chart)

定義：堆疊面積圖和基本面積圖一樣，唯一的區(qū)別就是圖上每一個(gè)數(shù)據(jù)集的起點(diǎn)不同，起點(diǎn)是基于前一個(gè)數(shù)據(jù)集的，用于顯示每個(gè)數(shù)值所占大小隨時(shí)間或類別變化的趨勢(shì)線，展示的是部分與整體的關(guān)系。

主要功能：觀察變化趨勢(shì)及部分相對(duì)于整體的占比情況

使用場(chǎng)景：具有有序變量的圖表，且有序變量不小于 3 條。

Tips：色塊使用透明度，視覺(jué)上會(huì)相對(duì)清爽。展示連續(xù)區(qū)間變化的占比情況，還可以使用百分比堆疊面積圖，只需要將 Y 軸變?yōu)榘俜直取?/p>

例如：

X 酒吧想看不同類別的產(chǎn)品在不同年份的銷售趨勢(shì)及占比情況

一級(jí)分類：產(chǎn)品；二級(jí)分類：各品類銷售額

從上圖可以看出 X 酒吧的所有產(chǎn)品銷售額都逐年穩(wěn)步上升，雞尾酒成為了該酒吧支撐產(chǎn)品，葡萄酒占比有所萎縮。

3.3 面類圖表

常用的面類圖表有雷達(dá)圖、漏斗圖、矩形數(shù)圖。

3.3.1 雷達(dá)圖 (Radar Chart, Spider Chart, Web Chart, Polar Chart, Star Plots)

定義：雷達(dá)又叫戴布拉圖、蜘蛛網(wǎng)圖。雷達(dá)圖是以從同一點(diǎn)開始的軸上表示的三個(gè)或更多個(gè)定量變量的二維圖表的形式顯示多變量數(shù)據(jù)的圖形方法。軸的相對(duì)位置和角度通常是無(wú)信息的。雷達(dá)圖也稱為網(wǎng)絡(luò)圖，蜘蛛圖，星圖，蜘蛛網(wǎng)圖，不規(guī)則多邊形，極坐標(biāo)圖或Kiviat圖。它相當(dāng)于平行坐標(biāo)圖，軸徑向排列。

主要功能：對(duì)比分類數(shù)據(jù)的數(shù)值大小

使用場(chǎng)景：常用于一些多維性能數(shù)據(jù)，如綜合評(píng)分

Tips：指標(biāo)得分接近圓心，說(shuō)明處于較差狀態(tài)，反之，指標(biāo)數(shù)據(jù)靠近外邊界線，說(shuō)明處于理想狀態(tài)。雷達(dá)圖的缺點(diǎn)在于，指標(biāo)過(guò)多時(shí)，不能較好傳達(dá)對(duì)比情況，指標(biāo)建議控制在5-8個(gè)最佳。

例如：

X 連鎖酒吧想招聘設(shè)計(jì)師設(shè)計(jì)產(chǎn)品，為其公司運(yùn)營(yíng)降本提效，他們對(duì)設(shè)計(jì)師綜合能力劃分了緯度，為了方便對(duì)比，使用了雷達(dá)圖。

一級(jí)分類：設(shè)計(jì)師；二級(jí)分類：能力

3.3.2 漏斗圖 (Funnel Chart)

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

主要功能：對(duì)比漏損

使用場(chǎng)景：適用于流量分析

Tips：環(huán)節(jié)之間必須有單向邏輯關(guān)系

例如：

X 連鎖酒吧開發(fā)了某款線上售酒APP，想分析從點(diǎn)擊banner、瀏覽詳情、加入購(gòu)物車、產(chǎn)生訂、支付訂單、交易成功這個(gè)環(huán)節(jié)的漏損。

通過(guò)觀察漏斗斜率、大小及百分比數(shù)據(jù)，來(lái)分析哪個(gè)環(huán)節(jié)漏損偏高，需要優(yōu)化流程或者頁(yè)面。

3.3.3 矩形樹圖 (Treemap, Rectangular Tree)

定義：矩形樹圖，即矩形式樹狀結(jié)構(gòu)圖（Treemap），用矩形面積表示數(shù)據(jù)的大小。各個(gè)小矩形的面積越大，表示占比越大。

主要功能：樹形數(shù)據(jù)的樹形關(guān)系，及各個(gè)分類的占比

使用場(chǎng)景：適合展示帶權(quán)的樹形數(shù)據(jù)。

例如：

X酒吧想看自己的產(chǎn)品構(gòu)成

一級(jí)分類：產(chǎn)品品類；二級(jí)分類：產(chǎn)品品類一級(jí)子類；三級(jí)分類：產(chǎn)品品類子類二級(jí)子類…

3.4 矩形類圖表

矩形類圖表的記憶方式非常簡(jiǎn)單，分為矩形橫著的條形圖和豎著的柱狀圖，當(dāng)分類較少時(shí)（少于12條），多用柱狀圖，當(dāng)分類較多時(shí)（多于12條），多用條形圖。

當(dāng)存在累計(jì)或比例關(guān)系時(shí)，用堆疊柱狀圖。

當(dāng)有目標(biāo)時(shí)考慮子彈圖或者輔助線。

當(dāng)考慮構(gòu)成時(shí)，考慮瀑布圖。

當(dāng)有對(duì)比關(guān)系時(shí)，考慮用雙向柱狀圖。

當(dāng)存在子分類時(shí)或者對(duì)比關(guān)系時(shí)，考慮分組柱狀圖。

當(dāng)存在多分類百分比或構(gòu)成比較時(shí)，考慮用百分比柱狀圖

3.4.1 豎向柱形圖 (Basic Column Chart, Basic Bar Chart)

定義：基礎(chǔ)柱狀圖，使用垂直或水平的柱子顯示類別之間的數(shù)值比較。

主要功能：適合應(yīng)用到分類數(shù)據(jù)對(duì)比，多用于X軸變化無(wú)規(guī)律

使用場(chǎng)景：適合應(yīng)用到分類數(shù)據(jù)對(duì)比

Tips：5-12條最佳

例如：

X 連鎖酒吧想看 A B C D 四個(gè)門店 2020 年的業(yè)績(jī)

3.4.2 橫向條形圖 (Basic Column Chart, Basic Bar Chart)

定義：是基礎(chǔ)橫向柱形圖的變換，X與Y互換位置。

主要功能：適合應(yīng)用到分類數(shù)據(jù)對(duì)比，多用于X軸變化無(wú)規(guī)律

使用場(chǎng)景：適合應(yīng)用到分類數(shù)據(jù)對(duì)比

Tips：多用于排行榜及數(shù)據(jù)多于12條

例如：

X 連鎖酒吧想看 Top 15 的產(chǎn)品銷量對(duì)比

3.4.3 分組條形圖 (Multi-set Bar Chart, Grouped Bar Chart)

定義：分組柱狀圖，又叫聚合柱狀圖。當(dāng)使用者需要在同一個(gè)軸上顯示各個(gè)分類下不同的分組時(shí)，需要用到分組柱狀圖。

主要功能：適合應(yīng)用到分組相同分類數(shù)據(jù)對(duì)比，多用于X軸變化無(wú)規(guī)律

使用場(chǎng)景：對(duì)比不同分組內(nèi)相同分類的大小

例如：

X 連鎖酒吧相對(duì)比 A、B、C 門店的3種品類銷售情況

一級(jí)分類：門店；二級(jí)分類：產(chǎn)品

3.4.4 雙向條形圖 (Bi-directional Bar Chart, Bi-directional Column Chart)

定義：雙向柱狀圖（又名正負(fù)條形圖），使用正向和反向的柱子顯示類別之間的數(shù)值比較。其中分類軸表示需要對(duì)比的分類維度，連續(xù)軸代表相應(yīng)的數(shù)值，分為兩種情況，一種是正向刻度值與反向刻度值完全對(duì)稱，另一種是正向刻度值與反向刻度值反向?qū)ΨQ，即互為相反數(shù)。

主要功能：適用于兩組以上分類的屬于比較

使用場(chǎng)景：正反分類數(shù)據(jù)對(duì)比

Tips：一定有圖例，組內(nèi)二級(jí)分類一般在 3 條內(nèi)

例如：

X 連鎖酒吧相對(duì)比 A、B、C 門店的收入與支出情況

一級(jí)分類：門店；二級(jí)分類：收入支出

3.4.5 子彈圖 (Bullet Graph)

定義：子彈圖的樣子很像子彈射出后帶出的軌道，所以稱為子彈圖。

主要功能：對(duì)比分類數(shù)據(jù)數(shù)值大小及是否達(dá)標(biāo)

使用場(chǎng)景：有標(biāo)準(zhǔn)值、參考值或區(qū)間值

Tips：一數(shù)量盡量在 10 個(gè)以內(nèi)，可以設(shè)置刻度區(qū)間，以便進(jìn)行更好的評(píng)估，如果有統(tǒng)一目標(biāo)可使用柱狀圖加輔助線

例如：

X 酒吧想同時(shí)查看 A、B、C 、D店的業(yè)績(jī)完成情況

一級(jí)分類：業(yè)績(jī)；二級(jí)分類：目標(biāo)；三級(jí)分類：完成度

從圖中可以看出，只有 A 門店完成了目標(biāo)，D 門店是良好，有待改善

3.4.6 瀑布圖 (Waterfall Chart)

定義：瀑布圖有助于理解依次引入正值或負(fù)值的累積效應(yīng)。瀑布圖也被稱為飛行磚圖或馬里奧圖，因?yàn)榭雌饋?lái)像懸掛在空中的磚頭。

主要功能：用于表達(dá)兩數(shù)值之間的變化過(guò)程

使用場(chǎng)景：查看累計(jì)正負(fù)

Tips：上加下減

例如：

X 酒吧想查看當(dāng)月的總費(fèi)用構(gòu)成

一級(jí)分類：費(fèi)用；二級(jí)分類：費(fèi)用正負(fù)；三級(jí)分類：總費(fèi)用

從上圖可以看出，該月份的費(fèi)用構(gòu)成時(shí)水電、貨款、工資、房租，因?yàn)橹把航鹩浽谫M(fèi)用內(nèi)，所以押金退回屬于負(fù)的費(fèi)用，所以總費(fèi)用=水電+貨款+工資+房租-押金退款。從上圖還可看出房租是費(fèi)用中占比最多的。

3.4.7 堆疊柱狀圖 (Stacked Bar Chart)

定義：堆疊柱狀圖將每個(gè)柱子進(jìn)行分割以顯示相同類型下各個(gè)數(shù)據(jù)的大小情況

主要功能：對(duì)比分類數(shù)據(jù)的數(shù)值大小，同時(shí)對(duì)比一個(gè)分類（分組）下數(shù)據(jù)的匯總值

使用場(chǎng)景：表達(dá)一級(jí)分類比較，以二級(jí)分類占比構(gòu)成

Tips：二級(jí)分類大于 5 條時(shí)，盡量不使用堆疊柱狀圖，或把超出合并為 “其他”；一級(jí)分類過(guò)多時(shí)，可使用堆疊條形圖

例如：

X 酒吧想同時(shí)查看 A、B、C 、D店的費(fèi)用構(gòu)成

一級(jí)分類：門店；二級(jí)分類：費(fèi)用構(gòu)成

3.5 圓形類圖表

常用的圓類圖表有：餅圖、環(huán)圖、旭日?qǐng)D、玉圖、玫瑰圖。

比較占比用柄圖，分類大小看弧長(zhǎng)

視覺(jué)升級(jí)用環(huán)圖

有子集分類用旭日?qǐng)D

玉圖和玫瑰圖都是柱狀圖的變形，都是為了放大對(duì)比，玉圖看角度，玫瑰圖看半徑。

3.5.1 餅圖 (Basic Pie Chart)

定義：用于表示不同分類的占比情況，通過(guò)弧度大小來(lái)對(duì)比各種分類。

主要功能：對(duì)比分類數(shù)據(jù)的數(shù)值大小

Tips：一分類數(shù)量一般不超過(guò) 9 個(gè)

例如：

X 連鎖酒吧想看 A-D 店?duì)I業(yè)額占比

3.5.2 環(huán)圖 (Donut Chart)

定義：將中間區(qū)域挖空的餅圖

主要功能：對(duì)比分類數(shù)據(jù)的數(shù)值大小

Tips：一分類一般不超過(guò) 9 個(gè)；

例如：

X 連鎖酒吧想看 A-D 店?duì)I業(yè)額占比

3.5.3 旭日?qǐng)D (Sunburst Chart)

定義：旭日?qǐng)D一種現(xiàn)代餅圖，它超越傳統(tǒng)的餅圖和環(huán)圖，能表達(dá)清晰的層級(jí)和歸屬關(guān)系，以父子層次結(jié)構(gòu)來(lái)顯示數(shù)據(jù)構(gòu)成情況。

主要功能：展示多層級(jí)數(shù)據(jù)的占比關(guān)系。

使用場(chǎng)景：旭日?qǐng)D可以更細(xì)分溯源分析數(shù)據(jù)，真正了解數(shù)據(jù)的具體構(gòu)成。

Tips：離圓心越近，代表層級(jí)越高；下一層級(jí)的綜合構(gòu)成上一層級(jí)；其實(shí)旭日?qǐng)D就是餅圖的疊加。

例如：

X 連鎖酒吧想看 A-D 店的收入比例，以及 B 店的營(yíng)業(yè)額構(gòu)成

3.5.4 玉圖 (Radial Bar Chart)

定義：玉玦圖（又名，環(huán)形柱狀圖），是柱狀圖關(guān)于笛卡爾坐標(biāo)系轉(zhuǎn)換到極坐標(biāo)系的仿射變換。其意義和用法與柱狀圖類似。玉圖中是用角度表示每個(gè)玦環(huán)數(shù)值的大小，角度是決定性因素。

主要功能：夸張顯示最大值，對(duì)比分類數(shù)據(jù)的數(shù)值大小

使用場(chǎng)景：被對(duì)比的數(shù)值差距較小、需要增強(qiáng)視覺(jué)、夸張顯示

Tips：據(jù)數(shù)據(jù)控制在20條以內(nèi)，視覺(jué)效果好。其實(shí)玉圖就是扭曲的柱狀圖。由于其大小由角度決定，而外環(huán)圓半徑加大，就在視覺(jué)上造成了最大值遠(yuǎn)遠(yuǎn)高于其他之的假象。玉圖需要考慮排序問(wèn)題，值越小越靠近圓心，反之越靠近圓外側(cè)。

例如：

X 連鎖酒吧想查看 A-D 店的營(yíng)業(yè)額對(duì)比，想在視覺(jué)放大最高收入的 A 店