用一篇文章，帶你了解數(shù)據(jù)圖表的元素構(gòu)成

一、前言

在日常的工作中，我們經(jīng)常會涉及到各種數(shù)據(jù)圖表的設(shè)計，數(shù)據(jù)圖表可以直觀地展示數(shù)據(jù)的變化趨勢、差異和規(guī)律，使數(shù)據(jù)比較或變化趨勢變得一目了然，有助于人們快速、有效地表達數(shù)據(jù)關(guān)系。那么，數(shù)據(jù)圖表的基礎(chǔ)構(gòu)成有哪些？在設(shè)計過程中有哪些需要注意的點呢？今天筆者結(jié)合平時對于數(shù)據(jù)圖表的一些工作經(jīng)驗，分享一下數(shù)據(jù)圖表的基礎(chǔ)元素構(gòu)成。

更多圖表干貨：

二、圖表的組成

根據(jù)圖表元素的重要程度，我們按照“Z 軸”把粗略地把圖表元素分成三類，分別為“底層元素”“中層元素”和“頂層元素”，根據(jù)視覺強度分別設(shè)計三類元素，其中底層元素最弱，頂層元素最強。通過梳理圖表元素的前后關(guān)系，能夠清晰把握元素視覺層級，保證信息傳遞效率。

1. 底層元素

由背景層和坐標軸構(gòu)成，是整個圖表中視覺層級最弱的部分。

1. 背景層：通常為白色卡片；
2. 坐標軸：用于定義坐標系中數(shù)據(jù)在方向和值的映射關(guān)系。

2. 中層元素

中層元素內(nèi)容包括圖例、圖形、標簽、時間軸等承載主要數(shù)據(jù)信息的元素，是圖表中表達數(shù)據(jù)的關(guān)鍵元素。

1. 標簽：對當前這組數(shù)據(jù)進行內(nèi)容標注；
2. 圖形：圖表的視覺通道在形狀上映射的視覺展現(xiàn)；
3. 圖例：對圖形本身的概括，用來區(qū)分圖表中不同類別代表的數(shù)據(jù)含義；
4. 時間軸：輔助瀏覽數(shù)據(jù)的組件，可根據(jù)實際情況選擇是否展示。

3. 頂層元素

頂層元素包括懸停樣式、懸停后的提示信息等。

提示信息：當鼠標懸停在某個數(shù)據(jù)點時，以提示信息的形式展示該點的數(shù)據(jù)詳情，鼠標離開時，則提示信息消失。

三、圖表信息詳解

1. 圖表標題

圖表標題是對圖表主題的概況，通常位于圖表左上角，使用戶在瀏覽圖形時有一種先總后分的結(jié)構(gòu)性瀏覽順序。

1. 當圖表中存在對該圖表內(nèi)容的解釋性說明，可在標題右側(cè)配置圖表說明圖標，鼠標懸停至圖標時氣泡展示說明文字，鼠標離開則氣泡消失；
2. 圖表標題的表述應(yīng)當言簡意賅，其寬度不超過卡片寬度。

圖表標題示例

2. 圖例

圖例是對圖形本身的概括，用來區(qū)分圖表中不同類別代表的數(shù)據(jù)含義，它提供使用者以對照的方式來理解可視化對象的項目歸類，比較常見的有分類圖例和連續(xù)圖例。

①分類圖例

分類圖例常用于解釋圖表中分類數(shù)據(jù)信息，由視覺標記、文本標簽和值構(gòu)成，其中值為非必選項。

視覺標記

同一個圖表中不同的分類圖例不允許使用相同或相近的顏色，以防止混淆數(shù)據(jù)類型。

分類圖例中視覺標記的形狀：包括圓形、矩形、實線等，視覺標記建議使用與圖形區(qū)輪廓一致的幾何圖形；

在同一類圖表類型中需使用相同的形狀，不同類型的圖表建議使用不同形態(tài)的圖例，以確保在復(fù)合圖表中通過不同形狀的圖例區(qū)分圖表類型；

布局

分類圖例一般位于圖表的上方和右側(cè)。依據(jù)人的視覺“F 型”瀏覽動線，從上至下，從左往右，可把圖例放在圖表的左上角，用戶可以先看到顏色所映射的數(shù)據(jù)類型，再去看數(shù)據(jù)表現(xiàn)。當用戶需要多次來回對照圖例看圖形時，可將圖例放置在圖表右側(cè)，縮短用戶對照圖例和圖形的路徑，提高信息獲取效率。

操作

圖例可用于控制映射圖形的展示和隱藏，可根據(jù)實際業(yè)務(wù)需求配置啟用操作。

1. 當圖例高亮時，圖表正常顯示；
2. 點擊某一高亮圖例則該圖例置灰，圖形區(qū)隱藏映射的圖形；在圖例置灰情況下，點擊該圖例，則繪圖區(qū)展示映射的圖形；
3. 若將全部圖例點擊置灰，則圖形區(qū)不展示映射圖形。

②連續(xù)圖例

常用于解釋圖表中連續(xù)性數(shù)據(jù)信息，由視覺標記和邊界（值）組成。

布局

建議將連續(xù)圖例置于圖表左上方，以保證邊界（值）文字有較好的可讀性。

操作

圖例可用于控制映射圖形的展示和隱藏，可根據(jù)實際業(yè)務(wù)需求配置啟用操作。

1. 當圖例高亮時，圖表完全顯示；
2. 點擊某一高亮圖例則該圖例置灰，圖形區(qū)映射的圖形置灰；在圖例置灰情況下，點擊該圖例，則繪圖區(qū)展示映射的圖形；
3. 若全部圖例置灰，則圖形區(qū)映射圖形置灰。

3. 坐標系

坐標系是將兩種位置標度結(jié)合在一起組成的二維定位系統(tǒng)，描述數(shù)據(jù)是如何映射到圖形所在的平面。最常用的坐標系有兩種：笛卡爾坐標系和極坐標系，均為二維坐標系。

1. 笛卡爾坐標系即直角坐標系，是由相互垂直的兩條軸線構(gòu)成。用到直角坐標系的常見圖表有柱狀圖、折線圖、面積圖、條形圖等。
2. 極坐標系由極點、極軸組成，坐標系內(nèi)任何一個點都可以用極徑和夾角（逆時針）表示。用到極坐標系的圖表有餅圖、圓環(huán)圖、雷達圖等。

本文主要介紹的是笛卡爾坐標系（直角坐標系）。

兩種常見的坐標系

①坐標軸

坐標軸是坐標系的構(gòu)成要素，是定義域軸和值域軸的統(tǒng)稱，由軸標題、軸標簽、軸線、軸刻度線、網(wǎng)格線組成。

1. 軸標題（可選）：用于解釋軸的含義，一般為軸對應(yīng)數(shù)據(jù)字段的屬性名。
2. 軸標簽（可選）：表示量值的記號?？筛鶕?jù)圖表類型設(shè)置軸標簽是否展示；
3. ?軸刻度（可選）：指代標簽在坐標軸上的明確位置；
4. 軸線（可選）：X 軸（垂直）和 Y 軸（水平）用于界定圖表繪圖區(qū)的線條，用作度量的參照框架；
5. 網(wǎng)格線（可選）： 用于輔助圖表優(yōu)化數(shù)據(jù)值與圖形之間的映射關(guān)系。

軸類型

根據(jù)坐標軸對應(yīng)的變量是連續(xù)數(shù)據(jù)還是離散數(shù)據(jù)，將坐標軸分成連續(xù)軸、時間軸、分類軸三大類。

軸標題

通常建議加上軸標題以表達軸的含義，當圖表其他部分的內(nèi)容（圖表標題、圖形標簽）已能清楚表達軸的意義，可省略軸標題。

軸標簽

1）x軸標簽-連續(xù)軸/時間軸的標簽顯示

連續(xù)軸/時間軸，是由一組前后包含同等差值的等差數(shù)列組成，缺少幾個數(shù)值也能明顯看出中間的對應(yīng)關(guān)系。當多個標簽在容器內(nèi)全顯示發(fā)生重疊，我們可以利用抽樣顯示的手段來避免這種情況（什么是抽樣呢？當多個標簽在 x 軸無法完全顯示，優(yōu)先保留首尾標簽，其余標簽按同等步長間隔顯示）

2）x軸標簽-分類軸標簽顯示

分類軸由幾組離散數(shù)據(jù)組成，相互之間獨立存在，無緊密邏輯關(guān)聯(lián)。當分類軸標簽數(shù)量過多時，不建議使用抽樣，可將標簽順時針旋轉(zhuǎn) 45 度。

3）y軸標簽-標簽數(shù)量

y 軸標簽的數(shù)量不建議過多，太多的標簽必定導致橫向網(wǎng)格線變多，造成元素冗余，干擾圖形信息表達。根據(jù) 7±2 設(shè)計原則，y 軸標簽數(shù)量最多不超過這個范圍。

4）y軸標簽-取值范圍

y 軸標簽的取值應(yīng)從基點（一般為 0）開始，以較為客觀反映數(shù)據(jù)值。避免因展示截斷數(shù)據(jù)導致用戶做出錯誤的判斷。

5）y軸標簽-數(shù)據(jù)格式

標簽保留的小數(shù)位數(shù)保持統(tǒng)一，不要因為某些軸標簽是整數(shù)值，就略去小數(shù)點。

軸刻度

軸刻度是軸線上的小線段，可以清晰指代數(shù)值標簽在坐標軸上的明確位置。軸刻度通常不顯示，只有在肉眼無法定位到某個標簽對應(yīng)的數(shù)據(jù)點時，會顯示刻度線，輔助用戶定位，比如折線圖，或抽樣顯示的柱狀圖。

軸刻度線有：置內(nèi)、置中、置外三種形式，建議采用置外形式，將刻度置于坐標軸外側(cè)。

軸線

軸線可根據(jù)實際需要考慮是否顯示。如柱狀圖一般會隱藏 y 軸線和相應(yīng)刻度，通過網(wǎng)格線來保留標簽與數(shù)據(jù)值的對應(yīng)關(guān)系。從而達到信息降噪，突出視覺重點的目的。

網(wǎng)格線

網(wǎng)格線主要用來輔助圖表優(yōu)化數(shù)據(jù)值與圖形之間的映射關(guān)系等。當某些圖表去除軸線時，可通過保留網(wǎng)格線的方式，延伸數(shù)值刻度至可視化對象中以便觀察數(shù)據(jù)值的大小。

4. 提示信息

當鼠標懸停在圖形上時，以懸浮層的形式展示該點的數(shù)據(jù)，比如該點的值、數(shù)據(jù)單位等，幫助用戶快速獲取圖形的關(guān)鍵數(shù)據(jù)。

1. 標題文本：可承載文本，針對提示的內(nèi)容進行輔助說明；
2. 分類圖形：每個分類指標的圖形，顏色與圖表中分類的顏色一致；
3. 數(shù)值：承載文本，一般為指標名稱+指標數(shù)值；
4. 文字鏈接：用于跳轉(zhuǎn)至其他頁。

5. 時間軸

時間軸是輔助瀏覽數(shù)據(jù)的組件，它將大量數(shù)據(jù)濃縮在一個軸上，既可以縮小宏觀看數(shù)據(jù)全貌，又可以放大微觀看數(shù)據(jù)的片斷，同時還可以拖拽觀察數(shù)據(jù)在一定區(qū)間內(nèi)的演變。

時間軸

時間軸的位置：時間軸可出現(xiàn)在圖的四個方向，一般建議擺放在左、下、右方，上方因為有過多的圖表組件（標題、圖例、篩選器等）不建議擺放。

時間軸的位置

看到這里，相信你對數(shù)據(jù)圖表的構(gòu)成有了基礎(chǔ)的了解，了解清楚每個“部件”的定義以及用法能夠幫助我們更好地在工作中使用它，當然數(shù)據(jù)可視化的領(lǐng)域非常寬泛，保持對其它數(shù)據(jù)類產(chǎn)品的敏銳觀察，構(gòu)建自己的數(shù)據(jù)可視化思維，才能活學活用。希望今天的分享能夠帶給你一些不一樣的收獲。