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。