螞蟻金服新一代數據可視化引擎 G2

時間 2019-11-07

標籤螞蟻新一代數據可視化引擎 g2 简体版

原文原文鏈接

新公司已經呆了一個多月，目前着手一個數據可視化的項目，數據可視化確定要用到圖形庫如D3、Highcharts、ECharts、Chart等，經決定個人這個項目用阿里旗下螞蟻金服所開發的G2圖表庫。
官方地址：https://antv.alipay.com/g2/do...html

Github：https://github.com/antvisjquery

2016年發佈的開源庫，時間雖短但庫功能齊全，惟一不足的是社區太少，對於我這類菜鳥來講是件很是難過的事情，沒辦法硬着頭皮終於找到思路……項目完成之際寫篇 G2 的相關功能的用法，幫助更多使用 G2 的朋友快速上手。git

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

爲了更好得使用 G2 進行數據可視化，咱們也和其餘圖形庫同樣，須要先了解圖表的組成以及相關概念，完整的 G2 圖表組成以下：canvas

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

座標軸 axis

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

圖例 legend

圖例做爲圖表的輔助元素，用於標定不一樣的數據類型以及數據的範圍，用於輔助閱讀圖表，幫助用戶在圖表中進行數據的篩選過濾。dom

幾何標記 geom

幾何標記，即咱們所說的點、線、面這些幾何圖形，在 G2 中幾何標記的類型決定了生成圖表的類型。也就是數據被可視化後的實際表現，不一樣的幾何標都對應本身能識別的圖形屬性。ide

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文件：

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

<!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>

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

1、任何圖形庫建立圖形的時候都不能缺乏一個步驟，就是實例化一個 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 屬性相同, [上，右，下，左]

2、有了實例對象如今是準備一些數據，數據格式官方提供兩種(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]}

打印出結果：

3、幾何標記(geom)

什麼是幾何標記？即咱們所說的點、線、面這些幾何圖形。G2 中並無特定的圖表類型（柱狀圖、散點圖、折線圖等）的概念，用戶能夠單獨繪製某一種類型的圖表，如餅圖，也能夠繪製混合圖表，好比折線圖和柱狀圖的組合。

G2 生成的圖表的類型，都是由幾何標記決定的。能夠經過下圖直觀得理解什麼是幾何標記：

如何設置幾何標記？

很簡單！建立好 chart 對象以後，就能夠經過以下方式選擇幾何標記的類型。

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

雖然 G2 沒有特定的圖表類型概念，可是卻基本支持全部傳統圖表類型的繪製。下表展現 G2 中的 geom 和傳統圖表的對應關係，更多的圖表詳見 G2 官網的文檔（ https://antv.alipay.com/g2/do... ）以及 demo ( https://antv.alipay.com/g2/de... )。

geom 類型	圖表類型	描述
point	點圖、折線圖中的點、莖葉圖（僅顯示文本）	點的形狀有不少，也可使用圖片表明點（ https://antv.alipay.com/g2/de... ），同時點也能夠在不一樣維度的座標系下顯示，因此能夠擴展出很是多的圖表類型。
path	路徑圖，地圖上的路徑	路徑圖是無序的線圖。（ https://antv.alipay.com/g2/de... ）
line	折線圖、曲線圖、電信號圖	在極座標系下能夠轉換成雷達圖。（ https://antv.alipay.com/g2/de... ）
area	區域圖（面積圖）、層疊區域圖、區間區域圖	極座標系下，雷達區域圖。（ https://antv.alipay.com/g2/de... ）
interval	柱狀圖、直方圖、玫瑰圖、餅圖、條形環圖（玉缺圖）、漏斗圖	經過座標系的轉置、變化，能夠生成各類常見的圖表類型；全部的圖表均可以進行層疊、分組。（ https://antv.alipay.com/g2/de... ）
polygon	色塊圖（像素圖）、熱力圖、地圖	多個點能夠構成多邊形。（ https://antv.alipay.com/g2/de... ）
schema	k線圖，箱型圖	自定義的圖表類型。
edge	樹圖、流程圖、關係圖	與點一塊兒構建關係圖。
heatmap	熱力圖	用於熱力圖的繪製。
contour	等高線圖	用於等高線的繪製。

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

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

不出意外到這裏數據應該已經成功映射到圖形上了，下面就對圖形進行一些定義吧。這裏我列一些若是像瞭解更多請查看官方文檔（ https://antv.alipay.com/g2/ap... ）

color

將數據值映射到圖形的顏色上的方法。

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

color 只支持接收一個參數，value 能夠是映射至顏色屬性的數據源字段名，若是數據源中不存在這個字段名的話，則按照常量進行解析，這個時候會使用 G2 默認提供的顏色：

也能夠直接指定某一個具體的顏色值 color，如 '#fff', 'white' 等。詳細能夠查看官方文檔（ https://antv.alipay.com/g2/ap... ）

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線圖

詳細能夠查看官方文檔（ https://antv.alipay.com/g2/ap... ）

代碼示例：

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

4、座標軸（axis）

這裏舉個例子，更多具體請查看官方文檔（ https://antv.alipay.com/g2/do... ）

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

5、圖例(legend)

圖例（legend）是圖表的輔助元素，使用顏色、大小、形狀區分不一樣的數據類型，用於圖表中數據的篩選。G2 會根據設置圖形屬性映射以及數據的類型自動生成不一樣的圖例。這裏舉個例子，更多具體請查看官方文檔（ https://antv.alipay.com/g2/do... ）

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

除此以外數據顯示的名稱也是能夠自定義的，如：

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

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

5、一些方法

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');