五分鐘上手 G2獲取 G2目前 G2 只提供 <script> 標(biāo)簽引入的方式。
你可以下載 JS 文件 點(diǎn)此下載 到本地,，然后通過(guò) <script> 標(biāo)簽引入到頁(yè)面上。
也可以直接引入cdn上的文件：
<script src="https://as./g/datavis/g2/1.2.1/index.js"></script>
引入 G2G2 的引入方式很簡(jiǎn)單,，只需要像普通的 JavaScript 庫(kù)一樣用 script 標(biāo)簽引入即可。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- 引入 G2 文件 --> <script src="https://as./g/datavis/g2/1.2.1/index.js"></script> </head> <body></body></html>
創(chuàng)建圖表容器標(biāo)注 DOM 容器上的 ID,，用于繪制圖表。
繪制圖表完成以上簡(jiǎn)單的兩步之后,，就可以進(jìn)行簡(jiǎn)單的圖表繪制了：
- 創(chuàng)建 Chart 圖表，指定圖表所在的容器 ID,、指定圖表的寬高,、邊距等信息,；
- 載入圖表數(shù)據(jù)源；
- 使用圖形語(yǔ)法進(jìn)行圖表的繪制,；
- 渲染圖表,。
完整的代碼如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>柱狀圖</title> <!-- 引入 G2 文件 --> <script src="https://as./g/datavis/g2/1.2.1/index.js"></script> </head> <body> <!-- 創(chuàng)建圖表容器 --> <div id="c1"></div> <script> var data = [ {genre: 'Sports', sold: 275}, {genre: 'Strategy', sold: 115}, {genre: 'Action', sold: 120}, {genre: 'Shooter', sold: 350}, {genre: 'Other', sold: 150}, ]; // G2 對(duì)數(shù)據(jù)源格式的要求,，僅僅是 JSON 數(shù)組，數(shù)組的每個(gè)元素是一個(gè)標(biāo)準(zhǔn) JSON 對(duì)象,。 // Step 1: 創(chuàng)建 Chart 對(duì)象 var chart = new G2.Chart({ id: 'c1', // 指定圖表容器 ID width : 800, // 指定圖表寬度 height : 400 // 指定圖表高度 }); // Step 2: 載入數(shù)據(jù)源 chart.source(data, { genre: { alias: '游戲種類(lèi)' // 列定義,，定義該屬性顯示的別名 }, sold: { alias: '銷(xiāo)售量' } }); // Step 3：創(chuàng)建圖形語(yǔ)法,，繪制柱狀圖，由 genre 和 sold 兩個(gè)屬性決定圖形位置,，genre 映射至 x 軸，sold 映射至 y 軸 chart.interval().position('genre*sold').color('genre') // Step 4: 渲染圖表 chart.render(); </script> </body></html>
這樣就可以繪制出一張漂亮的柱狀圖了,，如下圖所示：
想要了解 G2 更多的細(xì)節(jié)，請(qǐng)查看 G2 的教程,。
|
