本文介紹了數(shù)據(jù)可視化的基本原則、圖表類型、色板選擇和使用建議，旨在幫助讀者系統(tǒng)地理解和應(yīng)用數(shù)據(jù)可視化，提升信息傳達(dá)的效率。

5. 提示信息

提示信息，是指當(dāng)鼠標(biāo)懸停或手指點按在數(shù)據(jù)圖形上時，以交互的方式展示 懸停坐標(biāo)點 的位置及對應(yīng)數(shù)據(jù)，比如該點的數(shù)據(jù)單位、數(shù)值、顏色形狀、分類等，幫助用戶快速獲取圖形的關(guān)鍵數(shù)據(jù)。

當(dāng)你希望數(shù)據(jù)可視化作品對用戶的操作有所反饋時，提示信息就可以發(fā)揮作用。

類型

提示信息的展現(xiàn)形式有4種。按不同的圖表類型，分為：懸浮、固定位置、固定在軸上、固定在圖形上。

懸浮

鼠標(biāo)懸停數(shù)據(jù)列，提示信息以浮層的形式展示 懸停列坐標(biāo)點 的位置及 X/Y 軸對應(yīng)數(shù)據(jù)。

優(yōu)點：提示信息離數(shù)據(jù)點較近，便于觀察數(shù)據(jù)點的詳細(xì)信息。缺點：提示浮層會遮擋部分?jǐn)?shù)據(jù)圖形，影響觀察。

使用場景：建議在寬度/空間富裕、圖表功能復(fù)雜的 Web 電腦端使用；柱狀圖、條形圖、折線圖、餅圖、環(huán)形圖均可使用，使用場景較為廣泛。

固定位置

鼠標(biāo)懸停數(shù)據(jù)列，提示信息與圖例組合顯示，顯示區(qū)域固定。（如下圖，提示信息固定顯示在圖表右上角）

優(yōu)點：不會遮擋數(shù)據(jù)圖形，既能縱觀全局，又能查看局部信息。缺點：數(shù)據(jù)點離提示信息較遠(yuǎn)，視線來回跳動，易視覺疲勞；懸停的交互及數(shù)值變化容易被忽視；和圖例的篩選功能可能互斥。

使用場景：常用于寬度/空間有限、使用浮層提示易遮擋大部分?jǐn)?shù)據(jù)圖形的移動端，也可用于Web電腦端；多用于折線圖中。

固定在軸上

當(dāng)鼠標(biāo)懸停數(shù)據(jù)圖形關(guān)鍵點時，提示信息會顯示在對應(yīng)的X/Y軸上。

優(yōu)點：能實時、準(zhǔn)確地反映單個數(shù)據(jù)點的具體信息。缺點：提示信息會遮蓋軸標(biāo)簽；只能提示單個點的信息，不能同時提示同一列多個數(shù)據(jù)點的信息；提示信息離數(shù)據(jù)點距離較遠(yuǎn)。

使用場景：多用于連續(xù)/時間軸標(biāo)簽抽樣顯示的折線圖中(如某個時間周期下的走勢折線圖)；不適合用于指向明顯的柱狀圖/條形圖中，也不適合用于極坐標(biāo)系下的餅圖/環(huán)形圖中。

固定在圖形上

當(dāng)鼠標(biāo)懸停在單個數(shù)據(jù)圖形上時，提升信息顯示于圖表固定區(qū)域內(nèi)。鼠標(biāo)懸停在不同的數(shù)據(jù)圖形上，提示信息的內(nèi)容會發(fā)生對應(yīng)的切換。

優(yōu)點：所見即所得。缺點：顯示區(qū)域有限，提示文字過長會引起顯示問題。

使用場景：用于Web 電腦端、移動端均可；用于環(huán)形圖中。

6. 圖例

圖例是對數(shù)據(jù)圖形的補充說明，它以不同的形狀、顏色、文字等表示不同數(shù)據(jù)列。用戶通過點擊圖例可以顯示或隱藏該數(shù)據(jù)列，對數(shù)據(jù)列進(jìn)行篩選、對比。

當(dāng)出現(xiàn)多個分類的數(shù)據(jù)列時，會通過圖例來對不同的數(shù)據(jù)列進(jìn)行區(qū)分、說明，以降低圖表的理解難度。

同一個數(shù)據(jù)圖表中只有一個數(shù)據(jù)列時，數(shù)據(jù)信息已足夠清晰明確，無需圖例進(jìn)行補充說明。

位置

一般位于數(shù)據(jù)圖表卡片的右上方、右方、下方。其中右上方對數(shù)據(jù)圖表的干擾最小、適用場景最多。

類型

根據(jù)數(shù)據(jù)類型不同，分為連續(xù)型圖例和分類型圖例；根據(jù)狀態(tài)不同，圖例可以被設(shè)置為靜態(tài)或可交互態(tài)。

帶交互態(tài)的分類圖例，在柱狀圖、條形圖、折線圖、餅圖、環(huán)形圖中最為常見，用法等也容易理解。

靜態(tài)、帶交互態(tài)的連續(xù)圖例的使用（包括其對應(yīng)的數(shù)據(jù)圖表）則有一定的專業(yè)度及難度。（連續(xù)圖例暫不做深度分析）

使用建議

分類圖例中的圖形是數(shù)據(jù)圖形的縮影。不同的數(shù)據(jù)圖表，對應(yīng)的圖例也不同。

7. 數(shù)據(jù)圖形

人在視覺上對圖形的獲取及理解效率遠(yuǎn)高于文字，區(qū)別于表格和文本信息，數(shù)據(jù)圖形能更有效的表達(dá)數(shù)據(jù)特性、傳遞映射關(guān)系。

位置

數(shù)據(jù)圖形是圖表中最重要的組成部分，位于數(shù)據(jù)圖表的中部，坐標(biāo)軸的內(nèi)部。圖表的構(gòu)成元素均圍繞 數(shù)據(jù)圖形 進(jìn)行可視化數(shù)據(jù)表達(dá)。

類型

按照基礎(chǔ)圖表類型，圖形可分為：柱條、折線、面積、餅/環(huán)、散點、氣泡。

使用建議

03 可視化色板

可視化圖表中往往不止一組數(shù)據(jù)，當(dāng)我們需要對比多分類、多分組數(shù)據(jù)時，單一的配色便不能滿足統(tǒng)計需求。因此，基于數(shù)據(jù)可視化原則，我們總結(jié)了一套可視化基礎(chǔ)色板。

首先，色板要有豐富的配色用以區(qū)分信息層級，使得圖表在操作指引、交互反饋上有一定的準(zhǔn)確性。其次，可視化色板顏色的灰度需對比明顯，使得圖表對色盲、色弱人士有更好的包容性。

1.0 的可視化色板暫只研究基礎(chǔ)色板部分，其他的色板模式后期進(jìn)行優(yōu)化深入。

1. 基礎(chǔ)色板

數(shù)據(jù)可視化色板是在基礎(chǔ)色板以及中性色板的基礎(chǔ)上，融合「有效、清晰、準(zhǔn)確、美」的原則產(chǎn)生的。

色板以 Dreawer Design 深海藍(lán)為起始主色，根據(jù)不同數(shù)據(jù)類型、使用場景整理了——基礎(chǔ)10色、擴(kuò)展20色，以滿足不同數(shù)據(jù)圖表的需求。

2. 使用建議

顏色不宜過多

圖形顏色過多會給用戶一種眼花繚亂的感覺，不利于數(shù)據(jù)圖表信息的有效傳達(dá)，這違背了清晰、準(zhǔn)確的可視化原則。

根據(jù)米勒定律（7±2 法則），數(shù)據(jù)圖形的顏色盡量控制在5個以內(nèi)，最多不要超過9個。若實際操作中無法避免顏色過多的問題，則可通過圖例進(jìn)行信息篩選，來達(dá)到對比清晰的目的。

配合圖例

僅靠顏色區(qū)分不同的數(shù)據(jù)列是不夠的，我們需要用圖例提示不同顏色代表的數(shù)據(jù)類別。

無障礙設(shè)計

色板顏色的灰度需對比明顯，顏色排列需明暗交替，這樣色盲、色弱人士便可根據(jù)不同的明暗度來區(qū)分不同顏色。

04 可視化圖表

目前我們工作中經(jīng)常遇到的數(shù)據(jù)可視化，大多數(shù)是制作數(shù)據(jù)圖表。數(shù)據(jù)圖表可以使復(fù)雜的統(tǒng)計數(shù)字簡單化、通俗化、形象化，使人一目了然，便于理解和比較。因此，數(shù)據(jù)圖表在統(tǒng)計資料整理與分析中占有重要地位，并得到廣泛應(yīng)用。

目前 1.0 版本的可視化圖表主要從最常用的柱狀圖、條形圖、折線圖、餅圖闡述，后期體系完善后再做增改。

1. 柱狀圖

柱狀圖是用豎直的柱子來展現(xiàn)數(shù)據(jù)，一般用于展現(xiàn)橫向的數(shù)據(jù)變化及對比。區(qū)別于直方圖，柱狀圖無法顯示數(shù)據(jù)在一個區(qū)間內(nèi)的連續(xù)變化趨勢。

使用垂直的長短柱子對比數(shù)值大小，其中一個軸表示需要對比的分類維度；另一個軸代表相應(yīng)的數(shù)值。柱狀圖又分為：基礎(chǔ)柱狀圖、分組柱狀圖、堆疊柱狀圖。

基礎(chǔ)柱狀圖

基礎(chǔ)柱狀圖是最常見、最簡單的柱狀圖。

使用建議：基礎(chǔ)柱狀圖中，分類建議在 10 個左右，最多不超過 20 個，分類過多不利于數(shù)據(jù)對比和觀察分析。如：右圖分類過多會影響X軸標(biāo)簽的展示及閱讀，同時也不利于觀察單個柱子對應(yīng)的Y軸數(shù)值，只能看到數(shù)值變化的大致波動。

分組柱狀圖

當(dāng)使用者需要在同一個軸上顯示各個分類下不同的分組時，需要用到分組柱狀圖。用于對比：同一分組內(nèi)，不同分類的大?。徊煌纸M間，相同分類的大小。每個分組中的柱子使用不同的顏色區(qū)別各個分類，各個分組之間要保持間隔。在分組柱狀圖中，通常沿垂直軸（Y軸）組織數(shù)值，而沿水平軸（X軸）組織類別。

使用建議：分組個數(shù)不要超過 12 個，每個分組下的分類不要超過 6 個；否則會導(dǎo)致單個柱子過多、過密，從而影響圖表的可讀性。

堆疊柱狀圖

堆疊柱形圖是一種用來分解整體、比較各部分的圖表。它是基礎(chǔ)柱狀圖的擴(kuò)展，不同的是，基礎(chǔ)柱狀圖的數(shù)據(jù)值為并行排列，堆疊柱圖則是一個個疊加起來的。

它可以對比每個分組的總量，也可以對比某一分組中不同分類的大小及占比，這些子分類一般用不同的顏色來指代。

使用建議：通常每個組包含 2 到 3 個分類即可，最多不要超過 6 個，太多的子分類數(shù)據(jù)會讓人眼花繚亂。

2. 條形圖

條形圖是用橫向的柱子來展現(xiàn)數(shù)據(jù)，一般用于縱向的數(shù)據(jù)排名及對比。其中一個軸表示需要對比的分類維度，另一個軸代表相應(yīng)的數(shù)值。

條形圖分為：基礎(chǔ)條形圖、分組條形圖、堆疊條形圖。

基礎(chǔ)條形圖

分類名稱較長、分類過多時，用條形圖展示數(shù)據(jù)更合適。

在 Web 電腦端頁面中，頁面的寬度是固定的。若分類名稱較長，柱狀圖會因為空間問題而傾斜顯示，或省略標(biāo)簽名稱，影響閱讀；若分類過多，柱狀圖會因為柱子過細(xì)、分布過密，而降低識別度。

使用建議：條形統(tǒng)計圖表，整體高度盡量控制在一屏內(nèi)（高度<=700px），便于觀察數(shù)據(jù)。

分組條形圖

分組條形圖，又叫簇狀條形圖，是一種以不同寬度的橫向柱子為變量的統(tǒng)計圖表。用于對比：同一分組內(nèi)，不同分類的大小；不同分組間，相同分類的大小。

每個分組中的柱子使用不同的顏色區(qū)別各個分類，各個分組之間要保持間隔。在分組柱狀圖中，通常沿垂直軸（Y軸）組織類別，而沿水平軸（X軸）組織數(shù)值。

使用建議：分組個數(shù)不要超過 12 個，每個分組下的分類不要超過 6 個；分組條形統(tǒng)計圖表，整體高度盡量控制在一屏內(nèi)（高度 <= 700px），便于觀察數(shù)據(jù)。

堆疊條形圖

堆疊條形圖將每個橫向柱子進(jìn)行分割，以顯示相同類型下各個數(shù)據(jù)的大小情況。

它可以對比每個分組的總量，也可以對比某一分組中不同分類的大小及占比，這些子分類一般用不同的顏色來指代。

使用建議：通常每個組包含 2 到 3 個分類即可，最多不要超過 6 個，太多的子分類數(shù)據(jù)會讓人眼花繚亂。

3. 折線圖

折線圖是通過線條的波動（上升或下降）來顯示連續(xù)數(shù)據(jù)隨時間或有序類別變化的圖表，常用于反映數(shù)據(jù)隨著時間推移而產(chǎn)生的變化趨勢。

使用場景：橫軸為連續(xù)類別（如時間）且注重變化趨勢、預(yù)測，適用于折線圖。

使用建議：折線數(shù)量一般控制在 5 個以內(nèi)，最多不要超過 7 個。

下圖為折線圖與柱狀圖的使用場景對比。

左圖是 2020 年商品營業(yè)額在 1 月到 10 月這個時間段的數(shù)值變化及趨勢分析，用折線圖表示；右圖是 2020 年不同品類商品營業(yè)額的數(shù)值對比，用柱狀圖表示。

曲線圖

曲線圖是折線圖的衍生。用平滑的曲線（而非直線）將折線圖中的數(shù)據(jù)點連接起來，就形成了曲線圖。

視覺上，曲線圖比折線圖更流暢、自然。

4. 餅圖

餅圖是用圓形及圓內(nèi)扇形的面積來表示數(shù)值大小的圖形，主要用于表示總體中各組成部分所占的比例。一般通過角度（或面積）來衡量各部分比例的大小不同。

使用建議：扇形分類盡量控制在 5 個以內(nèi)，最多不要超過 9 個；當(dāng)各部分占比差別不大時，可以用柱狀圖表示。

環(huán)形圖

環(huán)形圖，又叫甜甜圈圖，是挖去餅圖中間的部分所構(gòu)成的圖形。與餅圖不同的是，環(huán)形圖通過各個弧形的長度來衡量各部分的大小。

由于環(huán)形圖中部挖空，它的空間利用率會更高，我們可以在空心區(qū)域顯示圖表的標(biāo)題、數(shù)值等關(guān)鍵信息。

使用建議：環(huán)形分類盡量控制在5個以內(nèi)，最多不要超過9個；當(dāng)各部分弧長差別不大時，可以用柱狀圖表示。

最后

通過總結(jié)數(shù)據(jù)可視化的原則、圖表、色板等方面的內(nèi)容，將零散的知識點串聯(lián)到一起，希望能讓大家對數(shù)據(jù)可視化有一個系統(tǒng)性的認(rèn)識~