歡迎小伙伴們收看《B端數(shù)據(jù)可視化設(shè)計(jì)經(jīng)驗(yàn)分享第四彈：圖表設(shè)計(jì)》，本節(jié)內(nèi)容將帶領(lǐng)小伙伴們從零開(kāi)始認(rèn)識(shí)圖表，了解圖表在數(shù)據(jù)可視化中的作用，圖表的構(gòu)成，不同圖形可以可視化哪些類(lèi)型的數(shù)據(jù)等等。希望大家看完后能對(duì)圖表有個(gè)相對(duì)完整的認(rèn)知，在以后的工作中可以得心應(yīng)手。
大家對(duì)圖表一定不陌生，圖表（chart）就是一種通過(guò)圖形化的方式呈現(xiàn)和分析數(shù)據(jù)的工具，就是
將表格中的數(shù)據(jù)進(jìn)行二次加工，將復(fù)雜的業(yè)務(wù)數(shù)據(jù)轉(zhuǎn)化為更加直觀的、有趨勢(shì)性、有時(shí)間線、空間性的圖形數(shù)據(jù)
，協(xié)助用戶(hù)根據(jù)數(shù)據(jù)變動(dòng)而變更相關(guān)決策，最終以實(shí)現(xiàn)降本提效的目的。
不同部門(mén)或者角色在公司中會(huì)需要各種類(lèi)型的數(shù)據(jù)信息，以支持其業(yè)務(wù)運(yùn)營(yíng)和領(lǐng)導(dǎo)層決策需求。這些數(shù)據(jù)信息的準(zhǔn)確性和及時(shí)性對(duì)于公司的發(fā)展和競(jìng)爭(zhēng)優(yōu)勢(shì)至關(guān)重要。
產(chǎn)品部門(mén)關(guān)注的主要是用戶(hù)行為數(shù)據(jù)、收入數(shù)據(jù)、用戶(hù)量數(shù)據(jù)；運(yùn)營(yíng)部門(mén)關(guān)注用戶(hù)活躍度數(shù)據(jù)、營(yíng)銷(xiāo)效果數(shù)據(jù)和用戶(hù)反饋數(shù)據(jù)；技術(shù)部門(mén)關(guān)注系統(tǒng)運(yùn)行數(shù)據(jù)、技術(shù)指標(biāo)數(shù)據(jù)；用戶(hù)增長(zhǎng)部門(mén)關(guān)注用戶(hù)生命周期數(shù)據(jù)等。
要看一個(gè)圖表是否優(yōu)秀，主要看它是否符合GLAD原則。GLAD原則是一個(gè)在數(shù)據(jù)可視化設(shè)計(jì)中常用來(lái)確保圖表質(zhì)量和有效性的方法論，它主要包括以下四個(gè)要素：
G原則：優(yōu)質(zhì)數(shù)據(jù)和洞察
G原則是指Good Data and Insight。G原則在探索性數(shù)據(jù)分析過(guò)程中著重提升圖表的商業(yè)價(jià)值，G原則的關(guān)鍵是“有價(jià)值的商業(yè)信息”，這一點(diǎn)就要求在準(zhǔn)備數(shù)據(jù)的時(shí)候，應(yīng)該剔除那些商業(yè)分析價(jià)值不大的部分，而主要留下的是有高價(jià)值密度的信息。除了要求有高價(jià)值的信息之外，還需要有比較好的Insight，也就是能洞察數(shù)據(jù)中的高價(jià)值信息，并以較為通俗易懂的形式在圖表中表達(dá)出來(lái)。
例圖點(diǎn)評(píng)：雖然圖表本身看上去好像并沒(méi)什么問(wèn)題，圖形選擇的也對(duì)、顏色搭配也得體，讀者也能理解圖本身要表達(dá)的意思。但是，
沒(méi)有商業(yè)價(jià)值，即我能看出茅臺(tái)拿鐵賣(mài)的最好，然后呢？這是哪個(gè)階段的數(shù)據(jù)？不知道。有沒(méi)有持續(xù)的表現(xiàn)數(shù)據(jù)？也不知道。
例圖點(diǎn)評(píng)：修改后，從數(shù)據(jù)中提煉出更有價(jià)值的商業(yè)數(shù)據(jù)，在時(shí)間維度和空間維度都有體現(xiàn)，簡(jiǎn)潔明了的同時(shí)，也具有商業(yè)參考價(jià)值。
L原則是指Less Noise。簡(jiǎn)單說(shuō)就是視覺(jué)降噪。
B端產(chǎn)品是高度商業(yè)化的產(chǎn)品，有用有效遠(yuǎn)大于好看，
這要求B端設(shè)計(jì)師對(duì)藝術(shù)的追求要適可而止，商業(yè)數(shù)據(jù)分析不是追求藝術(shù)造詣，不是做一張海報(bào)去吸引人的眼球，而是提供商業(yè)價(jià)值并能快速讓人理解。過(guò)于酷炫、花哨、浮夸的修飾并不會(huì)給圖表帶來(lái)任何附加值，反而會(huì)增加讀者的閱讀負(fù)擔(dān)。
例圖點(diǎn)評(píng)：修改前，有些國(guó)家由于人口稀少，導(dǎo)致相關(guān)數(shù)據(jù)也非常小，難以在圖表中展示，造成整個(gè)圖表花里胡哨且復(fù)雜。修改后，把過(guò)小數(shù)據(jù)的選項(xiàng)折疊為“其他”，默認(rèn)顯示主要幾個(gè)較大國(guó)家的數(shù)據(jù)，當(dāng)點(diǎn)擊“其他”圖例的時(shí)候，再顯示詳細(xì)的數(shù)據(jù)信息，使數(shù)據(jù)展示更具有側(cè)重點(diǎn)。
例圖點(diǎn)評(píng)：圖例2是dribbble上的圖表作品，左側(cè)是K線圖，右側(cè)是柱狀圖，它們的問(wèn)題在于花里胡哨，卻缺少必要的刻度，形式大于內(nèi)容，過(guò)于追求好看的反面案例。
A原則是指Accurate Expression。通俗講，就是要根據(jù)不同的數(shù)據(jù)類(lèi)型和不同的商業(yè)目的，采用正確的、適合的圖表類(lèi)型，如表現(xiàn)占比就要用餅圖、百分比柱形圖，表現(xiàn)趨勢(shì)就要用折線圖、面積圖等，且要保證圖例的清晰性、刻度的準(zhǔn)確性，避免模棱兩可的圖例和不準(zhǔn)確的刻度。
例圖點(diǎn)評(píng)：圖例的本意是對(duì)比2023和2024年不同品牌手機(jī)的銷(xiāo)售額占比，是基于時(shí)間維度的對(duì)比圖，但錯(cuò)誤圖例卻用了兩個(gè)餅圖，無(wú)法直觀的表現(xiàn)特定品牌在不同年度的銷(xiāo)售額占比的對(duì)比情況。正確的圖例則直接用了柱狀對(duì)比圖，一目了然。
D原則是指Dinstinct Mark。D原則的作用是幫助讀者加快理解信息的速度，它強(qiáng)調(diào)
突出重點(diǎn)
，需要把通過(guò)數(shù)據(jù)比較得到的差異部分、體現(xiàn)洞察信息的內(nèi)容利用明顯不同的顏色、形狀、文字標(biāo)注等手段進(jìn)行區(qū)別，讓讀者的視線聚焦到那里去。
圖表是由：標(biāo)題、圖例、縱軸、橫軸、圖形、圖表范圍及其他輔助元素（如水位線、網(wǎng)格線、刻度值、提示信息等）構(gòu)成，每一個(gè)元素都有它存在的意義。不過(guò)在實(shí)際使用中不一定非得把元素全部展示出來(lái)，精簡(jiǎn)化顯示想要展示的內(nèi)容即可。
標(biāo)題即圖表的名字，是圖表必不可少的元素。標(biāo)題要求簡(jiǎn)短明確通俗易懂，視覺(jué)上通常需要字體加粗。標(biāo)題下面也可以跟一行副標(biāo)題，用作對(duì)標(biāo)題的補(bǔ)充說(shuō)明。
-
信息類(lèi)標(biāo)題：提供理解數(shù)據(jù)所需的所有信息，回答「何事」、「何地」、「何時(shí)」這三個(gè)問(wèn)題
-
描述類(lèi)標(biāo)題：突出圖表中顯示的主要數(shù)據(jù)模式或趨勢(shì)，描繪出圖表所要講述的故事
標(biāo)題常用的位置有3種，左上、頂居中、底居中。
-
區(qū)分不同類(lèi)別數(shù)據(jù)的標(biāo)志
-
如果圖表中只有一個(gè)數(shù)據(jù)系列，則可以不用顯示圖例。
圖例的位置并沒(méi)有嚴(yán)格限制與要求，常見(jiàn)位置是上、下、右。
在選擇圖例顏色時(shí)，不要用色相過(guò)于接近的顏色，否則會(huì)容易看混或看錯(cuò)。
-
常用的圖例顏色（顏色本身代表著行業(yè)中的某種含義），此類(lèi)顏色需要是固定色值，無(wú)論哪個(gè) chart 中，都是這個(gè)顏色；
-
無(wú)特殊含義的圖例，可以規(guī)范出一個(gè)圖例顏色的使用順序表。那些無(wú)特殊含義的 chart 可以按順序使用圖例顏色，圖例整齊劃一。
一般來(lái)說(shuō)圖例不要過(guò)多，基本要遵循米勒定律，即7±2法則。
所以，5個(gè)以?xún)?nèi)是最佳圖例數(shù)量。如果遇到比較復(fù)雜的圖表，則可以進(jìn)行嘗試進(jìn)行圖例合并，如上面講GLAD原則的時(shí)候的L原則案例，除了多個(gè)圖表可以共用一組圖例（前提是圖例代表的意思一致），還可以把過(guò)于零碎的比重要的數(shù)據(jù)圖例合并為一個(gè)“其他”。
如果圖表中只有一個(gè)圖例的話(huà)，則可以不顯示。
根據(jù)不同使用場(chǎng)景，為了更好的展示效果，要給圖例名稱(chēng)設(shè)置一個(gè)最大值，超過(guò)最大值后省略展示，鼠標(biāo)hover時(shí)再顯示完整名稱(chēng)。
坐標(biāo)軸是定義域軸（叫什么）和值域軸（有多少）的統(tǒng)稱(chēng)。由于可視化圖表繪制的數(shù)據(jù)大部分都有一定的現(xiàn)實(shí)意義，因此我們可以根據(jù)坐標(biāo)軸對(duì)應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標(biāo)軸分成連續(xù)軸、時(shí)間軸、分類(lèi)軸三大類(lèi)。軸的類(lèi)型不同在設(shè)計(jì)處理上也有差異。
常見(jiàn)二維圖表坐標(biāo)軸分為X軸（橫軸）和Y軸（縱軸），多用于表示趨勢(shì)、排名、比較的數(shù)據(jù)結(jié)構(gòu)。常見(jiàn)搭配是1 個(gè) X 軸+1 個(gè) Y 軸。不過(guò)特殊情況下也會(huì)用到 2X+Y 或 X+2Y。
-
軸線一般只考慮是否顯示，例如柱狀圖、折線圖等，在有背景網(wǎng)格線的情況下，會(huì)隱藏 y 軸線，條形圖則是隱藏 x 軸線，以達(dá)到信息降噪，突出視覺(jué)重點(diǎn)的目的。
-
軸刻度通常不顯示，只有在肉眼無(wú)法定位到某個(gè)標(biāo)簽對(duì)應(yīng)的數(shù)據(jù)點(diǎn)時(shí)，會(huì)顯示刻度線，輔助用戶(hù)定位，比如折線圖，或抽樣顯示的柱狀圖。
-
網(wǎng)格線用于定位數(shù)據(jù)點(diǎn)的值域范圍，跟隨值域軸的位置單向顯示，柱狀圖采用水平網(wǎng)格，條形圖采用垂直網(wǎng)格。樣式為虛實(shí)線的最多，斑馬線由于感知過(guò)強(qiáng)，一般不用。
-
軸標(biāo)題/單位主要用于說(shuō)明定義域軸、值域軸的數(shù)據(jù)含義。當(dāng)可視化圖表標(biāo)題、圖例、軸標(biāo)簽已經(jīng)能充分表達(dá)數(shù)據(jù)含義，無(wú)需單獨(dú)顯示標(biāo)題/單位，「如無(wú)必要，勿增實(shí)體」。
-
連續(xù)軸/時(shí)間軸進(jìn)行適當(dāng)抽樣。連續(xù)軸/時(shí)間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個(gè)數(shù)值也能明顯看出中間的對(duì)應(yīng)關(guān)系。當(dāng)多個(gè)標(biāo)簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來(lái)避免這種情況。常見(jiàn)的抽樣方式是等分抽樣：當(dāng)多個(gè)標(biāo)簽在 x 軸無(wú)法完全顯示，優(yōu)先保留首尾標(biāo)簽，其余標(biāo)簽按同等步長(zhǎng)間隔顯示。間隔等分的前提是間隔數(shù)是合數(shù)，能被 1 和其本身以外的數(shù)整除。如果間隔數(shù)為質(zhì)數(shù)，就需要「-1」轉(zhuǎn)成合數(shù)。
舉個(gè)例子：9個(gè)標(biāo)簽，間隔數(shù)是 8，能被 2 或4整除，即分成 2 等分和4等分。8個(gè)標(biāo)簽，間隔數(shù)是 7，無(wú)法等分，需要在間隔數(shù)基礎(chǔ)上再「-1」，轉(zhuǎn)成合數(shù) 6 后再等分，此時(shí)最后一個(gè)標(biāo)簽顯示在倒 數(shù)第二個(gè)數(shù)據(jù)點(diǎn)上。
-
分類(lèi)軸是由幾組離散數(shù)據(jù)組成，獨(dú)立存在無(wú)緊密邏輯關(guān)聯(lián)。若采用抽樣規(guī)則，隱藏一些標(biāo)簽，用戶(hù)對(duì)圖表認(rèn)知就會(huì)有困難，違背了數(shù)據(jù)可視化清晰、有效的設(shè)計(jì)原則。分類(lèi)軸最佳處理方式是標(biāo)簽旋轉(zhuǎn) 45 度，若 45 度仍顯示不下，繼續(xù)旋轉(zhuǎn) 90 度。如果 90 度還是放不下就要考慮結(jié)合圖表交互或反轉(zhuǎn)圖表。
-
分類(lèi)軸標(biāo)簽字段有長(zhǎng)有短，長(zhǎng)文本標(biāo)簽直接旋轉(zhuǎn)不僅影響美觀，而且也不利于用戶(hù)閱讀。如果數(shù)據(jù)量比較少只有 2~4 個(gè)，長(zhǎng)文本標(biāo)簽更適合水平展示，顯示不下省略即可；如果數(shù)據(jù)量比較多，就限定字符數(shù)后旋轉(zhuǎn)。
圖形數(shù)據(jù)是圖表中最為明顯的地方，即圖表的核心元素，如折線圖中的折線，柱狀圖中的柱，餅狀圖中的圓。
-
-
多個(gè)數(shù)據(jù)同時(shí)顯示的時(shí)候，要保證每個(gè)數(shù)據(jù)都能清晰的看到，可以采用透明度來(lái)保證所有數(shù)據(jù)的顯示。
關(guān)于圖形的選擇，第四章會(huì)著重介紹。
提示信息用來(lái)標(biāo)識(shí)出圖表中重要點(diǎn)的數(shù)據(jù)信息，相當(dāng)于一個(gè)popover浮窗，鼠標(biāo)指針在圖形中hover的地方通常就是該點(diǎn)的數(shù)據(jù)信息。需要注意的是：重要信息盡量簡(jiǎn)化，只需要展示重要字段。
根據(jù)不同產(chǎn)品的使用場(chǎng)景，有的時(shí)候會(huì)用到閾值，當(dāng)達(dá)到某個(gè)閾值后，就會(huì)觸發(fā)某種聯(lián)動(dòng)效果。這個(gè)時(shí)候就需要有個(gè)水位線了，它起到警示的作用。
水位線的表現(xiàn)形式有兩種，實(shí)線和虛線，顏色的選取則取決于產(chǎn)品的警告級(jí)別。
水位線可以是一個(gè)，也可以是多個(gè)，視情況而定。
圖表范圍就是時(shí)間宏變量，用來(lái)切換數(shù)據(jù)的時(shí)間區(qū)間，如今天、本周（最近7天）、本月（最近30天）、本年等。
圖形種類(lèi)多種多樣，個(gè)個(gè)身懷絕技，而設(shè)計(jì)師則是作為挑選者。想要做好圖表設(shè)計(jì)，就需要對(duì)不同圖形有較為深入的了解，并對(duì)數(shù)據(jù)進(jìn)行正確理解后，與之匹配正確的圖形，用可視化的方式將數(shù)據(jù)表現(xiàn)出來(lái)。
大多數(shù)人可能熟悉折線圖、餅狀圖、柱狀圖，但是對(duì)其他的圖形可能就不太了解了。本章節(jié)將帶大家了解更多的圖形和對(duì)應(yīng)的特性，以便更好的運(yùn)用和設(shè)計(jì)。
趨勢(shì)類(lèi)、比較類(lèi)、排名類(lèi)、占比類(lèi)、流程類(lèi)、分布類(lèi)、關(guān)系類(lèi)。
趨勢(shì)類(lèi)圖形指的是對(duì)一段時(shí)間內(nèi)數(shù)據(jù)的展示，如單個(gè)或多個(gè)分類(lèi)數(shù)據(jù)之間的趨勢(shì)變化和比較。常見(jiàn)的趨勢(shì)圖形有折線圖、柱狀圖、堆積柱狀圖、面積圖、蠟燭圖、瀑布圖等。
折線圖（Line Chart）常用于顯示數(shù)據(jù)在連續(xù)時(shí)間上的趨勢(shì)變化。通過(guò)折線連接各數(shù)據(jù)點(diǎn)，突出數(shù)據(jù)的上升或下降趨勢(shì)，適合用于時(shí)間序列數(shù)據(jù)的展示。
柱狀圖（Basic Column Chart）用于展示多個(gè)分類(lèi)的數(shù)據(jù)變化和同類(lèi)別各變量之間的比較。
如例圖，既能展示店鋪每天銷(xiāo)售額所對(duì)應(yīng)的數(shù)據(jù)，也能反映出每天份銷(xiāo)售額的對(duì)比情況，并能通過(guò)圖形能夠快速了解銷(xiāo)售額最多和最少的日期。
柱狀圖還有個(gè)進(jìn)階用法，就是折柱混合圖。顧名思義，就是折線+柱狀圖的組合。折柱混合圖通常使用在多組數(shù)據(jù)進(jìn)行對(duì)比的情景下，如商場(chǎng)物品銷(xiāo)售數(shù)據(jù)增長(zhǎng)或減少，商品價(jià)格走勢(shì)比較等，它可以非常直觀的展示數(shù)據(jù)與數(shù)據(jù)的比擬，這樣就能一眼查看到不同時(shí)間段的數(shù)據(jù)值，通過(guò)折線和柱狀的形式展現(xiàn)出來(lái)。
如例圖，通過(guò)柱狀圖能看出每個(gè)月的銷(xiāo)售數(shù)據(jù)，而折線圖能體現(xiàn)出利潤(rùn)率。當(dāng)鼠標(biāo)移入對(duì)應(yīng)位置就可以看到詳細(xì)數(shù)據(jù)。
堆積柱狀圖（Stacked Bar Chart）是柱狀圖的變種，可以展示兩個(gè)或多個(gè)數(shù)據(jù)的變化，以及數(shù)據(jù)之間的綜合比較情況。
如例圖所示，兩個(gè)店鋪每月總銷(xiāo)售額用堆積圖展示，在坐標(biāo)軸上的每個(gè)品類(lèi)都有兩個(gè)數(shù)據(jù)，可以直觀的展示每個(gè)品類(lèi)的數(shù)據(jù)總量。
面積圖（Area Chart）是折線圖的變種。與折線圖不同的是，其變量數(shù)據(jù)和坐標(biāo)軸之間有顏色田中，這樣可以更加突出數(shù)據(jù)的變化趨勢(shì)，更加直觀的體現(xiàn)量的變化。
需要注意的是，填充的顏色要有30%左右的透明度，這樣在展示多組數(shù)據(jù)的時(shí)候不會(huì)互相遮蓋彼此信息。
蠟燭圖也叫K線圖（K Chart），常用于股市或期貨市場(chǎng)（近期炒股的同學(xué)可能看到K線圖心里會(huì)一咯噔）。K線是圍繞開(kāi)盤(pán)價(jià)、最高價(jià)、最低價(jià)、收盤(pán)價(jià)等反映市場(chǎng)趨勢(shì)和價(jià)格信息的。
瀑布圖也叫階梯圖，顧名思義，瀑布圖的形狀像掛在高山上的瀑布流水。瀑布圖也可以呈現(xiàn)隨時(shí)間變化的數(shù)據(jù)，但不同于堆積柱狀圖的是，瀑布圖能夠重點(diǎn)突出數(shù)據(jù)變化的結(jié)果，以強(qiáng)調(diào)多個(gè)特定數(shù)據(jù)之間的變化關(guān)系。
比較類(lèi)圖形主要用于兩個(gè)或兩個(gè)以上的類(lèi)別數(shù)據(jù)進(jìn)行比較。常見(jiàn)的類(lèi)別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、多條折線圖、子彈圖等。
這里的柱狀圖與前面講的柱狀圖的區(qū)別在于X軸是表現(xiàn)類(lèi)別的，前面例圖的X軸是表現(xiàn)時(shí)間的。
分組柱狀圖（Grouped Bar Chart）是柱狀圖的延伸，它可以在同一數(shù)軸上展示各個(gè)分類(lèi)下不同分組的數(shù)據(jù)情況。如例圖為三家企業(yè)在產(chǎn)研部、設(shè)計(jì)部、商務(wù)部的人數(shù)對(duì)比情況，由此可以清晰的看出企業(yè)丙設(shè)計(jì)部人數(shù)最少，商務(wù)部人數(shù)最多的結(jié)論。
氣泡圖（Bubble Chart）是是散點(diǎn)圖的變體，由卡迪爾坐標(biāo)系（直角坐標(biāo)系）和大小不一的圓組成，通常每一個(gè)氣泡都代表著一組三個(gè)維度的數(shù)據(jù)。其中兩個(gè)決定了氣泡在笛卡爾坐標(biāo)系中的位置（即x，y軸上的值），另外一個(gè)則通過(guò)氣泡的大小來(lái)表示。
如例圖，x軸表示季度，y軸表示銷(xiāo)售額，氣泡大小代表產(chǎn)品所占全年銷(xiāo)售額百分比。
多條折線圖除了可以表示數(shù)據(jù)隨時(shí)間的變化趨勢(shì)，還可以展示多組數(shù)據(jù)的對(duì)比情況。如例圖所示，圖為某app經(jīng)營(yíng)情況的分析，在時(shí)間維度上對(duì)比下載量、注冊(cè)量、成交量三組數(shù)據(jù)及變化趨勢(shì)。
子彈圖（Bullet Graph）顧名思義，就是像子彈發(fā)射軌道的圖表。它的數(shù)據(jù)展示類(lèi)似儀表盤(pán)，優(yōu)勢(shì)在于可以表達(dá)豐富的數(shù)據(jù)信息，且占用的空間相對(duì)較小。子彈圖的數(shù)據(jù)值是需要提前設(shè)計(jì)好的。
如例圖所示，差、良、優(yōu)和目標(biāo)值、實(shí)際值都是作為動(dòng)態(tài)數(shù)據(jù)呈現(xiàn)的。相較于餅圖，子彈圖可以更高效的傳遞信息。
排名圖形可以為分類(lèi)數(shù)據(jù)進(jìn)行排排坐，它可以直觀的展示最大值和最小值。它的特點(diǎn)是“有序”，數(shù)值往往是從高到底依次排列，類(lèi)似榜單。
有序條形圖主要用于展示各個(gè)分類(lèi)的數(shù)據(jù)排名，它是最常用的排名圖形，因?yàn)槭蔷€性結(jié)構(gòu)，對(duì)于微小數(shù)據(jù)間的對(duì)比會(huì)有很好的易讀性。
有序柱狀圖和有序條形圖一樣，都可以表現(xiàn)數(shù)據(jù)的排名情況。區(qū)別在于一個(gè)是橫向?qū)Ρ葓D，一個(gè)是縱向?qū)Ρ葓D。
占比圖形是大家最常見(jiàn)的圖形了，主要用于表現(xiàn)分類(lèi)數(shù)據(jù)占整體的
百分比情況
。常見(jiàn)的圖形有餅圖、環(huán)形圖、堆積面積圖、矩形樹(shù)圖、旭日?qǐng)D等。
餅圖（Pie Chart）是展示占比數(shù)據(jù)最最直觀的圖形了，它是通過(guò)餅塊的大小來(lái)直觀的表示分類(lèi)的占比。但是餅圖也有一定局限性，即當(dāng)占比數(shù)值比較接近或者占比分類(lèi)比較多時(shí)，在視覺(jué)上就不太容易分辨各個(gè)類(lèi)別的占比情況。
環(huán)形圖（Donut Chart）的作用和餅圖一樣，但是環(huán)形圖的特點(diǎn)是中間區(qū)域是空的，所以視覺(jué)表現(xiàn)上比餅圖要弱一些，中間空心區(qū)域還可以用來(lái)放標(biāo)題、圖標(biāo)、數(shù)據(jù)等。
堆積面積圖（Stacked Area Chart）就是疊加數(shù)據(jù)，不同顏色之間的數(shù)據(jù)并沒(méi)有疊加關(guān)系，它的整體色塊面積是數(shù)據(jù)總量，不同的分類(lèi)數(shù)據(jù)可展示不同的占比情況。如例圖，不僅可以展示全球能源消耗總量，切換百分比模式還能展示不同國(guó)家消耗能源的占比情況。
矩形樹(shù)圖（Treemap）由馬里蘭大學(xué)教授Ben Shneiderman于上個(gè)世紀(jì)90年代提出，起初是為了找到一種有效了解磁盤(pán)空間使用情況的方法。 矩形樹(shù)圖適合展現(xiàn)具有層級(jí)關(guān)系的數(shù)據(jù)，能夠直觀體現(xiàn)同級(jí)之間的比較。
矩形樹(shù)圖的好處在于，相比起傳統(tǒng)的樹(shù)形結(jié)構(gòu)圖，矩形樹(shù)圖能更有效得利用空間，并且擁有展示占比的功能。矩形樹(shù)圖的缺點(diǎn)在于，當(dāng)分類(lèi)占比太小的時(shí)候文本會(huì)變得很難排布。相比起分叉樹(shù)圖，矩形樹(shù)圖的樹(shù)形數(shù)據(jù)結(jié)構(gòu)表達(dá)的不夠直觀、明確。
旭日?qǐng)D（Sunburst Chart）是一種現(xiàn)代餅圖，它超越傳統(tǒng)的餅圖和環(huán)圖，能表達(dá)清晰的層級(jí)和歸屬關(guān)系，以父子層次結(jié)構(gòu)來(lái)顯示數(shù)據(jù)構(gòu)成情況。旭日?qǐng)D中，離遠(yuǎn)點(diǎn)越近表示級(jí)別越高，相鄰兩層中，是內(nèi)層包含外層的關(guān)系。
如例圖，對(duì)醫(yī)院進(jìn)行看病、掛號(hào)、取藥的流程，用旭日?qǐng)D呈現(xiàn)。比如取藥是等號(hào)、排隊(duì)、拿藥的父級(jí)，其中等號(hào)占取藥的比重最大。
流程類(lèi)圖形用來(lái)顯示流程流轉(zhuǎn)和流程流量。一般流程都會(huì)呈現(xiàn)出多個(gè)環(huán)節(jié)，每個(gè)環(huán)節(jié)之間會(huì)有相應(yīng)的流量關(guān)系，這類(lèi)圖形可以很好的表示這些關(guān)系。常見(jiàn)的流程類(lèi)圖形有漏斗圖和桑基圖。
漏斗圖（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)而做出決策。漏斗圖用梯形面積表示某個(gè)環(huán)節(jié)業(yè)務(wù)量與上一個(gè)環(huán)節(jié)之間的差異。漏斗圖
從上到下
，有邏輯上的順序關(guān)系，表現(xiàn)了隨著業(yè)務(wù)流程的推進(jìn)業(yè)務(wù)目標(biāo)完成的情況。
漏斗圖總是開(kāi)始于一個(gè)100%的數(shù)量，結(jié)束于一個(gè)較小的數(shù)量。在開(kāi)始和結(jié)束之間由N個(gè)流程環(huán)節(jié)組成。每個(gè)環(huán)節(jié)用一個(gè)梯形來(lái)表示，梯形的上底寬度表示當(dāng)前環(huán)節(jié)的輸入情況，梯形的下底寬度表示當(dāng)前環(huán)節(jié)的輸出情況，上底與下底之間的差值形象的表現(xiàn)了在當(dāng)前環(huán)節(jié)業(yè)務(wù)量的減小量，當(dāng)前梯形邊的斜率表現(xiàn)了當(dāng)前環(huán)節(jié)的減小率。 通過(guò)給不同的環(huán)節(jié)標(biāo)以不同的顏色，可以幫助用戶(hù)更好的區(qū)分各個(gè)環(huán)節(jié)之間的差異。漏斗圖的所有環(huán)節(jié)的流量都應(yīng)該使用同一個(gè)度量。
桑基圖 (Sankey Diagram)，是一種特定類(lèi)型的流圖，用于描述一組值到另一組值的流向。因?yàn)槭状问褂盟娜耸且幻蠸ankey的愛(ài)爾蘭土木工程師，所以就叫桑基圖。
桑基圖通常應(yīng)用于能源、材料成分、金融等數(shù)據(jù)的可視化分析。
如例圖所示，可以清晰的看到，從搜索框直接搜索進(jìn)入酒店詳情頁(yè)的流量是最大的。充分說(shuō)明了搜索是剛需。
分布圖形主要用于展示每個(gè)數(shù)值在數(shù)據(jù)集中出現(xiàn)的頻次和數(shù)量，常見(jiàn)類(lèi)型有散點(diǎn)圖、氣泡圖、熱力圖、直方圖、箱型圖、等高線圖等
散點(diǎn)圖Scatter Chart，也叫 X-Y 圖，它將所有的數(shù)據(jù)以點(diǎn)的形式展現(xiàn)在笛卡爾坐標(biāo)系上，以顯示變量之間的相互影響程度，點(diǎn)的位置由變量的數(shù)值決定。
例圖展示的是AB兩國(guó)男性的身高和體重?cái)?shù)據(jù)，通過(guò)散點(diǎn)圖中的數(shù)據(jù)點(diǎn)分布情況可看出，B國(guó)男性的身高遠(yuǎn)大于A國(guó)。
前面4.2.3里講過(guò)單維度數(shù)據(jù)的氣泡圖，這里是多維度的氣泡圖案例。如例圖所示，圖中展示了5個(gè)維度的數(shù)據(jù)，氣泡的代表地區(qū)類(lèi)別，氣泡的大小代表人口總數(shù)，氣泡顏色代表國(guó)家類(lèi)別，X軸代表人均國(guó)內(nèi)生產(chǎn)總值，Y軸代表人均壽命。
需要注意的是，氣泡圖的數(shù)據(jù)大小容量有限，氣泡太多會(huì)使圖表難以閱讀。但是可以通過(guò)增加一些交互行為彌補(bǔ)：隱藏一些信息，當(dāng)鼠標(biāo)點(diǎn)擊或者懸浮時(shí)顯示，或者添加一個(gè)選項(xiàng)用于重組或者過(guò)濾分組類(lèi)別。另外，氣泡的大小是映射到面積而不是半徑或者直徑繪制的。因?yàn)槿绻腔诎霃交蛘咧睆降脑?huà)，圓的大小不僅會(huì)呈指數(shù)級(jí)變化，而且還會(huì)導(dǎo)致視覺(jué)誤差。
熱力圖就是使用冷色到暖色的不同顏色表示數(shù)據(jù)從大到小的權(quán)重，或用同色系顏色的深淺來(lái)表示數(shù)據(jù)的多少。熱力圖可以在坐標(biāo)軸上呈現(xiàn)數(shù)據(jù)的大小分布，也可以在地圖或圖片上使用。
如例圖，杭州實(shí)時(shí)旅游熱點(diǎn)區(qū)域的熱力圖，顏色越偏紅的區(qū)域人流量越大，顏色越偏藍(lán)人流量越小。
直方圖（Histogram）形狀上看上去好像就是柱狀圖，但是含義卻完全不同。直方圖能夠顯示各組頻數(shù)或數(shù)量分布的情況，易于顯示各組之間頻數(shù)或數(shù)量的差別。通過(guò)直方圖還可以觀察和估計(jì)哪些數(shù)據(jù)比較集中，異常或者孤立的數(shù)據(jù)分布在何處。
如例圖所示，繪制了鉆石的全深比數(shù)據(jù)的統(tǒng)計(jì)直方圖，從圖中可以看出在 66 附近有兩個(gè)孤立值
箱形圖（Box Chart）又稱(chēng)盒須圖、盒式圖或箱線圖，是一種用作顯示一組數(shù)據(jù)分布情況的統(tǒng)計(jì)圖。
箱形圖多用于數(shù)值統(tǒng)計(jì)，雖然相比于直方圖和密度曲線較原始簡(jiǎn)單，但是它不需要占據(jù)過(guò)多的畫(huà)布空間，空間利用率高，非常適用于比較多組數(shù)據(jù)的分布情況。
