G2-mobile

安装

浏览器引入

既可以通过将脚本下载到本地也可以直接引入在线资源;

<!-- 引入在线资源 -->
<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.22/index.js"></script>
<!-- 引入本地脚本 -->
<script src="./index.js"></script>

通过 npm 安装

我们提供了 G2-mobile npm 包,通过下面的命令即可完成安装

npm install g2-mobile --save

快速开始

在 G2-mobile 引入页面后,我们就已经做好了创建图表的准备了。

下面以一个基础的柱状图为例,开始我们第一个图表的创建。

1. 创建 canvas 画布

在页面创建一个 <canvas></canvas> 标签,设置 id 和画布宽高:

<canvas id="c1" style="width:416px;height:218px;"></canvas>

2. 编写图表绘制代码

1、 创建 Chart 图表对象;

var chart = new GM.Chart({
  id: 'c1'
});

2、 载入图表数据源;

var data = [
  {"tem": 10, "city": "tokyo"},
  {"tem": 4, "city": "newYork"},
  {"tem": 3, "city": "berlin"}
];
chart.source(data);

3、 使用图形语法进行图表的绘制;

chart.interval().position('city*tem').color('city');

4、 渲染图表。

chart.render();

完成上述步骤之后,保存文件并用浏览器打开,一张柱状图就绘制成功了:

完整的代码如下:

柱状图
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>柱状图</title>
    <!-- 引入 GM 脚本 -->
    <script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.14/index.js"></script>
  </head>
  <body>
    <canvas id="c1" style="width:416px;height:218px;"></canvas>
    <script>
      GM.Global.pixelRatio = 2;
      var data = [
        {"tem": 10, "city": "tokyo"},
        {"tem": 4, "city": "newYork"},
        {"tem": 3, "city": "berlin"}
      ];
      var chart = new GM.Chart({
        id: 'c1'
      });
      chart.source(data);
      chart.interval().position('city*tem').color('city');
      chart.render();
    </script>
  </body>
</html>

说明

g2-mobile 与 g2 共用工具类 util

var Util = GM.Util;

想要了解 G2-mobile 更多功能和细节,请阅读 G2-mobile 的 API