Day2 建立第一個AntV/G2圖表

2019 年 10 月 4 日
筆記

Step1：引進G2腳本

方法一：引入在線腳本

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

方法二：引入本地腳本

<script src="./g2.js"></script>  //src為本地G2腳本所在相對路徑

方法三：通過npm安裝

注意：使用該種方式引入腳本需要使用webpack工具打包才可運行，Webpack 是目前比較流行的模組打包工具，你可以在使用 webpack 的項目中輕鬆的引入和打包AntV，這裡假設你已經對 webpack 具有一定的了解並且在自己的項目中使用。

npm install @antv/g2 --save

成功安裝完成之後，即可使用 import 或 require 進行引用。

import G2 from '@antv/g2';  //const G2=require("@antv/g2");    const chart = new G2.Chart({    container: 'c1',    width: 600,    height: 300  });

使用該方式進行載入時可以和Echarts一樣按需引入AntV圖表和組件。

默認使用 require("@antv/g2") 得到的是已經載入了所有圖表和組件的 AntV 包，因此體積會比較大，如果在項目中對體積要求比較苛刻，也可以和Echarts一樣只按需引入需要的模組。

以下例子中Core核心模組必須導入，該包只包含核心的圖形語法處理邏輯，具體包含如下：

Scale：度量，僅包含基礎的 Linear、Cat 以及 Time 這三種類型
G：繪製引擎
Animate：動畫配置
Chart：圖表入口類
Global：全局變數
Shape：管理各種類型的shape
Util: 通用工具類

//必須引入核心包core  const Core=require("@antv/g2/lib/core");  require("@antv/g2/lib/geom/line");  require("@antv/g2/lib/geom/point");  var data = [{      year: '1991',      value: 3  }, {      year: '1992',      value: 4  }, {      year: '1993',      value: 3.5  }, {      year: '1994',      value: 5  }, {      year: '1995',      value: 4.9  }, {      year: '1996',      value: 6  }, {      year: '1997',      value: 7  }, {      year: '1998',      value: 9  }, {      year: '1999',      value: 13  }];  var chart=new G2.Chart({      container:"root",      forceFit:true,  });  chart.source(data);  chart.line().position("year*value");  chart.point().position("year*value").size(4).shape('circle').style({      stroke: '#fff',      lineWidth: 1  });  chart.render();

例如上面的例子中只用到了點圖和折線圖，因此引入的時候可以只引入這兩個模組，從而將打包體積從563KB減小到432KB

可以按需引入的模組見https://github.com/antvis/g2/tree/master/src

Step2：創建div圖表容器

在頁面的body部分創建一個div

<div id="root"></div>

注意點：

1.其中容器標籤不一定是div標籤，但必須是能包含div的標籤，至於哪些標籤能夠包含div標籤，可以參考標籤嵌套問題總結

2.容器標籤中也不一定必須綁定id，綁定class等也可以，只要能獲取到該元素就行，但相對來說綁定id最為合適，因為一般每幅圖都是獨一無二的，但如果需要多副相同的圖時，需要寫重複程式碼，所以這裡可以提個需求：讓容器允許接收元素數組，而不是單單某一個元素。。

Step3. 編寫圖表繪製程式碼

創建 div 容器後，我們就可以進行簡單的圖表繪製:

創建 Chart 圖表對象，指定圖表所在的容器 ID、指定圖表的寬高、邊距等資訊；

看此文章時如果對chart參數配置有疑惑可先跳過，下節將會針對參數用法做出說明和解析。

var chart=new G2.Chart({          container:"root",  　　　　　//container：document.getElementById("root")          forceFit:true,          width:500,          height:500      });//創建空圖表

注意：containner有兩種設置方法：

直接設置字元串，則默認為document.getElementById("root")
直接通過document.getElementById("root")或document.getElementsByClassName("root")[0](容器元素用class綁定)等方法設置，總之只要獲取到容器元素就可以。

載入圖表數據源(也可以在options中data屬性載入數據)；

chart.source(data)//載入數據源

使用圖形語法進行圖表的繪製(也可以在options中geom屬性設置展示圖形)；

chart.line().position("year*value");//選擇展現數據的類型

渲染圖表；

chart.render();//渲染圖表

最後的源程式碼和效果圖如下：

var data = [{          year: '1991',          value: 3      }, {          year: '1992',          value: 4      }, {          year: '1993',          value: 3.5      }, {          year: '1994',          value: 5      }, {          year: '1995',          value: 4.9      }, {          year: '1996',          value: 6      }, {          year: '1997',          value: 7      }, {          year: '1998',          value: 9      }, {          year: '1999',          value: 13      }];//數據      var chart=new G2.Chart({          container:"root",          forceFit:true,      });//創建空圖表      chart.source(data);//選擇數據源      chart.line().position("year*value");//選擇展現數據的類型      chart.point().position("year*value").size(4).shape('circle').style({          stroke: '#fff',          lineWidth: 1      });      chart.render();//將數據渲染到圖表上