G2(可視化引擎)

G2功能介紹

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

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

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

4、雙引擎渲染：Canvas或SVG隨意轉(zhuǎn)換。

5、可視化組件體系：面向交互、體驗優(yōu)雅。

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

G2特色說明

1、圖表示例

G2(可視化引擎)官方版千變?nèi)f化，隨意搭配

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

2、專業(yè)完備

很多產(chǎn)品實踐之上，提供制圖引擎、完備圖形語法、專業(yè)設(shè)計規(guī)范。

3、生動，可交互

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

4、精品Gallery

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

G2使用教程

通過 npm 安裝

npm install @antv/g2 --save

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

瀏覽器引入

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

開始使用

在 G2 引入頁面后，我們就已經(jīng)做好了創(chuàng)建第一個圖表的準備了。

下面是以一個基礎(chǔ)的柱狀圖為例開始我們的第一個圖表創(chuàng)建。

1、創(chuàng)建 div 圖表容器

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

2.、編寫圖表繪制代碼

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

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

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

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

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