alipay-g2

G2(The Grammar Of Graphics)是一个由支付宝团队开发的纯 javascript 实现的强大的数据可视化工具,提供了一整套图形语法,可以让用户通过简单的语法搭建出无数种图表,并且集成了大量的统计工具,支持多种坐标系绘制,可以让用户自由地定制图表。G2 以数据为驱动完成数据到图形空间的映射,是为大数据时代而准备的强大的可视化工具。

引入 G2

<script> 标签引入的方式。

创建图表容器

标注 DOM 容器上的 ID,用于绘制图表。


<div id="c1"></div>

绘制图表

完成以上简单的两步之后,就可以进行简单的图表绘制:

  1. 创建 Chart 图表,指定图表所在的容器 ID、指定图表的宽高、边距等信息;
  2. 载入图表数据源;
  3. 使用图形语法进行图表的绘制;
  4. 渲染图表。

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();

这样就可以绘制出一张漂亮的柱状图了,如下图所示:
g2-demo