G2(可視化引擎)

G2功能介紹

1、健全的圖形語法：數據到圖形的映射，可以制作出全部的圖表。

2、全新的交互語法：根據激發和反饋機制可以搭配出各種各樣交互行為，對數據進行探尋。

3、強大的View控制模塊：可支持開發個性化的數據多維分析圖形。

4、雙引擎渲染：Canvas或SVG隨意轉換。

5、可視化組件體系：面向交互、體驗優雅。

6、全方位相擁TypeScript：提供詳細的類型定義文檔。

G2特色說明

1、圖表示例

G2(可視化引擎)官方版千變萬化，隨意搭配

任何圖表，都能夠基于圖形語法靈活制作，滿足你無盡的創意。

2、專業完備

很多產品實踐之上，提供制圖引擎、完備圖形語法、專業設計規范。

3、生動，可交互

強大的交互語法，助推可視分析，讓圖表惟妙惟肖。

4、精品Gallery

真正的數據可視化案例，我們將他們歸納為一個個故事性的設計模板，讓用戶做到開箱即用的效果。

G2使用教程

通過 npm 安裝

npm install @antv/g2 --save

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

瀏覽器引入

既可以通過將腳本下載到本地也可以直接引入在線資源

開始使用

在 G2 引入頁面后，我們就已經做好了創建第一個圖表的準備了。

下面是以一個基礎的柱狀圖為例開始我們的第一個圖表創建。

1、創建 div 圖表容器

在繪圖前我們需要為 G2 準備一個 DOM 容器。

2.、編寫圖表繪制代碼

創建 div 容器后，我們就可以進行簡單的圖表繪制：

1、new Chart() 創建 Chart 圖表對象，指定圖表所在的容器 id、圖表的寬高、邊距等信息;

2、chart.data() 載入圖表數據源;

3、使用圖形語法進行圖表的繪制;

4、chart.render() 渲染圖表。