你絕對想不到柱形圖背後有這麼多故事

作者 翎刀 螞蟻金服·資料體驗技術團隊

G2Plot 是 AntV 團隊打造的開箱即用、易於配置、具有良好視覺和互動體驗的通用統計圖表庫，本文介紹 G2Plot 在打造柱形圖背後的各種故事。

背景

柱形圖——人們最常使用的圖表之一，是一種使用矩形條，對不同類別進行數值比較的統計圖表。最基礎的柱形圖，需要一個分類變數和一個數值變數，在柱狀圖上，分類變數的每個實體都表示為一個矩形（通俗講即為“柱子”），而數值則決定了柱子的高度。

作為最常使用的圖表之一，柱狀圖也衍生出多種多樣的圖表形式，包括將多個並列的類別聚類形成一組形成的簇狀柱狀圖，將類別拆分成多個子類別形成的堆疊柱狀圖，橫向的柱狀圖條形圖等。

如下圖所示的柱狀圖各種類別的商品銷售額對比圖：

在業務上，之前我們使用了社群開源的圖表庫，但在實際使用的過程中，在各種業務資料和場景下，會看到各種細節體驗問題，其中一些是我們使用競品過程的遇到的體驗問題，我們針對問題一步步解決；有一些是使用者在使用過程反饋的。因此，我們 AntV 團隊在圖形語法 G2 基礎上開發了一圖一做的圖表庫解決方案 G2Plot，解決我們在使用社群開源圖表庫中遇到的各種體驗問題，同時增加基礎統計圖表的能力，打造開箱即用、易於配置、具有良好視覺和互動體驗的通用統計圖表庫。

下文我們將先描述我們是如何思考和解決這其中的一些體驗問題，然後描述我們在柱狀圖系列圖形中新增的增強功能，最後闡述我們對柱狀圖的預設配置理解。

體驗雕琢

軸標籤遮擋問題

使用自動旋轉策略來避免軸標籤遮擋

在柱狀圖中的分類變數數量比較多，柱狀圖中的柱子就比較多，圖中橫軸的軸標籤就可能發生重疊和遮擋問題，如下圖所示：

可以看到在上圖中，圖形區域已經不足以以水平橫向方式來清晰地顯示所有軸標籤了，這時則應嘗試對軸標籤做旋轉，如下圖所示：

如果圖形區域更小，或者出現了更多的柱子，這時就可能出向即使傾斜了 45 度，也會發生軸標籤重疊問題，這時則需要將標籤傾斜 90 度變成橫向：

在 G2Plot 的軸配置中，開啟

autoRotateLabel

，即可開啟軸標籤的自動旋轉策略來避免上述問題。

使用標籤省略策略來避免軸標籤遮擋

當然，在使用過程中，使用者仍然可以選擇指定軸標籤的傾斜方案，即使用者指定軸標籤是橫向顯示、垂直顯示、還是傾斜 45 度顯示，這時候遇到軸標籤重疊的情況下，則採用抽樣省略的方法，抽樣規則在橫向、傾斜、和垂直顯示都能正常進行抽樣省略顯示一些軸標籤，如在選擇標籤橫向時，抽樣省略如下圖所示：

在選擇標籤傾斜 45 度時，抽樣省略顯示如下：

同樣，在 G2Plot 中，開啟

autoHideLabel

，即可開啟軸標籤抽樣省略策略。

另外，如果 X 軸為日期型或連續型資料時，省略標籤非常合理，但 X 軸為分類資料時，省略標籤是不合理的，例如：我們無法推斷出上圖書架和器具之間省略的標籤值，違背了 AntV 設計原則（詳見下文）中的

有效

原則 ——- 圖表需要有效展示資料資訊。但如果 X 軸標籤全部展示出來會出現遮擋的問題，影響可讀性，同樣無法

有效

展示資料資訊，而且還會影響圖表資料

清晰

的呈現和圖表的

美

。兩害相權取其輕，我們最終選擇了提供標籤省略策略來避免軸標籤遮擋。

軸標籤被圖形區域遮擋

在我們使用社群圖表庫中的狀圖過程中，當用戶選擇配置 Y 軸的最大值和最小值來限制圖形範圍時，會出現軸標籤和圖形區域遮擋的問題，下圖使用者設定了最大值 20 萬，最小值-1 萬：

可以看對，圖中標註的地方破壞了圖表設計原則中

有效

展示資料資訊和圖表

美

的原則。我們在 G2Plot 中優化了這個問題，裁剪了超出最小值和最大值範圍的圖形，特別要注意一個細節，如果最小值和最大值跨越了 0 值，一定要展示 0 刻度線，如下圖所示：

資料標籤位置和樣式

資料標籤：是對當前的一組資料進行的內容標註

資料標籤和柱子的對應關係如何更直觀的呈現給使用者？應該遵循就近原則，資料標籤離柱子越近，對應關係越直觀，所以：

當柱子寬度大於數字標籤長度時，數字標籤放在柱子內部

當柱子寬度小於數字標籤長度時，數字標籤放在柱子頂部

堆積柱狀圖、堆積條形圖的數字標籤只能放在柱子內部

資料標籤在柱子內部引發的新問題

當資料標籤放置在柱子內部時，在柱子顏色不同時，如果繼續採用黑色資料標籤文字，則會發現資料標籤和柱子顏色區分度則不明顯，此時我們又做了如下策略

資料標籤顏色隨柱子顏色變化動態調整

數字標籤溢位的問題

在堆積柱狀圖中，由於堆積的特性，資料標籤統一顯示在柱子內部，當數字標籤寬度小於柱子寬度時，使用動態調整資料標籤顏色即可；如果資料標籤超出柱子寬度時，溢位的部分在白色背景中看不清，需要對文字描邊處理：

資料標籤抽樣

與軸標籤一樣，資料標籤在資料密集的情況下，也同樣會出現數據標籤之間的重疊和遮擋問題，如下圖中各種柱狀圖中最佳化前示例：

可以看到，這裡簡單地將所有地資料標籤直接顯示出來了，有很多標籤被遮擋，使用者根本無法閱讀，顯示的標籤根本沒起作用，所以在圖形體驗升級過程中，對資料標籤的抽樣省略也是我們一個重點：

對於基礎柱形圖，可以檢查對發生重疊的資料標籤進行隱藏，同時優先顯示首位的資料標籤，效果如下：

對於簇狀柱狀圖，考慮每一簇分組中靠右的資料標籤優先原則進行隱藏顯示：

對於堆積柱狀圖，處理則較簡單，對於柱子高度不足以顯示資料標籤的則直接省略顯示

體驗增強

在上文中，我們挑選了軸標籤和資料標籤在使用過程的問題，描述了我們是怎樣一步步的改善和解決的。此外，我們也對柱狀圖的一些使用場景支援了一些新特性。

增強一：海量柱子下的互動增強方案

首先看下圖所示的柱狀圖，可能第一眼都可能幾乎看不出這是一個柱狀圖，其實這是一個橫軸分類變數非常多的柱狀圖，其中分類變數是中國城市：

在這種場景下，使用者很難區分具體某個城市的銷售額情況，更談不上對比了，那這種情況應該如何應對呢？

縮略軸互動：使用縮略軸元件使用者可以只關注資料其中某個區間的場景

通常圖表庫都會提供縮略軸互動，在 G2Plot 中也同樣提供了，G2Plot 相比其他社群圖表庫的體驗友好之處：

縮略軸可以搭配折線圖、柱狀圖多種統計圖表

縮略軸左右文字會根據位置自動調整文字位置

滾動互動：更加自然的互動方式

另外，我們也提供了捲軸互動，使用者可以在使用滾動來一次瀏覽一部分資料，包括對條形圖的垂直滾動支援

柱狀圖的水平滾動

條形圖的垂直滾動

增強二：區域聯動帶來更直觀的對比效果

在上文背景中，我們提到了柱狀圖的主要作用是用來對不同類別進行數值比較的圖表，為了更加方便使用者直觀進行比較分支，我們還提供了區域聯通元件，如下圖所示，使用者可以透過區域聯通元件來直觀地進行對比檢視。

預設最佳配置

為了給使用者提供最優的圖表體驗，我們在柱狀圖系列中按照設計原則預設使用最佳的配置。

案例一：圖例的預設位置

圖例是對圖形本身的概括。通常人的視覺動線是從上至下，從左到右。預設把圖例放在左上角去做一個通用的方案看起來沒毛病。但更好的做法是：

縮短使用者對照圖例看圖形的本能路徑，提升資訊獲取效率

左側簇狀圖柱子顏色從左到右排序，圖例亦從左到右排序，右側堆疊柱狀圖柱子顏色從上倒下排序，圖例亦從上到下排序，一一對映，資訊獲取效率更高。

雖然圖例的位置從技術上支援了 12 個位置，我們總結了圖例在不同的圖表型別中不同的位置後，經過剋制收斂為兩類。

設計者和觀看者甚至並不會感知到位置的變化，但是對應圖形獲取資訊的效率就在不經意間提升了。

案例二：資料標籤預設顯示規則

上文我們已經提到我們對柱狀圖的資料標籤做了很多的最佳化和調整，那對柱狀圖條形圖中各種具體的圖形的資料標籤應該給怎樣的預設配置呢？在 G2Plot 資料標籤的預設配置中，我們主要考慮資料標籤文字是否能夠在柱子內顯示完全，首先確定的是資料標籤文字是從左往右的書寫和閱讀順序，那在柱狀圖和條形圖中的柱子中就需要區分對待，這裡列出一種簡單的策略：

在柱狀圖等垂直的柱子中，由於柱子寬度大部分情況下可能不能完全顯示資料標籤文字，因此在柱狀圖中預設不顯示資料標籤

在條形圖等水平的柱子中，由於柱子是水平的，文字方向和柱子方向一致，因此預設顯示資料標籤

AntV 設計原則

總結一下，我們對柱狀圖的體驗最佳化遵循的原則即是 AntV 資料視覺化設計原則。AntV 設計原則是基於 Ant Design 設計體系衍生的，具有資料視覺化特性的指導原則。它遵循 Ant Design 設計價值觀的同時，對資料視覺化領域的進一步解讀，如色彩、字型的指引。

我們經過大量的專案實踐和經驗總結，總結了以下四條核心原則，並以重要等級進行排序，四條原則相輔相成且呈遞進關係，希望你在設計時也可以採納：

準確

：從資料轉化到可視表達時不歪曲，不誤導，不遺漏，忠實反映資料裡包含的資訊。

有效

：資訊傳達有重點，剋制不冗餘，避免資訊過載，用最適量的資料-油墨比（Data-ink Ratio）表達對使用者最有用的資訊

清晰

：表現方式清楚易讀，具條理性，可以幫助使用者快速達成目標，在最少的時間內獲取更多的資訊。

美

：對資料的完美表達，合理利用視覺元素進行藝術創作，不過度修飾，給使用者優雅的體驗。

G2Plot： https：//g2plot。antv。vision

Github 原文地址：

https：//

github。com/ProtoTeam/bl

og/blob/master/201912/1。md