快速上手

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。