G2-mobile

安装

浏览器引入

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

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

通过 npm 安装

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

  1. npm install g2-mobile --save

快速开始

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

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

1. 创建 canvas 画布

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

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

2. 编写图表绘制代码

1、 创建 Chart 图表对象;

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

2、 载入图表数据源;

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

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

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

4、 渲染图表。

  1. chart.render();

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

完整的代码如下:

柱状图
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>柱状图</title>
  6. <!-- 引入 GM 脚本 -->
  7. <script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.14/index.js"></script>
  8. </head>
  9. <body>
  10. <canvas id="c1" style="width:416px;height:218px;"></canvas>
  11. <script>
  12. GM.Global.pixelRatio = 2;
  13. var data = [
  14. {"tem": 10, "city": "tokyo"},
  15. {"tem": 4, "city": "newYork"},
  16. {"tem": 3, "city": "berlin"}
  17. ];
  18. var chart = new GM.Chart({
  19. id: 'c1'
  20. });
  21. chart.source(data);
  22. chart.interval().position('city*tem').color('city');
  23. chart.render();
  24. </script>
  25. </body>
  26. </html>

说明

g2-mobile 与 g2 共用工具类 util

  1. var Util = GM.Util;

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