摘要:新公司已經呆了一個多月,目前著手一個數據可視化的項目,數據可視化肯定要用到圖形庫如等,經決定我的這個項目用阿里旗下螞蟻金服所開發的圖表庫。數據提示框內提示的信息還可以通過格式化函數動態指定。
新公司已經呆了一個多月,目前著手一個數據可視化的項目,數據可視化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等,經決定我的這個項目用阿里旗下螞蟻金服所開發的G2圖表庫。
官方地址:https://antv.alipay.com/g2/do...
Github:https://github.com/antvis
2016年發布的開源庫,時間雖短但庫功能齊全,唯一不足的是社區太少,對于我這類菜鳥來說是件非常難過的事情,沒辦法硬著頭皮終于找到思路……項目完成之際寫篇 G2 的相關功能的用法,幫助更多使用 G2 的朋友快速上手。
首先和大多數圖形庫一樣G2的dom結構是由canvas組成的。
為了更好得使用 G2 進行數據可視化,我們也和其他圖形庫一樣,需要先了解圖表的組成以及相關概念,完整的 G2 圖表組成如下:
坐標軸 axis接下來各個組合的相關概念我將復制官網的:
通常包含兩個坐標軸,在笛卡爾坐標系下,分別為 x 軸和 y 軸,在極坐標軸下,則分別由角度和半徑2個維度構成。 每個坐標軸由坐標軸線、刻度線、刻度文本、標題以及網格線組成。
圖例 legend圖例作為圖表的輔助元素,用于標定不同的數據類型以及數據的范圍,用于輔助閱讀圖表,幫助用戶在圖表中進行數據的篩選過濾。
幾何標記 geom幾何標記,即我們所說的點、線、面這些幾何圖形,在 G2 中幾何標記的類型決定了生成圖表的類型。也就是數據被可視化后的實際表現,不同的幾何標都對應自己能識別的圖形屬性。
G2 的核心既是將數據從數據空間轉換到圖形空間。
提示信息 tooltip當鼠標懸停在某個點上時,會以框的形式顯示當前點對應的數據的信息,比如該點的值,數據單位等。數據提示框內提示的信息還可以通過格式化函數動態指定。
輔助標記 guide當需要在圖表上繪制一些輔助線、輔助框或者圖片時,比如增加平均值線、最高值線或者標示明顯的范圍區域時,可以使用輔助標記 guide。
接著如上所述G2的dom結構也是canvas,看圖了解到其實它是由三層 canvas 構成的,這三層 canvas 分別對應 chart 對象的如下三個屬性:
frontCanvas 最上層 canvas,圖例 legend、提示信息 tooltip、和 text tag html 這三種類型的輔助標記 guide 在這一層繪制;
canvas 中間層,繪制圖表的主體內容幾何標記 geom;
backCanvas 最下層 canvas,坐標軸 axis 和 line image rect arc 這四種類型的輔助標記 guide 在這一層繪制。
了解完相關知識,現在就開始創建圖形吧。需要先引入G2的JS文件: