G2(The Grammar Of Graphics)是一个由支付宝团队开发的纯 javascript 实现的强大的数据可视化工具，提供了一整套图形语法，可以让用户通过简单的语法搭建出无数种图表，并且集成了大量的统计工具，支持多种坐标系绘制，可以让用户自由地定制图表。G2 以数据为驱动完成数据到图形空间的映射，是为大数据时代而准备的强大的可视化工具。
引入 G2
<script> 标签引入的方式。
创建图表容器
标注 DOM 容器上的 ID，用于绘制图表。
<div id="c1"></div>
绘制图表
完成以上简单的两步之后，就可以进行简单的图表绘制：
- 创建 Chart 图表，指定图表所在的容器 ID、指定图表的宽高、边距等信息；
- 载入图表数据源；
- 使用图形语法进行图表的绘制；
- 渲染图表。
var data = [
{genre: 'Sports', sold: 275},
{genre: 'Strategy', sold: 115},
{genre: 'Action', sold: 120},
{genre: 'Shooter', sold: 350},
{genre: 'Other', sold: 150},
]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
// Step 1: 创建 Chart 对象
var chart = new G2.Chart({
id: 'c1', // 指定图表容器 ID
width : 800, // 指定图表宽度
height : 400 // 指定图表高度
});
// Step 2: 载入数据源
chart.source(data, {
genre: {
alias: '游戏种类' // 列定义，定义该属性显示的别名
},
sold: {
alias: '销售量'
}
});
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
chart.interval().position('genre*sold').color('genre')
// Step 4: 渲染图表
chart.render();
这样就可以绘制出一张漂亮的柱状图了，如下图所示：
2017-08-07
