G2有一個高大上的名字叫做：The Grammar Of Graphics——圖形語法。它是一個強大的語義化圖表生成工具，它提供了一整套圖形語法，可以讓用戶通過簡單的語法搭建出無數種圖表，並且集成了大量的統計工具，支持多種坐標系繪制，可以讓用戶自由定制圖表，是為大數據時代而准備的強大可視化工具。
官方地址：(https://g2.alipay.com/)
試用G2
G2和傳統的圖表系統（HighCharts，ACharts等）不同，G2是一個基於統計分析的語義化數據可視化系統。它真正做到了讓數據驅動圖形，讓你在使用它時候不用關心繪圖細節，只需要知道你想通過它怎么展示你關心的數據。是螞蟻金服推出的可視分析解決方案。
你手上可能有數據，但是不知道如何展示，不知道如何使用可視化的方法來分析數據。現在有了G2一切都可以解決了！
下面讓我們看看它的威力，它的便捷程度簡直是喪心病狂：
為了能演示它的威力，我們特別做了這個試用頁面，請大家打開這個頁面http://antvis.github.io/exec.html，按照下面的gif演示過程試用下G2，任何一個人都可以使用它完成利用圖形的力量分析處理數據的過程。
介紹數據
首先我們已經給你們准備好了一份測試數據(R語言中常用的鑽石數據)，當然你也可以使用你自己的測試數據（載入方法和數據格式后面說）。這份數據是一份鑽石數據，大約有1000顆鑽石，每顆鑽石都是一行數據，每行數據都有關於這顆鑽石的參數比如4C參數(carat, cut, color, clarity), 外形參數(depth, width, x, y, z), 價格參數(price)。如圖：
最初的需求
讓我們先來一個最簡單的需求，對於鑽石大家肯定最關心的就是鑽石的大小和其價格之間的關系。請跟着我們邊打下面這行代碼邊默念接着的這句話:顯示一個圖表，使用點來表示每行數據，其中把carat(克拉)映射到位置信息(position)中的x軸，把price（價格）映射到位置信息(position)中的y軸。點擊執行。哈！ 我們稱這個概念叫做映射，它可以幫助你把數據中你關心的字段映射到圖形空間。
chart.point().position('carat*price');
更多的映射
讓我們再加入更多的映射試試，我們把cut(切割工藝)映射為圖形的顏色, 把clarity(純凈度)映射為圖形的形狀。
chart.point().position('carat*price').color('cut').shape('clarity');
我們數據的更多維度展示在了圖形上。可以被映射的屬性叫做視覺通道。
分面
但是剛才那個圖中雖然展示了四維的信息，但是各個維度都疊加在一起，不利於觀察，這個時候我們就可以使用一些特別的技巧了，其中一個技巧叫分面。它可以將原來的一個圖形按照某種分類規則陣列成一個矩陣，或者一個圓環等。這樣可以單獨觀察某種條件下的圖形並形成對比。水平方向按照cut陣列，垂直方向按照clarity陣列。
chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet(['cut', 'clarity']);
下面這兩個分別是僅僅水平陣列，僅僅垂直陣列。
chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet(['cut']);
chart.point().position('carat*price').color('cut').shape('clarity');
chart.facet([, 'clarity']);
更換demo的數據
這個章節的內容不屬於G2，僅僅是教大家怎么更換訓練頁中的測試數據。這個頁面可以訓練你使用G2。拿自己關心的數據進行測試才是開心的哈！
數據格式： G2假定的數據格式只有一種，就是一個數組，其中每個對象（簡單對象）是一行數據，對象中的字段名就是列名，值就是當前行中對應列的值。下面是一份tokyo，newYork，berlin各個城市間不同月份氣溫的數據。
[
{"month":0,"tem":7,"city":"tokyo"},
{"month":1,"tem":6.9,"city":"tokyo"},
{"month":2,"tem":9.5,"city":"tokyo"},
{"month":3,"tem":14.5,"city":"tokyo"},
{"month":4,"tem":18.2,"city":"tokyo"},
{"month":5,"tem":21.5,"city":"tokyo"},
{"month":6,"tem":25.2,"city":"tokyo"},
{"month":7,"tem":26.5,"city":"tokyo"},
{"month":8,"tem":23.3,"city":"tokyo"},
{"month":9,"tem":18.3,"city":"tokyo"},
{"month":10,"tem":13.9,"city":"tokyo"},
{"month":11,"tem":9.6,"city":"tokyo"},
{"month":0,"tem":-0.2,"city":"newYork"},
{"month":1,"tem":0.8,"city":"newYork"},
{"month":2,"tem":5.7,"city":"newYork"},
{"month":3,"tem":11.3,"city":"newYork"},
{"month":4,"tem":17,"city":"newYork"},
{"month":5,"tem":22,"city":"newYork"},
{"month":6,"tem":24.8,"city":"newYork"},
{"month":7,"tem":24.1,"city":"newYork"},
{"month":8,"tem":20.1,"city":"newYork"},
{"month":9,"tem":14.1,"city":"newYork"},
{"month":10,"tem":8.6,"city":"newYork"},
{"month":11,"tem":2.5,"city":"newYork"},
{"month":0,"tem":-0.9,"city":"berlin"},
{"month":1,"tem":0.6,"city":"berlin"},
{"month":2,"tem":3.5,"city":"berlin"},
{"month":3,"tem":8.4,"city":"berlin"},
{"month":4,"tem":13.5,"city":"berlin"},
{"month":5,"tem":17,"city":"berlin"},
{"month":6,"tem":18.6,"city":"berlin"},
{"month":7,"tem":17.9,"city":"berlin"},
{"month":8,"tem":14.3,"city":"berlin"},
{"month":9,"tem":9,"city":"berlin"},
{"month":10,"tem":3.9,"city":"berlin"},
{"month":11,"tem":1,"city":"berlin"}
]只要是這種類型的數據，G2都是可以接受的。
你只需要將這份數據拷入，訓練頁面中的數據框中，點載入按鈕即可。如下圖操作
超越點圖
細心的讀者可能發現，我們一直演示的都是點圖。那我們能不能畫其他圖形呢？答案是肯定的。下面就使用剛剛載入的溫度數據畫線圖。這句話是將月份映射為x，溫度映射為y，不同city城市用不同的顏色，使用線來表示根據顏色分組出的數據。 見下圖：
chart.line().position('month*tem').color('city');
這個時候你可能覺得下面顯示的數字而不是一，二，三等中文數字，不符合視覺閱讀習慣。你可以更改數據列的定義方式。
chart.col('month',{ // 定義列，指定月份對應的中文
type: 'cat',
values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
});
chart.line().position('month*tem').color('city');這樣x顯示的就是中文了。如圖：
坐標系變換
除了上面的特性，還有一個很有意思的特性就是修改圖形所在的坐標系。我們可以輕易的將一個圖從二維直角空間轉換為極坐標空間。見下圖
chart.coord('polar');
chart.col('month',{ // 定義列，指定月份對應的中文
type: 'cat',
values: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
});
chart.area().position('month*tem').color('city');
統計
G2還可以幫你做統計。可視化就是利用圖形的力量對數據做處理進而分析。可視化和統計密不可分的。下面就是一個做統計的例子，更多例子歡迎這里觀看文檔。這個圖意思是將cut映射為x，price映射為y，真對每種cut計算它對應的price最大值，使用區間（interval，你可以暫時理解為柱狀圖）來表示每個cut的最大值，為不同的cut使用不同的顏色。見下圖：
chart.interval().position(Stat.summary.max('cut*price')).color('cut');
無窮多的圖表
今天介紹了很多概念，例如映射，圖形種類，視覺通道，分面，統計等。我們注意到每種概念都是一個范疇，它是可以擴展的。如果我們能在理解自己的數據的基礎上，善用G2的概念，你就可以組合出無窮多種圖表，總有一種適合你。
如有建議，請聯系我們
歡迎各位使用 : https://g2.alipay.com/
如果有好的建議，請及時聯系我們（螞蟻金服——體驗技術部——數據圖形組）。反饋地址https://github.com/antvis/feedback/issues/new
同時我們也發布了一套專業的數據可視化規范，歡迎查看http://antv.alipay.com/。