一、前言

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

更多圖表干貨：

二、圖表的組成

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

1. 底層元素

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

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

2. 中層元素

中層元素內容包括圖例、圖形、標簽、時間軸等承載主要數據信息的元素，是圖表中表達數據的關鍵元素。

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

3. 頂層元素

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

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

三、圖表信息詳解

1. 圖表標題

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

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

圖表標題示例

2. 圖例

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

①分類圖例

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

視覺標記

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

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

在同一類圖表類型中需使用相同的形狀，不同類型的圖表建議使用不同形態的圖例，以確保在復合圖表中通過不同形狀的圖例區分圖表類型；

布局

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

操作

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

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

②連續圖例

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

布局

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

操作

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

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

3. 坐標系

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

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

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

兩種常見的坐標系

①坐標軸

坐標軸是坐標系的構成要素，是定義域軸和值域軸的統稱，由軸標題、軸標簽、軸線、軸刻度線、網格線組成。

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

軸類型

根據坐標軸對應的變量是連續數據還是離散數據，將坐標軸分成連續軸、時間軸、分類軸三大類。

軸標題

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

軸標簽

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

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

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

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

3）y軸標簽-標簽數量

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

4）y軸標簽-取值范圍

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

5）y軸標簽-數據格式

標簽保留的小數位數保持統一，不要因為某些軸標簽是整數值，就略去小數點。

軸刻度

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

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

軸線

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

網格線

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

4. 提示信息

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

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

5. 時間軸

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

時間軸

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

時間軸的位置

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