聲明：本文基于前公司項目和 Ant Design 和相關文章研究做的分析與總結，整理出來便于查閱，不足之處，歡迎指正。

數據可視化主要從可視化原則、圖表解構、可視化色板、可視化圖表這 4 個方面進行闡述。

一、可視化原則

數據可視化是把相對復雜、抽象的數據通過可視化手段，表達數據內在的信息和規律，促進數據信息的傳播和應用。

Dreawer Design 團隊總結了以下四個可視化原則，供設計者參考及使用：

1. 準確

數據圖表需精準、如實地反應數據信息的變化特征。

2. 清晰

讓設計服務于數據內容，給用戶以最為清晰、明確、迅捷的數據展示。用戶看到可視化圖表時，應能在 5 秒內了解到它的用途，而不是花幾分鐘都不能理解各個數據的含義。

3. 簡單

可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。

下面為圖標類型與認知成本對比：

4. 美觀

優秀的數據可視化界面，會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局、結構和內容。

二、圖表解構

1. 構成元素

我們從標題、坐標軸、圖例、標簽、提示信息、數據圖形這 6 個大類，對數據圖表進行進一步元素拆解及闡述。設計過程中，需遵循可視化原則來精簡數據圖表，讓用戶快速獲取圖表中的關鍵信息，完成任務。

圖表構成 6 大類，元素細分：

1. 標題：圖表標題；
2. 坐標軸：X/Y 軸線、刻度線、網格線、X/Y 軸標題、X/Y 軸標簽；
3. 標簽：數據點、引導線、（文本）數據值；
4. 提示信息；
5. 圖例；
6. 數據圖形：線、矩形、扇形、環形等。

下面為數據圖表的基本構成元素示例（為了便于觀察，某些字母做了大寫處理）：

除了以上的常規元素，還有常用于餅圖、環形圖中的“引導線”：

2. 標題

標題是概括圖表主題的說明文字，一個明確、精簡的標題可以迅速讓讀者理解圖表要表達的內容。

① 位置

一般位于數據圖表卡片的左上方。

② 使用建議

標題需言簡意賅、符合圖表主題；盡量控制在 20 個字以內，標題寬度盡量不要超過卡片寬度。

③ 超長處理

當標題超過長出卡片寬度時，省略標題中間的文字，保住首尾，如“我是...標題”。

3. 坐標軸

① 坐標系

坐標軸包含在坐標系的概念里，因此，我們需要先了解坐標系。坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統，更偏向數學/物理概念。

數據可視化中，最常用的二維坐標系有兩種：

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

補充說明：

1. 坐標軸由定義域軸（X 軸）和值域軸（Y 軸）組成。條形圖中，定義域軸為 Y 軸，值域軸為 X 軸。
2. X 軸為水平方向的橫軸，Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標系的坐標軸構成進行分析：

② 坐標軸

定義：坐標軸指二維空間中統計圖表中的軸，是坐標系的構成部分，它用來定義坐標系中數據在方向和值之間的映射關系。

構成元素細分：X/Y 軸線、刻度線、網格線、X/Y 軸標題、X/Y 軸標簽。

③ 軸類型

根據對應變量是連續數據還是離散數據，可以把坐標軸分為：分類軸、時間軸、連續軸三大類。

④ X/Y 軸線

顏色層級：X/Y 軸線要比網格線層級高、顏色深，這樣能讓圖表有主次區分。

使用建議：有網格線時，柱狀圖/折線圖會隱藏 Y 軸線，條形圖則是隱藏 X 軸線，以達到信息降噪、突出重點的目的。

⑤ 刻度線

軸刻度線是軸線上的小線段， 用于指示數值標簽在坐標軸上的具體位置。軸刻度線有 3 種放置方式：置內、置中（即交叉方式）、置外。

位置建議：刻度線置中/置內時，可能會和網格線、數據圖形重疊，所以建議將刻度線置于數值坐標軸外側，以呈現最佳顯示效果。

顯示建議：

1. 折線圖：刻度線、X/Y 軸標簽、數據點需要保持在同一垂直線上；
2. 柱狀圖/條形圖：由于單個柱子有很強的對應關系，此時可以隱藏刻度線；

⑥ 網格線

定義：網格線是用來輔助圖表優化映射關系的，我們需要弱化網格線的視覺效果，來增加數據的可閱讀性。

作用：1. 延伸數值刻度至可視化對象中，以便觀察數據值的大?。?. 增加可視化對象之間的對比觀察度。

使用建議 1：使用網格線時，需遵從主次原則，以軸線為主、網格線為輔；樣式上可采用實線或虛線；避免顏色過重、使用純黑/純白色。

使用建議 2：網格線一般跟隨值域軸的位置單向顯示，柱狀圖、折線圖等采用水平網格，條形圖采用垂直網格。

⑦ X/Y 軸標題

軸標題主要用于說明坐標軸數據組的含義，也可理解為“軸單位”。當可視化圖表標題、圖例、軸標簽等已能充分表達數據含義時，可隱藏軸標題。

這樣處理體現了奧卡姆剃刀定律：如無必要，勿增實體。

⑧ X/Y 軸標簽

軸標簽是對當前某一組數據的內容標注，用于提高數據的可讀性。

以下從 X 軸標簽、Y 軸標簽兩方面進行分析：

a. X 軸標簽

X 軸標簽的設計重點在顯示規則上?？ㄆ瑢挾冗^窄、標簽過多、名稱過長時，X 軸標簽便會出現顯示問題（如標簽重疊等）。

為了解決顯示問題，我們從連續/時間軸標簽（數值類）、分類軸標簽（文本類）兩方面進行分析：

連續/時間軸標簽

1. 顯示規則：建議等分抽樣顯示、旋轉；不尾部省略。
2. 建議等分抽樣：連續/時間軸，通常由一組等差數列組成，具有規律性，缺失的數據用戶會在腦海中自動補全。所以建議用等分抽樣來避免標簽的重疊問題。

注意：等分抽樣盡量保留首尾數據標簽；隨機抽樣沒有規律，會影響用戶的判斷及辨認，不建議采取隨機抽樣顯示。

連續/時間軸標簽是由“關鍵數值”組成的標注點，一般都明確精簡，尾部省略會影響用戶對關鍵數值的辨認。

為了保證標簽的辨識度，我們可以將標簽旋轉 45°、90° 。極端情況下（圖表寬度極窄），可以同時進行旋轉+抽樣。

分類軸標簽

顯示規則：建議旋轉顯示；不建議抽樣顯示。

分類軸由幾個離散數據標簽組成，標簽之間獨立存在，無緊密邏輯關系，用戶無法自動補全缺失信息。因此，不能采取抽樣顯示，應盡量展示全部標簽的全部文本。

若標簽橫向展示空間不夠（文字重疊），我們可以將標簽旋轉 45°、90° 來達到預期顯示效果。若通過旋轉無法滿足需求，可使用條形圖，將分類軸放在 Y 軸。

旋轉方向說明：通常情況下，用戶的閱讀視線為從左至右、從上到下。因此，標簽順時針旋轉 45° 更符合用戶的瀏覽習慣。

b. Y 軸標簽

Y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度進行自適應縮放。

軸標簽的數量

使用建議：根據米勒定律（7±2 法則），Y 軸標簽數量應控制在 5-9 個的范圍內；Web 頁面中，Y 軸常用標簽數為：6 或 7（含標簽 0）。

軸標簽的數量越多，橫向網格線就會越多。過多的軸標簽及網格線會造成元素冗余，違背了清晰、準確的可視化原則，也不利于圖表信息的表達及閱讀。

對齊方式：右對齊

軸標簽的取值范圍

基準線：Y 軸標簽取值應從 0 基線開始，以反映數據的真實性。如果展示被截斷的 Y 軸數據，會導致用戶做出錯誤的判斷。

軸標簽的數據格式

使用建議 1： 標簽保留的小數位數保持統一。

4. 數據標簽

數據標簽是對數據點對應數值的標注，用于直接觀察每個數據點的具體數值。

若圖表主要是用來看趨勢變化、占比大小等，則不需要顯示數據標簽。若想精確了解每組數據的具體數值，則可以顯示數據標簽。

① 位置

數據標簽位于數據點的上方。

② 顯示規則

在不同類型的圖表中，數據標簽的顯示規則不同。我們可以根據數據圖形、數據值的特性，選擇合適的顯示方式，提高圖表的準確性。

a. 柱狀圖

基礎柱狀圖：數據標簽可顯示在數據圖形內部、外部。

數據標簽在圖形內部的顯示規則：正常情況下，橫向顯示；數據標簽超長時，旋轉 90°；圖形高度 < 數據標簽高度時，不顯示數據標簽。

分組柱狀圖：數據標簽可顯示在數據圖形內部、外部。顯示在內部的數據標簽顯示寬度不夠時，解決方案同上。

堆疊柱狀圖：數據標簽顯示在數據圖形內部。

數據標簽在圖形內部的顯示規則：正常情況下，橫向顯示；數據標簽超長時，旋轉 90°；圖形高度 < 數據標簽高度時，不顯示數據標簽。

b. 條形圖

數據標簽在圖形內部的顯示規則：正常情況下，橫向顯示；圖形寬度 < 數據標簽高度時，不顯示數據標簽；條形圖高度需 >= 數據標簽高度。

基礎、分組條形圖的數據標簽也可以顯示在圖形外部：

c. 折線圖

數據標簽顯示在數據點的上方。

圖表寬度過窄，數據點多且密時，相鄰的數據標簽會出現重疊的問題。此時，我們會采用抽樣的方式顯示數據標簽。鼠標懸停數據點，顯示隱藏的數據標簽。

d. 餅圖、環形圖

數據標簽顯示在圖形內部、外部均可。

由于扇形有角度，且形狀相對不規則，對數據標簽的文本長度包容度較低，環形更是如此。所以，當扇/環形分割過多、面積較小時，建議將數據標簽顯示在圖形外部。

當然，我們也可以內外部結合使用：

e. 數據標簽顏色

數據標簽顯示在圖形內部時，圖形為背景，數據標簽為前景。此時，數據圖形作為背景色，會影響到數據標簽的顯色度及易讀性。

為了確保良好的可讀性，我們通過對圖形顏色 HS 值的判斷，來決定文字的顏色。這樣對比度就在可控范圍內，不會出現可讀性低的問題。

由于篇幅問題，剩余內容接下一篇文章展示。