本文基于前公司項目和 Ant Design 和相關文章研究做的分析與總結，整理出來便于查閱，不足之處，歡迎指正。數據可視化主要從可視化原則、圖表解構、可視化色板、可視化圖表這 4 個方面進行闡述。上文回顧：

5. 提示信息

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

當你希望數據可視化作品對用戶的操作有所反饋時，提示信息就可以發揮作用。

1. 類型

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

① 懸浮

鼠標懸停數據列，提示信息以浮層的形式展示 懸停列坐標點 的位置及 X/Y 軸對應數據。

優點：提示信息離數據點較近，便于觀察數據點的詳細信息。缺點：提示浮層會遮擋部分數據圖形，影響觀察。

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

② 固定位置

鼠標懸停數據列，提示信息與圖例組合顯示，顯示區域固定。（如下圖，提示信息固定顯示在圖表右上角）

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

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

③ 固定在軸上

當鼠標懸停數據圖形關鍵點時，提示信息會顯示在對應的 X/Y 軸上。

優點：能實時、準確地反映單個數據點的具體信息。缺點：提示信息會遮蓋軸標簽；只能提示單個點的信息，不能同時提示同一列多個數據點的信息；提示信息離數據點距離較遠。

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

④ 固定在圖形上

當鼠標懸停在單個數據圖形上時，提升信息顯示于圖表固定區域內。鼠標懸停在不同的數據圖形上，提示信息的內容會發生對應的切換。

優點：所見即所得。缺點：顯示區域有限，提示文字過長會引起顯示問題。

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

六、圖例

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

當出現多個分類的數據列時，會通過圖例來對不同的數據列進行區分、說明，以降低圖表的理解難度。

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

1. 位置

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

2. 類型

根據數據類型不同，分為連續型圖例和分類型圖例；

根據狀態不同，圖例可以被設置為靜態或可交互態。

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

靜態、帶交互態的連續圖例的使用（包括其對應的數據圖表）則有一定的專業度及難度。（連續圖例暫不做深度分析）

3. 使用建議

分類圖例中的圖形是數據圖形的縮影。不同的數據圖表，對應的圖例也不同。

7. 數據圖形

人在視覺上對圖形的獲取及理解效率遠高于文字，區別于表格和文本信息，數據圖形能更有效的表達數據特性、傳遞映射關系。

1. 位置

數據圖形是圖表中最重要的組成部分，位于數據圖表的中部，坐標軸的內部。圖表的構成元素均圍繞 數據圖形 進行可視化數據表達。

2. 類型

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

3. 使用建議

三、可視化色板

可視化圖表中往往不止一組數據，當我們需要對比多分類、多分組數據時，單一的配色便不能滿足統計需求。因此，基于數據可視化原則，我們總結了一套可視化基礎色板。

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

1.0 的可視化色板暫只研究基礎色板部分，其他的色板模式后期進行優化深入。

1. 基礎色板

數據可視化色板是在基礎色板以及中性色板的基礎上，融合「有效、清晰、準確、美」的原則產生的。

色板以 Dreawer Design 深海藍為起始主色，根據不同數據類型、使用場景整理了——基礎10色、擴展20色，以滿足不同數據圖表的需求。

2. 使用建議

2.1 顏色不宜過多

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

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

2.2 配合圖例

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

2.3. 無障礙設計

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

四、可視化圖表

目前我們工作中經常遇到的數據可視化，大多數是制作數據圖表。數據圖表可以使復雜的統計數字簡單化、通俗化、形象化，使人一目了然，便于理解和比較。因此，數據圖表在統計資料整理與分析中占有重要地位，并得到廣泛應用。
目前 1.0 版本的可視化圖表主要從最常用的柱狀圖、條形圖、折線圖、餅圖闡述，后期體系完善后再做增改。

1. 柱狀圖

柱狀圖是用豎直的柱子來展現數據，一般用于展現橫向的數據變化及對比。區別于直方圖，柱狀圖無法顯示數據在一個區間內的連續變化趨勢。

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

1.1 基礎柱狀圖

基礎柱狀圖是最常見、最簡單的柱狀圖。

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

1.2 分組柱狀圖

當使用者需要在同一個軸上顯示各個分類下不同的分組時，需要用到分組柱狀圖。用于對比：同一分組內，不同分類的大??；不同分組間，相同分類的大小。每個分組中的柱子使用不同的顏色區別各個分類，各個分組之間要保持間隔。在分組柱狀圖中，通常沿垂直軸（Y 軸）組織數值，而沿水平軸（X 軸）組織類別。

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

1.3 堆疊柱狀圖

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

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

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

2. 條形圖

條形圖是用橫向的柱子來展現數據，一般用于縱向的數據排名及對比。其中一個軸表示需要對比的分類維度，另一個軸代表相應的數值。

條形圖分為：基礎條形圖、分組條形圖、堆疊條形圖。

2.1 基礎條形圖

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

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

使用建議：條形統計圖表，整體高度盡量控制在一屏內（高度 <= 700px），便于觀察數據。

2.2 分組條形圖

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

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

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

2.3 堆疊條形圖

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

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

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

3. 折線圖

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

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

使用建議：折線數量一般控制在 5 個以內，最多不要超過 7 個。

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

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

曲線圖

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

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

4. 餅圖

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

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

環形圖

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

由于環形圖中部挖空，它的空間利用率會更高，我們可以在空心區域顯示圖表的標題、數值等關鍵信息。

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

參考文章：

數據可視化 - 圖表
B 端產品設計體驗-數據圖表篇
設計師要了解的數據可視化基礎篇
數據可視化指南：那些高手才懂的坐標軸設計細節
關于數據可視化細節設計
關于數據可視化色板
初識數據可視化——圖表（基礎篇）
?B 端產品設計｜數據可視化圖表選擇篇
燈果可視化文檔中心
18 個數據圖表的使用技巧
數據可視化 10 條法則
刪除、弱化、組織、強調
數據可視化之常見 12 種圖表類型分析
干貨分享：聽說你想做一份高級的可視化圖表？
關于各種圖表的使用細節
圖表構成