摘要：新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫如等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開發(fā)的圖表庫。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動(dòng)態(tài)指定。

新公司已經(jīng)呆了一個(gè)多月，目前著手一個(gè)數(shù)據(jù)可視化的項(xiàng)目，數(shù)據(jù)可視化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經(jīng)決定我的這個(gè)項(xiàng)目用阿里旗下螞蟻金服所開發(fā)的G2圖表庫。  
官方地址：https://antv.alipay.com/g2/do...

Github：https://github.com/antvis

2016年發(fā)布的開源庫，時(shí)間雖短但庫功能齊全，唯一不足的是社區(qū)太少，對(duì)于我這類菜鳥來說是件非常難過的事情，沒辦法硬著頭皮終于找到思路……項(xiàng)目完成之際寫篇 G2 的相關(guān)功能的用法，幫助更多使用 G2 的朋友快速上手。

首先和大多數(shù)圖形庫一樣G2的dom結(jié)構(gòu)是由canvas組成的。

為了更好得使用 G2 進(jìn)行數(shù)據(jù)可視化，我們也和其他圖形庫一樣，需要先了解圖表的組成以及相關(guān)概念，完整的 G2 圖表組成如下：

接下來各個(gè)組合的相關(guān)概念我將復(fù)制官網(wǎng)的：

通常包含兩個(gè)坐標(biāo)軸，在笛卡爾坐標(biāo)系下，分別為 x 軸和 y 軸，在極坐標(biāo)軸下，則分別由角度和半徑2個(gè)維度構(gòu)成。 每個(gè)坐標(biāo)軸由坐標(biāo)軸線、刻度線、刻度文本、標(biāo)題以及網(wǎng)格線組成。

圖例作為圖表的輔助元素，用于標(biāo)定不同的數(shù)據(jù)類型以及數(shù)據(jù)的范圍，用于輔助閱讀圖表，幫助用戶在圖表中進(jìn)行數(shù)據(jù)的篩選過濾。

幾何標(biāo)記，即我們所說的點(diǎn)、線、面這些幾何圖形，在 G2 中幾何標(biāo)記的類型決定了生成圖表的類型。也就是數(shù)據(jù)被可視化后的實(shí)際表現(xiàn)，不同的幾何標(biāo)都對(duì)應(yīng)自己能識(shí)別的圖形屬性。

G2 的核心既是將數(shù)據(jù)從數(shù)據(jù)空間轉(zhuǎn)換到圖形空間。

當(dāng)鼠標(biāo)懸停在某個(gè)點(diǎn)上時(shí)，會(huì)以框的形式顯示當(dāng)前點(diǎn)對(duì)應(yīng)的數(shù)據(jù)的信息，比如該點(diǎn)的值，數(shù)據(jù)單位等。數(shù)據(jù)提示框內(nèi)提示的信息還可以通過格式化函數(shù)動(dòng)態(tài)指定。

當(dāng)需要在圖表上繪制一些輔助線、輔助框或者圖片時(shí)，比如增加平均值線、最高值線或者標(biāo)示明顯的范圍區(qū)域時(shí)，可以使用輔助標(biāo)記 guide。

接著如上所述G2的dom結(jié)構(gòu)也是canvas，看圖了解到其實(shí)它是由三層 canvas 構(gòu)成的，這三層 canvas 分別對(duì)應(yīng) chart 對(duì)象的如下三個(gè)屬性：

frontCanvas 最上層 canvas，圖例 legend、提示信息 tooltip、和 text tag html 這三種類型的輔助標(biāo)記 guide 在這一層繪制；

canvas 中間層，繪制圖表的主體內(nèi)容幾何標(biāo)記 geom；

backCanvas 最下層 canvas，坐標(biāo)軸 axis 和 line image rect arc 這四種類型的輔助標(biāo)記 guide 在這一層繪制。

了解完相關(guān)知識(shí)，現(xiàn)在就開始創(chuàng)建圖形吧。需要先引入G2的JS文件：

行，接下來我們開始一步步分析了解創(chuàng)建圖形的代碼分別是什么意思，分析完最后我還會(huì)列出幾個(gè)可能開發(fā)中會(huì)用到的需求方法。

一、 任何圖形庫創(chuàng)建圖形的時(shí)候都不能缺少一個(gè)步驟，就是實(shí)例化一個(gè) Chart 對(duì)象(chart)。

//HTML:


//JS：
var chart = new G2.Chart({
    id: "c1",
    forceFit: true, // 這個(gè)表示圖表寬度自適應(yīng)，當(dāng)然你可以自己定義寬度
    // width: 1000, // 自己設(shè)置寬度
    height: 450
});

當(dāng)然除了設(shè)置寬高以外的樣式還可以設(shè)置其他的，只需要設(shè)置 plotCfg 屬性，該屬性里面只包含三個(gè)樣式屬性。我想開發(fā)人員對(duì)這三個(gè)屬性都不會(huì)陌生，分別是border、 background、 margin：

border：用于設(shè)置整個(gè) chart 的圖表背景樣式，包括邊框，背景色，透明度，圓角等;

background：用于設(shè)置 chart 繪圖區(qū)域的背景樣式，包括邊框，背景色，透明度，圓角等；

margin：用于設(shè)置邊距，用法同 CSS 中的 margin 屬性相同, [上，右，下，左]

二、 有了實(shí)例對(duì)象現(xiàn)在是準(zhǔn)備一些數(shù)據(jù)，數(shù)據(jù)格式官方提供兩種(data)：

JSON 數(shù)組

Frame 對(duì)象

如果數(shù)據(jù)源是 JSON 數(shù)組，G2 在內(nèi)部會(huì)將其轉(zhuǎn)換成一個(gè) Frame 對(duì)象。

JSON 數(shù)組：

 var data = [
     {"time": "2017-1","name": "中國(guó)","data": 43},
     {"time": "2017-2","name": "中國(guó)","data": 477},
     {"time": "2017-3","name": "中國(guó)","data": 403}
];

Frame 對(duì)象：

G2 的圖表設(shè)置數(shù)據(jù)源后，在內(nèi)部都會(huì)把數(shù)據(jù)轉(zhuǎn)換成 Frame 對(duì)象，我們稱之為數(shù)據(jù)集合，其是 JSON 數(shù)組的每條記錄進(jìn)行列合并的結(jié)果。

Frame 對(duì)象的格式如下：

{
  names: array, // 源數(shù)據(jù)中所有數(shù)據(jù)屬性的集合。
  arr: array, // 一個(gè)二維數(shù)組，同 names 元素順序?qū)?yīng)，存儲(chǔ)每個(gè)數(shù)據(jù)屬性對(duì)應(yīng)的數(shù)據(jù)值。
  data: array, // 存儲(chǔ)原始 JSON 數(shù)組。
}

不太懂？看下面！

原始 JSON 數(shù)據(jù)：

 var data = [
     {"time": "2017-1","name": "中國(guó)","data": 43},
     {"time": "2017-2","name": "中國(guó)","data": 477},
     {"time": "2017-3","name": "中國(guó)","data": 403}
];

轉(zhuǎn) Frame 對(duì)象后：

Frame 對(duì)象目前我們只需要了解，我們實(shí)際傳的數(shù)據(jù)格式還是以 JSON 為主，轉(zhuǎn)換這個(gè)過程我們不必?fù)?dān)心，官方提供了方法：

var Frame = G2.Frame;
var frame = new Frame(data); // 將 data 轉(zhuǎn)換為 Frame 對(duì)象
console.log(frame); // {data: Array[2], names: Array[2], arr: Array[2]}

打印出結(jié)果：

三、 幾何標(biāo)記(geom)

什么是幾何標(biāo)記？即我們所說的點(diǎn)、線、面這些幾何圖形。G2 中并沒有特定的圖表類型（柱狀圖、散點(diǎn)圖、折線圖等）的概念，用戶可以多帶帶繪制某一種類型的圖表，如餅圖，也可以繪制混合圖表，比如折線圖和柱狀圖的組合。

G2 生成的圖表的類型，都是由幾何標(biāo)記決定的。可以通過下圖直觀得理解什么是幾何標(biāo)記：

如何設(shè)置幾何標(biāo)記？

很簡(jiǎn)單！創(chuàng)建好 chart 對(duì)象之后，就可以通過如下方式選擇幾何標(biāo)記的類型。

 chart.line().position("time*data").color("name").size(2); 
 // 這是上面的折線圖，這里使用了 point 類型的 geom

雖然 G2 沒有特定的圖表類型概念，但是卻基本支持所有傳統(tǒng)圖表類型的繪制。下表展示 G2 中的 geom 和傳統(tǒng)圖表的對(duì)應(yīng)關(guān)系，更多的圖表詳見 G2 官網(wǎng)的 文檔（ https://antv.alipay.com/g2/do... ）以及 demo ( https://antv.alipay.com/g2/de... )。

OK，現(xiàn)在圖表類型有了，我們?cè)撛趺磳⑽覀兊臄?shù)據(jù)顯示上去呢？很簡(jiǎn)單！官方提供 position 將數(shù)據(jù)值映射到圖形的位置上的方法。在 position 屬性上，映射了兩個(gè)屬性： cut 和 price，分別表示將 cut 數(shù)據(jù)值映射至 x 軸坐標(biāo)點(diǎn)，price 數(shù)據(jù)值映射至 y 軸坐標(biāo)點(diǎn)。

// chart.point().position("cut*price");
chart.line().position("time*data") // 這里 time 將映射至x軸上，data 映射至y軸上

不出意外到這里數(shù)據(jù)應(yīng)該已經(jīng)成功映射到圖形上了，下面就對(duì)圖形進(jìn)行一些定義吧。這里我列一些如果像了解更多請(qǐng)查看官方文檔（ https://antv.alipay.com/g2/ap... ）

color

將數(shù)據(jù)值映射到圖形的顏色上的方法。

chart.line().position("time*data").color("name"); 

color 只支持接收一個(gè)參數(shù)，value 可以是映射至顏色屬性的數(shù)據(jù)源字段名，如果數(shù)據(jù)源中不存在這個(gè)字段名的話，則按照常量進(jìn)行解析，這個(gè)時(shí)候會(huì)使用 G2 默認(rèn)提供的顏色：

也可以直接指定某一個(gè)具體的顏色值 color，如 "#fff", "white" 等。詳細(xì)可以查看官方文檔（ https://antv.alipay.com/g2/ap... ）

size

將數(shù)據(jù)值映射到圖形的大小上的方法。

傳入的值是數(shù)字常量，如：

chart.line().position("time*data").size(2); 

tooltip

將數(shù)據(jù)值映射到 Tooltip(浮窗) 上。

對(duì)應(yīng)數(shù)據(jù)源的一個(gè)或者多個(gè)字段，當(dāng)有多個(gè)時(shí)，使用 * 來連接。

chart.line().position("time*data").tooltip("name*data");

shape

將數(shù)據(jù)值映射到圖形的形狀上的方法。

只支持接收一個(gè)參數(shù)，指定幾何圖像對(duì)象繪制的形狀。下表列出了不同的 geom 幾何圖形對(duì)象支持的 shape 形狀：

詳細(xì)可以查看官方文檔（ https://antv.alipay.com/g2/ap... ）

代碼示例：

chart.line().position("time*data").shape("smooth");

四、坐標(biāo)軸（axis）

這里舉個(gè)例子，更多具體請(qǐng)查看官方文檔（ https://antv.alipay.com/g2/do... ）

chart.axis("data", {
    formatter: function(val) {
        return val/100 + "%";
    },
    title: null
});

五、圖例(legend)

圖例（legend）是圖表的輔助元素，使用顏色、大小、形狀區(qū)分不同的數(shù)據(jù)類型，用于圖表中數(shù)據(jù)的篩選。G2 會(huì)根據(jù)設(shè)置圖形屬性映射以及數(shù)據(jù)的類型自動(dòng)生成不同的圖例。這里舉個(gè)例子，更多具體請(qǐng)查看官方文檔（ https://antv.alipay.com/g2/do... ）

chart.legend({ 
  position: "top", // 設(shè)置圖例的顯示位置
});

除此之外數(shù)據(jù)顯示的名稱也是可以自定義的，如：

chart.col("name",{
    alias: 啦啦啦國(guó) //設(shè)置國(guó)家別名
});

到這里為止，G2 的基本使用就介紹完了，這篇文章始終是簡(jiǎn)單的介紹而已，實(shí)際開發(fā)中一些需要注意的小問題以及一些有用的方法都要去參考官方文檔，文檔豐富注釋也比較清晰易懂。下面我將介紹幾個(gè)常用的方法。

五、一些方法

clear

說明：清空?qǐng)D表上所有的繪制內(nèi)容，但是不銷毀圖表。

數(shù)據(jù)交互必用到的，每次添加數(shù)據(jù)或者刪除數(shù)據(jù)都要調(diào)一次，不然圖表不會(huì)更新，只會(huì)在原基礎(chǔ)上繼續(xù)累加數(shù)據(jù)。

chart.clear()

animate

chart 是否執(zhí)行動(dòng)畫，默認(rèn)值為 true，執(zhí)行， false 不執(zhí)行。

每次初始化頁面或者進(jìn)行數(shù)據(jù)交互時(shí)會(huì)有一個(gè)類似于過渡的效果

chart.animate(false);

繪制混合圖表

比如像highcharts折線圖和點(diǎn)圖的組合

chart.line().position("time*data").tooltip("name*data").color("name").size(2).shape("smooth");
chart.point().position("time*data").tooltip("name*data").color("name").size(6).shape("circle");

G2 的介紹就到這了，如果感興趣可以去查看他的官網(wǎng)，如有疑問也歡迎留言。共同學(xué)習(xí)！