螞蟻金服新一代資料視覺化引擎 G2

阿新 • • 發佈：2019-02-18

新公司已經呆了一個多月，目前著手一個數據視覺化的專案，資料視覺化肯定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經決定我的這個專案用阿里旗下螞蟻金服所開發的G2圖表庫。
官方地址：https://antv.alipay.com/g2/doc/index.html
Github：https://github.com/antvis

2016年釋出的開源庫，時間雖短但庫功能齊全，唯一不足的是社群太少，對於我這類菜鳥來說是件非常難過的事情，沒辦法硬著頭皮終於找到思路……專案完成之際寫篇 G2 的相關功能的用法，幫助更多使用 G2 的朋友快速上手。

首先和大多數圖形庫一樣G2的dom結構是由canvas組成的。

為了更好得使用 G2 進行資料視覺化，我們也和其他圖形庫一樣，需要先了解圖表的組成以及相關概念，完整的 G2 圖表組成如下：

接下來各個組合的相關概念我將複製官網的：

座標軸 axis

通常包含兩個座標軸，在笛卡爾座標系下，分別為 x 軸和 y 軸，在極座標軸下，則分別由角度和半徑2個維度構成。每個座標軸由座標軸線、刻度線、刻度文字、標題以及網格線組成。

圖例 legend

圖例作為圖表的輔助元素，用於標定不同的資料型別以及資料的範圍，用於輔助閱讀圖表，幫助使用者在圖表中進行資料的篩選過濾。

幾何標記 geom

幾何標記，即我們所說的點、線、面這些幾何圖形，在 G2 中幾何標記的型別決定了生成圖表的型別。也就是資料被視覺化後的實際表現，不同的幾何標都對應自己能識別的圖形屬性。

G2 的核心既是將資料從資料空間轉換到圖形空間。

當滑鼠懸停在某個點上時，會以框的形式顯示當前點對應的資料的資訊，比如該點的值，資料單位等。資料提示框內提示的資訊還可以通過格式化函式動態指定。

輔助標記 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檔案：

引入後先看看如何簡單的建立一個折線圖，程式碼如下：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>簡單線圖</title>
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
    <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.1/g2.js"></script>
</head>
<body>
<div id="c1"></div>
<script>
    var data = [
        {"time": "2017-1","name": "中國","data": 43},
         {"time": "2017-2","name": "中國","data": 477},
         {"time": "2017-3","name": "中國","data": 403},
         {"time": "2017-4","name": "中國","data": 243},
         {"time": "2017-5","name": "中國","data": 343},
         {"time": "2017-6","name": "中國","data": 743},
         {"time": "2017-7","name": "中國","data": 543},
         {"time": "2017-8","name": "中國","data": 643},
         {"time": "2017-9","name": "中國","data": 443},
         {"time": "2017-10","name": "中國","data": 243},
         {"time": "2017-11","name": "中國","data": 143},
         {"time": "2017-12","name": "中國","data": 243},
    ];
    var chart = new G2.Chart({
        id: 'c1',
        forceFit: true,
        height: 450
    });
    chart.source(data, {
        time: {
            alias: '月份',
            range: [0, 1]
        },
        temperature: {
            alias: '平均溫度(°C)'
        }
    });
    chart.line().position('time*data').color('name').size(2);
    chart.render();
</script>
</body>
</html>

行，接下來我們開始一步步分析瞭解建立圖形的程式碼分別是什麼意思，分析完最後我還會列出幾個可能開發中會用到的需求方法。

一、任何圖形庫建立圖形的時候都不能缺少一個步驟，就是例項化一個 Chart 物件(chart)。


//HTML:
<div id="c1"></div>

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

當然除了設定寬高以外的樣式還可以設定其他的，只需要設定 plotCfg 屬性，該屬性裡面只包含三個樣式屬性。我想開發人員對這三個屬性都不會陌生，分別是border、 background、 margin：

border：用於設定整個 chart 的圖表背景樣式，包括邊框，背景色，透明度，圓角等;
background：用於設定 chart 繪圖區域的背景樣式，包括邊框，背景色，透明度，圓角等；
margin：用於設定邊距，用法同 CSS 中的 margin 屬性相同, [上，右，下，左]

二、有了例項物件現在是準備一些資料，資料格式官方提供兩種(data)：

JSON 陣列
Frame 物件

如果資料來源是 JSON 陣列，G2 在內部會將其轉換成一個 Frame 物件。

JSON 陣列：


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

Frame 物件：

G2 的圖表設定資料來源後，在內部都會把資料轉換成 Frame 物件，我們稱之為資料集合，其是 JSON 陣列的每條記錄進行列合併的結果。

Frame 物件的格式如下：


{
  names: array, // 源資料中所有資料屬性的集合。
  arr: array, // 一個二維陣列，同 names 元素順序對應，儲存每個資料屬性對應的資料值。
  data: array, // 儲存原始 JSON 陣列。
}

不太懂？看下面！

原始 JSON 資料：


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

轉 Frame 物件後：

names	arr	data
[“time”,name”,”data”]	[[“2017-1”,”2017-2”,”2017-3”],[“中國”,”中國”,中國],[43,477,403]]	[{“time”: “2017-1”,”name”: “中國”,”data”: 43},{“time”: “2017-2”,”name”: “中國”,”data”: 477},{“time”: “2017-3”,”name”: “中國”,”data”: 403}]

Frame 物件目前我們只需要瞭解，我們實際傳的資料格式還是以 JSON 為主，轉換這個過程我們不必擔心，官方提供了方法：


var Frame = G2.Frame;
var frame = new Frame(data); // 將 data 轉換為 Frame 物件
console.log(frame); // {data: Array[2], names: Array[2], arr: Array[2]}

打印出結果：

三、幾何標記(geom)

什麼是幾何標記？即我們所說的點、線、面這些幾何圖形。G2 中並沒有特定的圖表型別（柱狀圖、散點圖、折線圖等）的概念，使用者可以單獨繪製某一種型別的圖表，如餅圖，也可以繪製混合圖表，比如折線圖和柱狀圖的組合。

G2 生成的圖表的型別，都是由幾何標記決定的。可以通過下圖直觀得理解什麼是幾何標記：

如何設定幾何標記？

很簡單！建立好 chart 物件之後，就可以通過如下方式選擇幾何標記的型別。


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

OK，現在圖表型別有了，我們該怎麼將我們的資料顯示上去呢？很簡單！官方提供 position 將資料值對映到圖形的位置上的方法。在 position 屬性上，映射了兩個屬性： cut 和 price，分別表示將 cut 資料值對映至 x 軸座標點，price 資料值對映至 y 軸座標點。


// chart.point().position('cut*price');
chart.line().position('time*data') // 這裡 time 將對映至x軸上，data 對映至y軸上

color

將資料值對映到圖形的顏色上的方法。


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

color 只支援接收一個引數，value 可以是對映至顏色屬性的資料來源欄位名，如果資料來源中不存在這個欄位名的話，則按照常量進行解析，這個時候會使用 G2 預設提供的顏色： ![](http://images2015.cnblogs.com/blog/774080/201705/774080-20170514074231113-542958845.png) 也可以直接指定某一個具體的顏色值 color，如 ‘#fff’, ‘white’ 等。詳細可以檢視官方文件（ https://antv.alipay.com/g2/api/geom.html#color ）

size

將資料值對映到圖形的大小上的方法。

傳入的值是數字常量，如：


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

tooltip

將資料值對映到 Tooltip(浮窗) 上。

對應資料來源的一個或者多個欄位，當有多個時，使用 * 來連線。


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

shape

將資料值對映到圖形的形狀上的方法。

只支援接收一個引數，指定幾何影象物件繪製的形狀。下表列出了不同的 geom 幾何圖形物件支援的 shape 形狀：

geom 型別	shape 型別	解釋
point	‘circle’, ‘square’, ‘bowtie’, ‘diamond’, ‘hexagon’, ‘triangle’, ‘triangle-down’	hollow 開頭的圖形都是空心的。
line	‘line’,’smooth’,’dot’,’dash’,’dotSmooth’,’spline’
area	‘area’,’smooth’,’line’,’dotLine’,’smoothLine’,’dotSmoothLine’
interval	‘rect’,’hollowRect’,’line’,’tick’,’stroke’	hollowRect 是空心的矩形，line 和 tick 都是線段，stroke 帶邊框的矩形。
polygon	‘polygon’,’hollow’,’stroke’	polygon 多邊形、hollow 空心多邊形和 stroke 帶邊框的多邊形。
schema	‘box’,’candle’	目前僅支援箱須圖、K線圖

程式碼示例：


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

四、座標軸（axis）


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

五、圖例(legend)

圖例（legend）是圖表的輔助元素，使用顏色、大小、形狀區分不同的資料型別，用於圖表中資料的篩選。G2 會根據設定圖形屬性對映以及資料的型別自動生成不同的圖例。這裡舉個例子，更多具體請檢視官方文件（ https://antv.alipay.com/g2/doc/tutorial/start/legend.html ）


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

除此之外資料顯示的名稱也是可以自定義的，如：


chart.col('name',{
    alias: 啦啦啦國 //設定國家別名
});

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

五、一些方法

clear

說明：清空圖表上所有的繪製內容，但是不銷燬圖表。

資料互動必用到的，每次新增資料或者刪除資料都要調一次，不然圖表不會更新，只會在原基礎上繼續累加資料。


chart.clear()

animate

chart 是否執行動畫，預設值為 true，執行， false 不執行。

每次初始化頁面或者進行資料互動時會有一個類似於過渡的效果


chart.animate(false);

繪製混合圖表

比如像highcharts折線圖和點圖的組合


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 的介紹就到這了，如果感興趣可以去檢視他的官網，如有疑問也歡迎留言。共同學習！

螞蟻金服新一代資料視覺化引擎 G2

座標軸 axis

圖例 legend

幾何標記 geom

提示資訊 tooltip

輔助標記 guide

螞蟻金服新一代資料視覺化引擎 G2

螞蟻金服的相關資料收集

螞蟻金服十年自研分布式中間件，成就世界級新金融科技平臺

螞蟻金服首席資料科學家漆遠：AI技術開放，與業界融合共創

螞蟻金服 java三面：metaQ訊息中介軟體 + GC演算法 + MySQL資料同步

高可用、全整合、定製化，螞蟻金服自動化測試如何演進

11月24日杭州大資料技術沙龍來襲，網易大資料、網易嚴選、螞蟻金服大咖親身經驗分享！

報名 | 螞蟻金服ATEC科技大會 · 上海：數字金融新原力

螞蟻金服通訊框架SOFABolt解析 |序列化機制(Serializer)

2018最新螞蟻金服面試題：Docker+秒殺設計+RocketMQ+億級資料設計

強強聯合！螞蟻金服與新炬網路戰略合作，共同致力於國產資料庫的技術推廣和生態建設

剛剛，螞蟻金服榮膺“中國金融大資料領軍企業”稱號

螞蟻金服美女分析師告訴你：從資料分析到資料洞察，我們是這麼玩兒的

從資料分析到資料洞察，螞蟻金服ConnectedInsight是如何做到的？

模組化與解耦式開發在螞蟻金服 mPaaS 深度實踐探討

螞蟻金服開源 ——基於 SOFABoot 進行模組化開發

五面螞蟻金服Java研發崗:資料結構+Redis+分散式+微服務

螞蟻金服調查

螞蟻金服初級Java電話面試面試題

螞蟻金服12萬破解懸賞-第一戰

螞蟻金服新一代資料視覺化引擎 G2

座標軸 axis

圖例 legend

幾何標記 geom

提示資訊 tooltip

輔助標記 guide

相關推薦