導語：

AntV 是螞蟻金服數據可視化的代表作，也是阿里數據可視化技術生態的重要組成部分。基於螞蟻及阿里強大數據、技術、設計的力量，通過探索性的研究，跨行業的合作，為領域提供更強大的數據可視化能力、產品及行業解決方案。螞蟻金服 “墨者學院”，集工程技術之道，藝術設計之美，數據算法之魂於一身，打造阿里數據可視化產品。

AntV

一套專業、簡單、無限可能的可視化解決方案。

該框架提供豐富的圖表組件，在實際項目開發使用中，如果你對圖表不太熟悉的話，在"可視化基礎"裡面有對各個圖表的說明，什麼情況下使用什麼樣的圖標。

G2 可視化圖形語法

G2 是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。

• 折線圖

（多條階梯折線圖）

圖表用法：

階梯線圖（也稱為步驟圖）是與線圖相似的圖表，但是線在數據點之間形成一系列步驟。當您要顯示以不規則間隔發生的更改時，分階線圖可能很有用。例如，奶製品價格上漲，汽油，稅率，利率等。

• 柱狀圖

（直方圖）

直方圖的簡介：

直方圖，形狀類似柱狀圖卻有著與柱狀圖完全不同的含義。直方圖牽涉統計學的概念，首先要對數據進行分組，然後統計每個分組內數據元的數量。 在平面直角座標系中，橫軸標出每個組的端點，縱軸表示頻數，每個矩形的高代表對應的頻數，稱這樣的統計圖為頻數分佈直方圖。頻數分佈直方圖需要經過頻數乘以組距的計算過程才能得出每個分組的數量，同一個直方圖的組距是一個固定不變的值，所以如果直接用縱軸表示數量，每個矩形的高代表對應的數據元數量，既能保持分佈狀態不變，又能直觀的看出每個分組的數量。本文的例子全部使用縱軸表示數量的非標準直方圖繪製。

相關概念：

• 組數：在統計數據時，我們把數據按照不同的範圍分成幾個組，分成的組的個數稱為組數

• 組距：每一組兩個端點的差

• 頻數：分組內的數據元的數量除以組距

直方圖的作用：

• 能夠顯示各組頻數或數量分佈的情況

• 易於顯示各組之間頻數或數量的差別

通過直方圖還可以觀察和估計哪些數據比較集中，異常或者孤立的數據分佈在何處

英文名：Histogram

直方圖的構成：

頻數分佈直方圖

非標準的直方圖：

直方圖的應用場景

適合的場景

例子1: 用於表示分佈情況

以統計學中經典的鳶尾花案例為例，其數據集包含了 50 個樣本，都屬於鳶尾屬下的三個亞屬，分別是山鳶尾、變色鳶尾和維吉尼亞鳶尾。四個特徵被用作樣本的定量分析，它們分別是花萼長度、花萼的寬度、花瓣的長度和花瓣的寬度。基於這四個特徵的集合，費雪建立了一種線性判別分析法以確定其屬種。

例子2: 用於觀察異常或孤立數據

下圖繪製了鑽石的全深比數據的統計直方圖，從圖中可以看出在 66 附近有兩個孤立值

不適合的場景

抽取的樣本數量過小，將會產生較大誤差，可信度低，也就失去了統計的意義。因此，樣本數不應少於 50 個。

（Range Column Chart，區間柱狀圖。通過繪製每個數據點的兩個 Y 值來顯示一系列數據）

圖表用法：

區間柱狀圖使用的每個 Y 值被繪製為柱的上限和下限。有時區間柱狀圖被稱為“浮動”柱狀圖。某些數據可能看起來非常漂亮，並且以這種形式容易理解，其中列在圖表中浮動，跨越從最小值到最大值的區域。

• 點圖

圖表用法:

氣泡圖最基本的用法是使用三個值來確定每個數據序列，和散點圖一樣，氣泡圖將兩個維度的數據值分別映射為笛卡爾座標系上的座標點，其中 X 和 Y 軸分別代表不同的兩個維度的數據，但是不同於散點圖的是，氣泡圖的每個氣泡都有分類信息（他們顯示在點旁邊或者作為圖例）。每一個氣泡的面積代表第三個數值數據。另外還可以使用不同的顏色來區分分類數據或者其他的數值數據，或者使用亮度或者透明度。表示時間維度的數據時，可以將時間維度作為直角座標系中的一個維度，或者結合動畫來表現數據隨著時間的變化情況。氣泡圖通常用於比較和展示不同類別圓點（這裡我們稱為氣泡）之間的關係，通過氣泡的位置以及面積大小。從整體上看，氣泡圖可用於分析數據之間的相關性。需要注意的是，氣泡圖的數據大小容量有限，氣泡太多會使圖表難以閱讀。但是可以通過增加一些交互行為彌補：隱藏一些信息，當鼠標點擊或者懸浮時顯示，或者添加一個選項用於重組或者過濾分組類別。另外，氣泡的大小是映射到面積而不是半徑或者直徑繪製的。因為如果是基於半徑或者直徑的話，圓的大小不僅會呈指數級變化，而且還會導致視覺誤差。

• 面積圖、箱形圖、燭形圖、熱力圖、儀表盤、漏斗圖、地圖、雷達圖、分面、關係圖、其他圖標

  略，請查看官網：https://antv.alipay.com/zh-cn/index.html
  

G6關係圖類庫

G6 是解決流程圖和關係分析的圖表庫，集成了大量的交互，可以輕鬆的進行動態流程圖和關係網絡的開發。

• 網圖

（語言影響力網絡：該圖展示 2013 年各個語言的關聯關係和影響力）

• 流圖

（掃碼業務流程）

• 樹圖

（分層樹：該圖展示了 G6 裡 npm 包的依賴關係。該示例的目的在於向大家展示分層樹的佈局效果。）

（網圖編輯器：該圖向大家展示瞭如何在 G6 默認的交互上，稍加修改，快速搭建流程圖編輯器變型）

• 畫廊

（數據庫設計：該圖展示了數據庫表之間的關聯關係，主要向大家展示了動態錨點的使用方法）

（美國 2010 CPI 數據：該圖展示了 2012 年度，美國全國各商品CPI指數。節點大小映射了該品類交易額度佔總交易額的比重，顏色映射了該品類CPI的指數。該示例主要向大家展示瞭如何使用 G6 結合優秀的第三方力導佈局算法，高效的繪製動態力導圖）

• 其他

（縮略圖）

F2 移動端圖表庫

F2 是面向移動端的一套基於可視化圖形語法的圖表庫，具有精簡、高性能、易擴展的特性。適用於對性能、大小、擴展性要求嚴苛的場景。

• 點圖

• 折線圖

• 面積圖

• 柱狀圖

• 燭形圖

• 餅圖

• 雷達圖

• 其他圖表

結束語：

本文只是簡要介紹了AntV項目的部分案例。AntV官網提供詳細、完整的案例分析和使用文檔。

官網地址：https://antv.alipay.com/zh-cn/index.html

閱讀更多 技術顧問聯盟 的文章

關鍵字: 科技 螞蟻金服 可視化