編輯導(dǎo)語(yǔ)：數(shù)據(jù)可視化圖表種類如此之多，什么場(chǎng)景下應(yīng)該用什么圖表展示，是一個(gè)讓人頭禿的難題。本文作者總結(jié)各種圖標(biāo)的優(yōu)勢(shì)和類型。感興趣的小伙伴們，一起來(lái)看看吧！

一、前言

“大屏”，這個(gè)詞最近幾年來(lái)被廣泛地提及，幾乎各行各業(yè)都希望通過(guò)“大屏”這種方式來(lái)將自己的產(chǎn)品或業(yè)務(wù)進(jìn)行數(shù)字化升級(jí)。同時(shí)，也就吸引越來(lái)越多的設(shè)計(jì)師看好可視化大屏在未來(lái)的前景。

作為一種交互和視覺(jué)都相對(duì)炫酷的界面展示方式，不僅能夠?qū)⒍喾N場(chǎng)景同時(shí)展示在一個(gè)屏幕上，同時(shí)，也可以給觀者帶來(lái)強(qiáng)烈的視覺(jué)沖擊力，使其直觀地了解到想要關(guān)注的實(shí)時(shí)動(dòng)態(tài)信息，或者通過(guò)大屏上的數(shù)據(jù)圖表來(lái)分析出當(dāng)前及未來(lái)的現(xiàn)狀、趨勢(shì)等。

二、什么是數(shù)據(jù)可視化？

首先我們先來(lái)了解一下，什么是“數(shù)據(jù)可視化”？

數(shù)據(jù)可視化就是將抽象概念進(jìn)行形象表達(dá)，將抽象語(yǔ)言進(jìn)行具象圖形可視的過(guò)程。簡(jiǎn)單理解，就是將數(shù)據(jù)以視覺(jué)的形式來(lái)呈現(xiàn)，如圖表或者地圖，從而幫助人們了解這些數(shù)據(jù)本身以及背后的意義。

三、數(shù)據(jù)可視化的原則

數(shù)據(jù)可視化一個(gè)基本的原則，就是將具有價(jià)值的數(shù)據(jù)和洞察，通過(guò)簡(jiǎn)潔、準(zhǔn)確、突出洞察的圖表表現(xiàn)出來(lái)。

所以，將數(shù)據(jù)可視化不單單是簡(jiǎn)單的圖表的羅列，更重要的是說(shuō)明數(shù)據(jù)背后的意義（實(shí)際問(wèn)題&解決方案）；然而很多時(shí)候我們只是展示了很多炫酷的圖表，但沒(méi)有解決任何實(shí)際的問(wèn)題；或者具有高價(jià)值的數(shù)據(jù)信息，沒(méi)有使用合適的呈現(xiàn)方式，導(dǎo)致表達(dá)不清楚，輸在了這“臨門(mén)一腳”。

我們用一個(gè)簡(jiǎn)單的關(guān)系圖來(lái)示意一下，一個(gè)可視化圖表是否體現(xiàn)出了它應(yīng)有的價(jià)值。

一個(gè)圖表既需要提供出可供參考的價(jià)值，也需要兼顧讀者理解信息的速度，如果只是提供了價(jià)值，但是理解起來(lái)比較耗時(shí)，那么它一定是低效的；若是清晰地展示數(shù)據(jù)信息，但是不能夠提供足夠的價(jià)值，那么也只是“空有外表，欠缺內(nèi)在”。

所以我們?cè)谠O(shè)計(jì)一個(gè)圖表之前，就需要我們知道數(shù)據(jù)有哪些字段構(gòu)成、每個(gè)字段的數(shù)據(jù)類型、字段之間的依賴關(guān)系等。思考如何用簡(jiǎn)潔的架構(gòu)完整的描述業(yè)務(wù)。

在這里舉個(gè)簡(jiǎn)單的例子，比如鐵道行業(yè)——“什么時(shí)間？哪位員工？在哪個(gè)地點(diǎn)？執(zhí)行了什么作業(yè)？以及具體的作業(yè)內(nèi)容”

當(dāng)然，這樣的數(shù)據(jù)是靜態(tài)的。當(dāng)面對(duì)我們的客戶時(shí)，他們會(huì)更關(guān)心問(wèn)題和答案。而問(wèn)題通常不是一個(gè)單一的問(wèn)題，而是一連串問(wèn)題的組合，尋找問(wèn)題的過(guò)程更像是“剝洋蔥”。

在業(yè)務(wù)分析的過(guò)程中，都是不同維度層次之間的鉆取和關(guān)聯(lián)分析，簡(jiǎn)單的問(wèn)題只有一個(gè)數(shù)據(jù)層次，復(fù)雜的問(wèn)題則同時(shí)包含多個(gè)數(shù)據(jù)層次及其相互關(guān)系。分析數(shù)據(jù)的過(guò)程就是在問(wèn)題對(duì)應(yīng)的數(shù)據(jù)層次上，完成聚合分析。站在不同的視角對(duì)于一組數(shù)據(jù)的關(guān)注點(diǎn)也會(huì)不同。

做為設(shè)計(jì)師，當(dāng)我們將一組數(shù)據(jù)進(jìn)行數(shù)據(jù)可視化時(shí)，往往是已經(jīng)經(jīng)過(guò)處理過(guò)的數(shù)據(jù)，我們只需要對(duì)圖表進(jìn)行優(yōu)化即可，而不用去關(guān)注原始的數(shù)據(jù)是如何處理的，在這種情況下設(shè)計(jì)師的任務(wù)就相對(duì)來(lái)說(shuō)比較簡(jiǎn)單了。

但是對(duì)于原始數(shù)據(jù)的處理和分析其實(shí)是非常復(fù)雜的，有機(jī)會(huì)和大家分享一下數(shù)據(jù)背后的故事。

盡管做為設(shè)計(jì)師只要將數(shù)據(jù)圖表進(jìn)行優(yōu)美的設(shè)計(jì)，但大多數(shù)的設(shè)計(jì)師是不知道什么才是好的可視化圖表，這也是寫(xiě)這篇文章解決大家這些問(wèn)題的初衷。

在設(shè)計(jì)時(shí)，大多數(shù)的設(shè)計(jì)師都是根據(jù)自己的第一主觀感受或者結(jié)合自身經(jīng)驗(yàn)的積累去判斷一個(gè)圖表的好壞。而不是根據(jù)科學(xué)的方法來(lái)去衡量一個(gè)圖表是否是好的圖表。在此給大家一個(gè)驗(yàn)證數(shù)據(jù)可視化圖表設(shè)計(jì)的“黃金公式”。

我們到底該如何去評(píng)判一個(gè)圖表的好壞？不是通過(guò)主觀地、帶有經(jīng)驗(yàn)性質(zhì)的感覺(jué)，而是要有科學(xué)地依據(jù)進(jìn)行分析和論證，有相對(duì)應(yīng)的指標(biāo)去衡量。這樣才能避免我們走很多不必要的彎路。而這個(gè)科學(xué)的依據(jù)就是“GLAD原則”，是我們驗(yàn)證一條數(shù)據(jù)可視化的“黃金公式”。

GLAD是由四個(gè)短語(yǔ)的開(kāi)頭首字母構(gòu)成：Good Data and Insight、Less Noise、Accurate Expression、Distinct Mark。它們是黃金公式中四項(xiàng)重要組成部分。探索性數(shù)據(jù)分析注重內(nèi)涵，解釋性數(shù)據(jù)分析注重外表，一個(gè)好的圖表需要內(nèi)外兼修。GLAD原則，作為優(yōu)化圖表設(shè)計(jì)的理念，是兩者兼顧的?！?strong>G”在探索性數(shù)據(jù)分析過(guò)程中著重提升圖表的價(jià)值，“LAD”在解釋性數(shù)據(jù)分析中幫助讀者加快理解信息的速度。

四、使用可視化圖表的優(yōu)勢(shì)

將數(shù)據(jù)可視化的優(yōu)勢(shì)是顯而易見(jiàn)的，我們通過(guò)最簡(jiǎn)單的方式來(lái)傳遞最準(zhǔn)確的信息。通過(guò)對(duì)于數(shù)據(jù)的分析、處理，加快人們理解信息的速度，最大化地提供數(shù)據(jù)所能夠帶來(lái)的價(jià)值。

數(shù)據(jù)可視化是對(duì)數(shù)據(jù)進(jìn)行圖形化的處理來(lái)進(jìn)行展示，傳達(dá)數(shù)據(jù)背后的價(jià)值。而數(shù)據(jù)是對(duì)行為的度量結(jié)果，無(wú)論是大數(shù)據(jù)還是小數(shù)據(jù)，都可以拆分成兩個(gè)部分：類別和度量指標(biāo)。

數(shù)據(jù)分析一般會(huì)分為三個(gè)步驟：數(shù)據(jù)清洗、數(shù)據(jù)建模、數(shù)據(jù)可視化，這就像烹飪的過(guò)程：洗菜切菜、炒菜、上菜擺盤(pán)

我們想要提高讀者理解信息的速度，就需要通過(guò)對(duì)圖表的設(shè)計(jì)來(lái)提升。圖表類型、配色方式、線條粗細(xì)、字體大小、坐標(biāo)軸高度、標(biāo)題位置、刻度線疏密、圖例的擺放等細(xì)節(jié)都會(huì)影響到讀者理解信息的速度，也都有講究的規(guī)定。

早期，工作于AT&T貝爾實(shí)驗(yàn)室的統(tǒng)計(jì)學(xué)家William S. Cleveland及Robert McGill曾發(fā)表過(guò)《圖像感知：研究圖像化方法的理論、實(shí)踐和應(yīng)用》。對(duì)于如何根據(jù)功能選擇最佳圖表形式提出了指引。作者設(shè)計(jì)了一個(gè)包含10項(xiàng)基本感知任務(wù)的列表，每項(xiàng)任務(wù)代表展示數(shù)據(jù)的一種方法并進(jìn)行了排序。從而給我們?cè)谝曈X(jué)表現(xiàn)方面一些指導(dǎo)性的方向。

我們?cè)趦?yōu)化圖表的過(guò)程中，有的時(shí)候可能并不會(huì)因?yàn)檎J(rèn)知判斷準(zhǔn)確性的高低從而確定一個(gè)圖表的優(yōu)劣，而是在大多數(shù)情況下對(duì)整體的認(rèn)知判斷準(zhǔn)確性進(jìn)行全局的感知。所以我們?cè)谶M(jìn)行數(shù)據(jù)可視化的過(guò)程中，既要清楚地認(rèn)識(shí)到每種圖表的使用規(guī)則和場(chǎng)景，選用正確的圖表來(lái)表現(xiàn)數(shù)據(jù)，也要對(duì)其在視覺(jué)感知方面進(jìn)行整體的思考和優(yōu)化（視覺(jué)+交互）即，應(yīng)用好GLAD原則。

五、可視化圖表由哪些組成

選擇一個(gè)正確的度量值往往是解決問(wèn)題的關(guān)鍵，現(xiàn)代管理學(xué)之父彼得.德魯克的一條“金句”曾道破度量的重要價(jià)值：“如果你不能度量它，就無(wú)法改進(jìn)它”。

如果我們要度量它，就要先認(rèn)識(shí)它。

既然我們已經(jīng)深刻地認(rèn)識(shí)到可視化圖表的優(yōu)勢(shì)所在——簡(jiǎn)潔、準(zhǔn)確、突出洞察，以及在可視化大屏中的重要地位，我們就應(yīng)該對(duì)于一個(gè)完整的圖表有一個(gè)全面的認(rèn)識(shí)和了解。

什么是好的圖表？一個(gè)完整的圖表都由什么元素組成？元素對(duì)于讀者理解信息有哪些影響？應(yīng)該避免哪些問(wèn)題可以提高讀者對(duì)于信息的速度？等等問(wèn)題，都是作為一個(gè)可視化大屏設(shè)計(jì)師應(yīng)該掌握的基本功。

根據(jù)前文的介紹，我們可以知道對(duì)于一個(gè)圖表的好壞，可以通過(guò)GLAD原則去檢驗(yàn)。工欲善其事，必先利其器，只有先全面的了解和認(rèn)識(shí)圖表的組成元素，才能在設(shè)計(jì)時(shí)游刃有余。接下來(lái)，我們分別介紹一下圖表的組成有哪些。

1. 標(biāo)題與副標(biāo)題

圖表標(biāo)題，包含標(biāo)題和副標(biāo)題，其中副標(biāo)題是非必須的。

標(biāo)題的主要作用是對(duì)圖表的主題進(jìn)行概述，副標(biāo)題則是對(duì)標(biāo)題進(jìn)行補(bǔ)充說(shuō)明，或者說(shuō)明數(shù)據(jù)的來(lái)源等，就是為了方便更直觀的了解到圖表主題和內(nèi)容。

從前端開(kāi)發(fā)的角度來(lái)看，標(biāo)題只有一些文字信息，所以標(biāo)題的配置無(wú)非是一些定位、字體大小、顏色等，不過(guò)也有些標(biāo)題可以加入超鏈接屬性。

所以，我們就可以考慮對(duì)標(biāo)題文字的字體、字號(hào)、顏色、位置等方面作為優(yōu)化的方向。當(dāng)然如果要同時(shí)顯示標(biāo)題和副標(biāo)題時(shí)，我們也要考慮到兩者之間的間距。

2. 圖例

圖例是圖表中用不同形狀、顏色、文字等，用來(lái)標(biāo)示不同數(shù)據(jù)列，通過(guò)點(diǎn)擊標(biāo)示可以顯示或隱藏該數(shù)據(jù)列。

2.1 圖例容器樣式

圖例容器指的是整個(gè)圖例容器的樣式，包含背景、邊框、邊距、寬度等。

在對(duì)圖例的樣式優(yōu)化中，我們可以通過(guò)對(duì)圖例容器的背景色、邊框顏色、大?。▽挕⒏撸?、陰影等方面作為優(yōu)化方向。也可能出現(xiàn)一個(gè)圖表中數(shù)據(jù)度量項(xiàng)過(guò)多，圖例在整個(gè)圖表占比過(guò)大的現(xiàn)象，我們也可以采用分頁(yè)的形式進(jìn)行視覺(jué)上的減壓，在交互上面進(jìn)行突破。

2.2 圖例項(xiàng)樣式

圖例容器的樣式可以控制圖例整體樣式，圖例的具體內(nèi)容則是通過(guò)圖例項(xiàng)相關(guān)屬性來(lái)控制的。我們不僅要考慮到容器的設(shè)計(jì)，也要更關(guān)注于圖例項(xiàng)本身。

關(guān)于圖例項(xiàng)的基本樣式，即大小、顏色、圓角等，圖例項(xiàng)可以通過(guò)標(biāo)示顏色的不同來(lái)代表不同的類別（注：同一組圖例中，盡量避免出現(xiàn)相近的顏色，可以提高圖表信息讀取的速度），還有上邊提到的不同狀態(tài)下的設(shè)計(jì)樣式，比如圖例隱藏時(shí)的樣式，鼠標(biāo)劃過(guò)時(shí)的樣式，圖表項(xiàng)在容器中的位置以及之間的相對(duì)位置關(guān)系。

2.3 圖例內(nèi)容及定位

圖例內(nèi)容，即表示圖例的文字說(shuō)明。

圖例在圖表中的對(duì)齊方式有左對(duì)齊、居中對(duì)齊、右對(duì)齊，圖例內(nèi)容的布局方式有垂直布局和水平布局。

3. 坐標(biāo)軸

笛卡爾圖表（普通的二維數(shù)據(jù)圖）都有X軸和Y軸，默認(rèn)情況下，x軸顯示在圖表的底部，y軸顯示在左側(cè)（多個(gè)y軸時(shí)可以是顯示在左右兩側(cè)）。

3.1 坐標(biāo)軸標(biāo)題

坐標(biāo)軸標(biāo)題。一般情況下，x軸沒(méi)有標(biāo)題（一般展示類別），y軸通常是數(shù)據(jù)的度量指標(biāo)。

3.2 坐標(biāo)軸刻度標(biāo)簽

當(dāng)我們的數(shù)據(jù)值相對(duì)密集，我們可以通過(guò)y軸坐標(biāo)軸標(biāo)簽步進(jìn)的方式來(lái)減少視覺(jué)上的壓力。同理如果x軸的數(shù)據(jù)維度也非常多，我們也可以通過(guò)步進(jìn)的方式去進(jìn)行優(yōu)化。除此之外，這里我們也可以通過(guò)交互層面去優(yōu)化，比如可以將x軸的標(biāo)簽設(shè)置為可拖動(dòng)的。

3.3 坐標(biāo)軸刻度

坐標(biāo)軸的刻度一般我們?cè)O(shè)計(jì)時(shí)比較容易忽略，但是在圖表中我們通常能夠通過(guò)這個(gè)小小的刻度來(lái)確定對(duì)映區(qū)間的數(shù)據(jù)值。我們也通過(guò)調(diào)整刻度，從而減少視覺(jué)的壓力。不過(guò)這種調(diào)整，雖然和上面的在“坐標(biāo)軸刻度標(biāo)簽”中的優(yōu)化方法一樣，但是其背后的邏輯是不相同的，前者只是改變了顯示間隔，而后者是真正意義上的調(diào)整刻度。

同時(shí)我們?cè)趫D表的優(yōu)化過(guò)程中，可以對(duì)坐標(biāo)軸刻度線的長(zhǎng)度、寬度、顏色進(jìn)行優(yōu)化，也可以對(duì)刻度線的位置進(jìn)行修改，比如是放在刻度標(biāo)簽的下邊，還是在刻度標(biāo)簽的中間。

4. 標(biāo)示線

標(biāo)示線是用來(lái)標(biāo)記坐標(biāo)軸上特殊值的一條直線，在繪圖區(qū)內(nèi)繪制一條自定義的線。標(biāo)示線總是垂直于它屬于的軸。它可單獨(dú)定義在x軸或y軸，也可以同時(shí)定義在x軸和y軸。如果標(biāo)示線同時(shí)定義在x軸和y軸，定義在y軸的標(biāo)示線會(huì)顯示在前面。

視覺(jué)上，我們可以通過(guò)對(duì)標(biāo)示線的顏色、粗細(xì)、線條樣式（虛線、實(shí)線）等進(jìn)行設(shè)計(jì)優(yōu)化，以及標(biāo)簽（標(biāo)示線的文字說(shuō)明）的位置、顏色等。

5. 標(biāo)示區(qū)域（標(biāo)示帶）

標(biāo)示帶同標(biāo)示線，只不過(guò)標(biāo)示的內(nèi)容為一段范圍。標(biāo)示帶的作用、事件等很多都類似標(biāo)示線。

6. 導(dǎo)出功能按鈕

導(dǎo)出功能按鈕可增加圖表導(dǎo)出為常見(jiàn)文件功能，一般都是用icon與下拉列表組合使用。常見(jiàn)的導(dǎo)出格式有png、jpeg、svg、pdf等。

7. 數(shù)據(jù)列

數(shù)據(jù)列即圖表上一個(gè)或多個(gè)數(shù)據(jù)系列，比如曲線圖中的一條曲線，柱狀圖中的一個(gè)柱形，也就是我們所見(jiàn)的各種圖表的表現(xiàn)形式。

8. 數(shù)據(jù)提示框

當(dāng)鼠標(biāo)懸停在某點(diǎn)上時(shí)，以框的形式提示該點(diǎn)的數(shù)據(jù)，比如該點(diǎn)的值、數(shù)據(jù)單位等。數(shù)據(jù)提示框內(nèi)提示的信息完全可以通過(guò)格式化函數(shù)動(dòng)態(tài)指定。

9. 版權(quán)標(biāo)簽

版權(quán)標(biāo)簽一般顯示在圖表右下方的包含鏈接的文字，默認(rèn)是自己公司的官網(wǎng)地址。但在大屏展示時(shí)，通常會(huì)隱藏信息。

六、數(shù)據(jù)可視化圖表的類型

前面我們已經(jīng)知道一個(gè)完整的圖表都是由哪些元素組成，接下來(lái)我們就來(lái)認(rèn)識(shí)一下圖表都有哪些類型，哪些圖表可以分為一類，我們?cè)撊绾芜x擇合適的圖表來(lái)進(jìn)行數(shù)據(jù)可視化。

當(dāng)我們真正去應(yīng)用它的時(shí)候，會(huì)發(fā)現(xiàn)很多場(chǎng)景不是簡(jiǎn)單地按照?qǐng)D中的思維線就可以找到適合的圖表，甚至事實(shí)與指導(dǎo)方向大相徑庭，仍然需要很多客觀的思考與辨證的判斷。如果我們按圖索驥，會(huì)發(fā)現(xiàn)其中很多邏輯概念，以專業(yè)的數(shù)據(jù)分析視角來(lái)評(píng)價(jià)是存在紕漏的。

該思維指南圖的核心問(wèn)題是以“你想展示什么”為起點(diǎn)，這是個(gè)極其龐大、復(fù)雜的話題，很難實(shí)現(xiàn)面面俱到，這導(dǎo)致“比較、構(gòu)成、聯(lián)系、分布”這四個(gè)大類不能構(gòu)成一個(gè)完整體，必定有遺漏。例如想要展示異常點(diǎn)、趨勢(shì)、聚類、排名，這些是不是也應(yīng)該與四大類并列加入到展示的信息中呢？

而且，“比較”這個(gè)詞屬于綜合性概念，所有的圖表都可以稱為數(shù)據(jù)的“比較”，該詞注定與其他類別有重疊的部分。這樣簡(jiǎn)單地劃分四個(gè)大類顯然違背了數(shù)據(jù)分析領(lǐng)域的基本常識(shí)——MECE原則（Mutually Exclusive Collectively Exhaustive）：不重疊、不遺漏。

不過(guò)也不能完全否定這張圖表的價(jià)值，雖然邏輯上有問(wèn)題，但該思維指南圖本身是具有設(shè)計(jì)性和啟發(fā)性的，我們從中也可以受到一些啟發(fā)，像構(gòu)成、聯(lián)系、分布等很多圖表都有其流行的應(yīng)用場(chǎng)景，如靜態(tài)時(shí)間的構(gòu)成常用餅圖，動(dòng)態(tài)時(shí)間的構(gòu)成可以用堆積百分比條形圖，這就好像在咖啡廳、酒吧、婚禮、健身房、辦公室等場(chǎng)景播放音樂(lè)，需要先領(lǐng)會(huì)不同音樂(lè)風(fēng)格——藍(lán)調(diào)、爵士、古典、搖滾等，再去配合各種場(chǎng)景靈活使用。

所以，我們還是要回歸我們究竟要展示哪些信息上來(lái)，但我們不應(yīng)該被既定的框架束縛住，而是要根據(jù)我們要展示的數(shù)據(jù)來(lái)選擇合適的圖表。

選定可視化圖表類型圖表的作用，是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么圖表，需要回答的首要問(wèn)題是“我有什么數(shù)據(jù)，需要用圖表做什么”，而不是 “圖表長(zhǎng)成什么樣”?；A(chǔ)圖表有直線圖、曲線圖、曲線面積圖、面積圖、面積范圍圖、柱狀圖、條形圖、餅圖、散點(diǎn)圖、氣泡圖、儀表圖等。還有一些和股票相關(guān)的圖表類型，包括 K 線、分時(shí)圖、蠟燭圖等，以及大數(shù)據(jù)量的時(shí)間軸圖表。還有地理信息相關(guān)的地圖，地圖中可以包含地圖區(qū)域、線、點(diǎn)、氣泡等元素。

1. 直線圖和曲線圖

用于反映事物隨時(shí)間或有序類別而變化的趨勢(shì)。直線圖是用直線將一系列的數(shù)據(jù)點(diǎn)連接的圖表，直線圖經(jīng)常用來(lái)展現(xiàn)隨著時(shí)間變化的數(shù)據(jù)。曲線圖是用曲線將一系列的數(shù)據(jù)點(diǎn)連接的圖表。使用建議：Y 軸刻度值選擇要合理，當(dāng)前顯示的數(shù)據(jù)波動(dòng)要最大化的顯示；顯示數(shù)據(jù)盡量大于3條，否則不能夠清晰地反映出數(shù)據(jù)隨時(shí)間變化的趨勢(shì)。

2. 面積圖

包括普通的面積圖及面積范圍圖，根據(jù)面積連接線的不同，又可以分為直線面積圖和曲線面積圖當(dāng)我們?cè)谠O(shè)計(jì)大屏?xí)r出現(xiàn)過(guò)多的折線圖，或者感覺(jué)圖表與標(biāo)題（設(shè)計(jì)復(fù)雜）的樣式不匹配時(shí)，我們可以進(jìn)行豐富圖表的表現(xiàn)力，使用面積圖來(lái)?yè)纹甬?huà)面，讓畫(huà)面整體看上去不單薄。

3. 柱狀圖&條形圖

柱狀圖是用豎直的柱子來(lái)展現(xiàn)數(shù)據(jù)，一般用于展現(xiàn)橫向的數(shù)據(jù)變化及對(duì)比。條形圖是用橫向的柱子來(lái)展現(xiàn)數(shù)據(jù)，一般用于縱向的數(shù)據(jù)排名及對(duì)比。

使用建議：注意每個(gè)數(shù)據(jù)分類的寬度以及不同分類之間的間距，數(shù)據(jù)之間的間隔與寬度最好是1.2~1.5倍

要選用適當(dāng)?shù)膱A角，避免使用大圓角，會(huì)造成認(rèn)知理解混亂，同時(shí)也不是很美觀。

當(dāng)每個(gè)數(shù)據(jù)分類項(xiàng)文字過(guò)長(zhǎng)是，可以將柱狀圖轉(zhuǎn)化成條形圖，緩解視覺(jué)壓力；這也是條形圖相對(duì)于柱狀圖的一個(gè)優(yōu)點(diǎn)，同時(shí)當(dāng)要展示的數(shù)據(jù)分類項(xiàng)過(guò)多時(shí)，我們也可以用條形圖來(lái)減少圖表所占用的寬度，因?yàn)樵谖覀冊(cè)O(shè)計(jì)大屏的過(guò)程中，圖表的數(shù)據(jù)展示區(qū)域?qū)挾韧枪潭ǖ?，不?huì)有太多的橫向空間是圖表完全展示，這時(shí)我們就可以考慮條形圖。

當(dāng)我們想要強(qiáng)調(diào)其中一個(gè)數(shù)據(jù)分類項(xiàng)時(shí)，可以使用不同的顏色進(jìn)行區(qū)分，但此時(shí)要保證唯一變量（即顏色不超過(guò)兩個(gè)）。

4. 餅形圖

餅圖以扇區(qū)的形式顯示每一個(gè)數(shù)值相對(duì)于總數(shù)值的大小。通過(guò)不同的扇面大小，表達(dá)了不同類別的比例，即一個(gè)數(shù)據(jù)組中不同數(shù)據(jù)項(xiàng)的數(shù)據(jù)大小占所有數(shù)據(jù)和的比例；并通過(guò)帶顏色的圖例將扇面和數(shù)據(jù)項(xiàng)一一對(duì)應(yīng)起來(lái)。所以當(dāng)我們想要一組數(shù)據(jù)中每個(gè)數(shù)據(jù)類型所占的比例時(shí)，就可以優(yōu)先選擇餅形圖。餅形圖可以分為基礎(chǔ)餅形、環(huán)形圖以及扇形圖。

5. 環(huán)形圖

環(huán)形圖是餅圖的一種變形，通過(guò)去掉中心部分，使環(huán)形圖在視覺(jué)上看上去更輕盈，避免由于餅圖大面積色塊帶來(lái)的視覺(jué)壓力，但它依然能夠表達(dá)出和餅圖相同的含義以及不同數(shù)據(jù)項(xiàng)之間的占比關(guān)系。在使用環(huán)形圖時(shí)，我們要注意環(huán)形圖的粗細(xì)，避免出現(xiàn)圓環(huán)過(guò)粗或者過(guò)細(xì)的情況，這樣都會(huì)影響在視覺(jué)上的美觀程度。

6. 扇形圖

通過(guò)設(shè)置餅圖圓周的開(kāi)始角度和結(jié)束角度，我們可以將餅圖變成扇形圖。

7. 范圍圖

范圍圖包括面積范圍圖、曲線面積范圍圖及柱形范圍圖，也可將范圍柱狀圖變成范圍條形圖。

8. 散點(diǎn)圖和氣泡圖

散點(diǎn)圖和氣泡圖常用于展現(xiàn)數(shù)據(jù)的分布情況。通過(guò)數(shù)據(jù)之間的位置分布來(lái)觀察變量之間的相互關(guān)系。數(shù)據(jù)之間的相互關(guān)系主要分為：正相關(guān)（兩個(gè)變量值同時(shí)增長(zhǎng)）、負(fù)相關(guān)（一個(gè)變量呈現(xiàn)增長(zhǎng)分布另一個(gè)變量呈現(xiàn)下降分布）、不相關(guān)、線性相關(guān)、指數(shù)相關(guān)等。而分布在集群點(diǎn)較遠(yuǎn)的數(shù)據(jù)點(diǎn)，被稱之為異常點(diǎn)。散點(diǎn)圖經(jīng)常與回歸線（就是最準(zhǔn)確地貫穿所有點(diǎn)的線）結(jié)合使用，歸納分析現(xiàn)有數(shù)據(jù)以進(jìn)行預(yù)測(cè)分析。

氣泡圖是一種多變量圖表，是散點(diǎn)圖的變體，也可以認(rèn)為是散點(diǎn)圖和百分比區(qū)域圖的組合。與散點(diǎn)圖一樣，氣泡圖使用笛卡爾坐標(biāo)系沿網(wǎng)格繪制點(diǎn)，其中 X 和 Y 軸是單獨(dú)的變量。然而，與散點(diǎn)圖不同，每個(gè)點(diǎn)都分配有標(biāo)簽或類別（顯示在圖例旁邊或圖例上）。然后，每個(gè)繪制點(diǎn)通過(guò)其圓的面積表示第三個(gè)變量。

顏色還可用于區(qū)分類別或用于表示附加數(shù)據(jù)變量。時(shí)間可以通過(guò)將其作為一個(gè)軸上的變量來(lái)顯示，也可以通過(guò)動(dòng)畫(huà)數(shù)據(jù)變量隨時(shí)間變化來(lái)顯示。

氣泡圖通常用于通過(guò)使用定位和比例來(lái)比較和顯示分類圓圈之間的關(guān)系。氣泡圖的整體情況可用于分析模式/相關(guān)性。太多的氣泡會(huì)使圖表難以閱讀，因此氣泡圖的數(shù)據(jù)大小容量有限。

這可以通過(guò)交互來(lái)解決：?jiǎn)螕艋驊彝Ｔ跉馀萆弦燥@示隱藏信息，可以選擇重新組織或過(guò)濾分組類別。與比例面積圖一樣，需要根據(jù)圓的面積而不是半徑或直徑來(lái)繪制圓的大小。圓圈的大小不僅會(huì)呈指數(shù)級(jí)變化，還會(huì)導(dǎo)致人類視覺(jué)系統(tǒng)產(chǎn)生誤解。

9. 漏斗圖和金字塔圖

漏斗圖往往展現(xiàn)的是每個(gè)階段數(shù)據(jù)的減少情況，例如在銷(xiāo)售中各個(gè)階段的流失情況。金字塔圖是由多個(gè)塔層組成的金字塔形狀的圖形，其中每個(gè)塔層的高度和其點(diǎn)的值有關(guān)。在技術(shù)層面上，金字塔圖是一個(gè)倒置的漏斗圖（沒(méi)有漏斗頸）。

10. 雷達(dá)圖

雷達(dá)圖又稱極地圖、蜘蛛圖。雷達(dá)圖的 X 軸展現(xiàn)為雷達(dá)圖的圓周（即沿著圖形的圓周的是 X 軸），Y 軸則表現(xiàn)為圓心到圓的頂端（即圓的半徑線），即極地圖中的圓周線、半徑線及相關(guān)的文字可以通過(guò)坐標(biāo)軸相關(guān)的配置來(lái)控制。

雷達(dá)圖能直觀地呈現(xiàn)某一個(gè)對(duì)象多維度的數(shù)據(jù)，幫助我們了解該對(duì)象的能力分布情況，常被應(yīng)用于能力評(píng)分、用戶畫(huà)像等場(chǎng)景。那么什么是多維度呢？即要求數(shù)據(jù)組中的數(shù)據(jù)可以被歸類為多個(gè)互相獨(dú)立的類目。

雷達(dá)圖實(shí)際的運(yùn)用價(jià)值，具體可以分兩部分：一是在描述單一對(duì)象上的運(yùn)用，二是在對(duì)比多個(gè)對(duì)象上的運(yùn)用。使用建議：指標(biāo)得分接近圓心，說(shuō)明處于較差狀態(tài)，應(yīng)分析改進(jìn)；指標(biāo)接近圓的頂端，說(shuō)明度量值越高；數(shù)量控制在5-8個(gè)最佳。

11. 瀑布圖

瀑布圖是用一系列正負(fù)值的形式表現(xiàn)數(shù)個(gè)數(shù)值累計(jì)及變化情況，因其形似瀑布流水而得名。

12. 誤差線圖

誤差線圖通常表示數(shù)據(jù)的可變范圍、誤差范圍。誤差條可用作圖形增強(qiáng)功能，可將繪制數(shù)據(jù)在笛卡爾圖上的可變性可視化。誤差條可應(yīng)用于散點(diǎn)圖、點(diǎn)圖、條形圖或折線圖等圖表，以提供所呈現(xiàn)數(shù)據(jù)的額外細(xì)節(jié)層。

誤差條有助于指示估計(jì)的誤差或不確定性，以大致了解測(cè)量的精確度。通常，誤差線用于顯示范圍數(shù)據(jù)集中的標(biāo)準(zhǔn)偏差、標(biāo)準(zhǔn)誤差、置信區(qū)間或最小值和最大值。

為了可視化這些信息，誤差線通過(guò)繪制從繪制數(shù)據(jù)點(diǎn)（或帶有條形圖的邊緣）的中心延伸的帶帽尖的線來(lái)工作。誤差條的長(zhǎng)度有助于揭示數(shù)據(jù)點(diǎn)的不確定性：較短的誤差條表示值集中，表示繪制的平均值更準(zhǔn)確，而較長(zhǎng)的誤差條表示值更分散，并且不太可靠。

同樣取決于數(shù)據(jù)的類型，每對(duì)誤差條的長(zhǎng)度往往在兩側(cè)的長(zhǎng)度相同。但是，如果數(shù)據(jù)有偏差，那么每一邊的長(zhǎng)度就會(huì)不

平衡。誤差線始終平行于定量刻度軸，因此它們可以垂直或水平顯示，具體取決于定量刻度是在 Y 軸還是 X 軸上。如果

有兩個(gè)定量標(biāo)尺，則兩對(duì)誤差條可用于兩個(gè)軸。

13. 徑向條形圖

徑向條形圖只是在極坐標(biāo)系上繪制的條形圖，而不是在笛卡爾坐標(biāo)系上。雖然它們看起來(lái)很酷，但徑向條形圖的問(wèn)題在

于條形長(zhǎng)度可能會(huì)被誤解。即使它們代表相同的值，外部的每個(gè)條形都相對(duì)較長(zhǎng)。

這是因?yàn)槊總€(gè)條必須有不同的半徑，所以每個(gè)條都根據(jù)它的角度來(lái)判斷。我們的視覺(jué)系統(tǒng)更擅長(zhǎng)解釋直線，因此笛卡爾

條形圖是比較值的更好選擇。因此，徑向條形圖主要是為了視覺(jué)美觀的原因。

七、常用的圖表開(kāi)源網(wǎng)站

1. echartsecharts

網(wǎng)站鏈接：https://echarts.apache.org/examples/zh/index.html

2. highcharts

網(wǎng)站鏈接：https://www.highcharts.com.cn/demo/highcharts

3. antv

網(wǎng)站鏈接：https://antv-g2.gitee.io/zh/examples/gallery

八、回顧總結(jié)

我們回顧一下，這篇文章主要是講了三個(gè)部分：

第一部分主要說(shuō)明一下什么是數(shù)據(jù)可視化，講的是數(shù)據(jù)可視化基本的原則，就是將具有價(jià)值的數(shù)據(jù)和洞察，通過(guò)簡(jiǎn)潔、準(zhǔn)確、突出洞察的圖表表現(xiàn)出來(lái)。以及根據(jù)GLAD原則去評(píng)判一個(gè)圖表的好壞；

第二部分主要說(shuō)明了一個(gè)圖表的組成都有哪些？從而做為我們可以優(yōu)化圖表的方向；

第三部分主要介紹了一些比較常見(jiàn)的圖表類型，從開(kāi)發(fā)的角度去考慮實(shí)現(xiàn)以及思考如何能夠更好全面地掌握每一個(gè)圖表

細(xì)節(jié)。

文章參考

【1】數(shù)據(jù)可視化設(shè)計(jì)必修課（一）：圖表篇：https://www.uisdc.com/data-visualization-chart

【2】圖表來(lái)源：https://www.highcharts.com.cn/demo/highcharts

https://antv-2018.alipay.com/zh-cn/vis/chart/index.html

【3】政務(wù)可視化設(shè)計(jì)經(jīng)驗(yàn)-圖表習(xí)慣：https://tob.design/#/experience/detail/307

【4】參考書(shū)籍：《樂(lè)見(jiàn)數(shù)據(jù)：商業(yè)數(shù)據(jù)可視化思維》

本文由郝小七指導(dǎo)http://m.codemsi.com/u/917803

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

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。