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

做者 翎刀 螞蟻金服·數據體驗技術團隊

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

背景

柱形圖——人們最常使用的圖表之一，是一種使用矩形條，對不一樣類別進行數值比較的統計圖表。最基礎的柱形圖，須要一個分類變量和一個數值變量，在柱狀圖上，分類變量的每一個實體都表示爲一個矩形(通俗講即爲「柱子」)，而數值則決定了柱子的高度。

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

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

在業務上，以前咱們使用了社區開源的圖表庫，但在實際使用的過程當中，在各類業務數據和場景下，會看到各類細節體驗問題，其中一些是咱們使用競品過程的遇到的體驗問題，咱們針對問題一步步解決；有一些是用戶在使用過程反饋的。所以，咱們 AntV 團隊在圖形語法 G2 基礎上開發了一圖一作的圖表庫解決方案 G2Plot，解決咱們在使用社區開源圖表庫中遇到的各類體驗問題，同時增長基礎統計圖表的能力，打造開箱即用、易於配置、具備良好視覺和交互體驗的通用統計圖表庫.

下文咱們將先描述咱們是如何思考和解決這其中的一些體驗問題，而後描述咱們在柱狀圖系列圖形中添加的加強功能，最後闡述咱們對柱狀圖的默認配置理解。

體驗雕琢

軸標籤遮擋問題

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

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

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

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

在 G2Plot 的軸配置中，開啓autoRotateLabel，便可開啓軸標籤的自動旋轉策略來避免上述問題。

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

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

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

一樣，在 G2Plot 中，開啓autoHideLabel，便可開啓軸標籤抽樣省略策略。

另外，若是 X 軸爲日期型或連續型數據時，省略標籤很是合理，但 X 軸爲分類數據時，省略標籤是不合理的，例如：咱們沒法推斷出上圖書架和器具之間省略的標籤值，違背了 AntV 設計原則（詳見下文）中的有效原則 --- 圖表須要有效展現數據信息。但若是 X 軸標籤所有展現出來會出現遮擋的問題，影響可讀性，一樣沒法有效展現數據信息，並且還會影響圖表數據清晰的呈現和圖表的美。兩害相權取其輕，咱們最終選擇了提供標籤省略策略來避免軸標籤遮擋。

軸標籤被圖形區域遮擋

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

能夠看對，圖中標註的地方破壞了圖表設計原則中有效展現數據信息和圖表美的原則。咱們在 G2Plot 中優化了這個問題，裁剪了超出最小值和最大值範圍的圖形，特別要注意一個細節，若是最小值和最大值跨越了 0 值，必定要展現 0 刻度線，以下圖所示：

數據標籤位置和樣式

數據標籤：是對當前的一組數據進行的內容標註

數據標籤和柱子的對應關係如何更直觀的呈現給用戶？應該遵循就近原則，數據標籤離柱子越近，對應關係越直觀，因此：

1. 當柱子寬度大於數字標籤長度時，數字標籤放在柱子內部
2. 當柱子寬度小於數字標籤長度時，數字標籤放在柱子頂部
3. 堆積柱狀圖、堆積條形圖的數字標籤只能放在柱子內部

數據標籤在柱子內部引起的新問題

當數據標籤放置在柱子內部時，在柱子顏色不一樣時，若是繼續採用黑色數據標籤文本，則會發現數據標籤和柱子顏色區分度則不明顯，此時咱們又作了以下策略

1. 數據標籤顏色隨柱子顏色變化動態調整

2. 數字標籤溢出的問題

在堆積柱狀圖中，因爲堆積的特性，數據標籤統一顯示在柱子內部，當數字標籤寬度小於柱子寬度時，使用動態調整數據標籤顏色便可；若是數據標籤超出柱子寬度時，溢出的部分在白色背景中看不清，須要對文本描邊處理：

數據標籤抽樣

與軸標籤同樣，數據標籤在數據密集的狀況下，也一樣會出現數據標籤之間的重疊和遮擋問題，以下圖中各類柱狀圖中優化前示例：

能夠看到，這裏簡單地將全部地數據標籤直接顯示出來了，有不少標籤被遮擋，用戶根本沒法閱讀，顯示的標籤根本沒起做用，因此在圖形體驗升級過程當中，對數據標籤的抽樣省略也是咱們一個重點：

• 對於基礎柱形圖，能夠檢查對發生重疊的數據標籤進行隱藏，同時優先顯示首位的數據標籤，效果以下：
• 對於簇狀柱狀圖，考慮每一簇分組中靠右的數據標籤優先原則進行隱藏顯示：
• 對於堆積柱狀圖，處理則較簡單，對於柱子高度不足以顯示數據標籤的則直接省略顯示

體驗加強

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

加強一：海量柱子下的交互加強方案

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

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

• 縮略軸交互：使用縮略軸組件用戶能夠只關注數據其中某個區間的場景

一般圖表庫都會提供縮略軸交互，在 G2Plot 中也一樣提供了，G2Plot 相比其餘社區圖表庫的體驗友好之處：

1. 縮略軸能夠搭配折線圖、柱狀圖多種統計圖表
2. 縮略軸左右文本會根據位置自動調整文本位置

• 滾動交互：更加天然的交互方式

另外，咱們也提供了滾動條交互，用戶能夠在使用滾動來一次瀏覽一部分數據，包括對條形圖的垂直滾動支持

1. 柱狀圖的水平滾動

2. 條形圖的垂直滾動

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

在上文背景中，咱們提到了柱狀圖的主要做用是用來對不一樣類別進行數值比較的圖表，爲了更加方便用戶直觀進行比較分支，咱們還提供了區域聯通組件，以下圖所示，用戶能夠經過區域聯通組件來直觀地進行對比查看。

默認最佳配置

爲了給用戶提供最優的圖表體驗，咱們在柱狀圖系列中按照設計原則默認使用最佳的配置。

案例一：圖例的默認位置

圖例是對圖形自己的歸納。一般人的視覺動線是從上至下，從左到右。默認把圖例放在左上角去作一個通用的方案看起來沒毛病。但更好的作法是：縮短用戶對照圖例看圖形的本能路徑，提高信息獲取效率

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

雖然圖例的位置從技術上支持了 12 個位置，咱們總結了圖例在不一樣的圖表類型中不一樣的位置後，通過剋制收斂爲兩類。
設計者和觀看者甚至並不會感知到位置的變化，可是對應圖形獲取信息的效率就在不經意間提高了。
**

案例二：數據標籤默認顯示規則

上文咱們已經提到咱們對柱狀圖的數據標籤作了不少的優化和調整，那對柱狀圖條形圖中各類具體的圖形的數據標籤應該給怎樣的默認配置呢？在 G2Plot 數據標籤的默認配置中，咱們主要考慮數據標籤文本是否可以在柱子內顯示徹底，首先肯定的是數據標籤文本是從左往右的書寫和閱讀順序，那在柱狀圖和條形圖中的柱子中就須要區分對待，這裏列出一種簡單的策略：

1. 在柱狀圖等垂直的柱子中，因爲柱子寬度大部分狀況下可能不能徹底顯示數據標籤文本，所以在柱狀圖中默認不顯示數據標籤
2. 在條形圖等水平的柱子中，因爲柱子是水平的，文本方向和柱子方向一致，所以默認顯示數據標籤

**

AntV 設計原則

總結一下，咱們對柱狀圖的體驗優化遵循的原則便是 AntV 數據可視化設計原則。AntV 設計原則是基於  Ant Design  設計體系衍生的，具備數據可視化特性的指導原則。它遵循 Ant Design 設計價值觀的同時，對數據可視化領域的進一步解讀，如色彩、字體的指引。
咱們通過大量的項目實踐和經驗總結，總結了如下四條核心原則，並以重要等級進行排序，四條原則相輔相成且呈遞進關係，但願你在設計時也能夠採納：

• 準確：從數據轉化到可視表達時不歪曲，不誤導，不遺漏，忠實反映數據裏包含的信息。
• 有效：信息傳達有重點，剋制不冗餘，避免信息過載，用最適量的數據-油墨比（Data-ink Ratio）表達對用戶最有用的信息
• 清晰：表現方式清楚易讀，具條理性，能夠幫助用戶快速達成目標，在最少的時間內獲取更多的信息。
• 美：對數據的完美表達，合理利用視覺元素進行藝術創做，不過分修飾，給用戶優雅的體驗。

G2Plot: g2plot.antv.vision

github原文地址：github.com/ProtoTeam/b…