G2-mobile

Geom

几何图形对象，用于声明绘制的图表类型。

以下是目前 Geom 的基本类型：

type	说明
point	点，用于点图的构建。
line	线，点按照 x 轴连接成一条线，构成线图。
area	填充线图跟坐标系之间构成区域图，也可以指定上下范围。
interval	使用矩形或者弧形，用面积来表示大小关系的图形，一般构成柱状图、饼图等图表。
polygon	多边形，可以用于构建热力图、地图等图表类型。
schema	自定义图形，用于构建箱须图、蜡烛图等图表。

另外结合对数据的调整，还提供了如下的类型：

type	说明
intervalStack	层叠柱状图
areaStack	层叠面积图

方法

position

position(dims)

将数据值映射到图形的位置上的方法。

chart.geom().position(dim)

dim 为字符串，代表数据源中某一个字段，用于一维坐标系图表绘制。

chart.geom().position('dimA*dimB')

多维使用 连接，position 属性会对多个字段进行数据的映射，如：cutprice，x*y 等，用于二维坐标系图表的绘制。

示例

chart.point().position('cut');
chart.interval().position('cut*price');

color

color(dim, colors)

将数据值映射到图形的颜色上的方法。

chart.geom().color(dim | color)

参数

dim or color

只支持接收一个参数，dim 可以为映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white' 等。

示例

chart.point().position('x*y').color('x');
chart.point().position('x*y').color('red')

chart.geom().color(dim, [colors]);

参数

dim

dim 为映射至颜色属性的数据源字段名。
colors

以数组格式传入指定颜色，分类的颜色将按照数组中的颜色确定。对于颜色的分配顺序，会默认按照原始数据源中字段的顺序进行分配；

示例

chart.point().position('x*y').color('z'); // 使用默认的颜色
chart.point().position('x*y').color('z', ['red', 'blue']); // 使用传入的指定颜色

chart.geom().color(dim, colorCallback)

参数

dim

dim 为映射至颜色属性的数据源字段名
colorCallback

[Function]，指定一个颜色的回调函数，用于高灵活度的用户自定义。

示例

chart.point().position('x*y').color('z', function(value) {
  if(value === 1) {
    return 'red'
  }else {
    return 'blue';
  }
});

shape

shape(dim, shapes)

将数据值映射到图形的形状上的方法。

chart.geom().shape('shape');

参数

shape

只支持接收一个参数，指定几何图像对象绘制的形状。下表列出了支持多个 shape 的 geom ：

geom 类型	shape 类型	解释
point	'circle','rect'
line	'line','smooth','dash'	dash ：虚线，smooth：平滑线
area	'line','smooth'

示例

chart.point().position('x*y').shape('rect'); // 指定所有点的图形是正方形

chart.geom().shape(dim, shapes);

指定多个图形，图形的顺序跟字段的值对应。

参数

dim

dim 为映射至颜色属性的数据源字段名。
shapes

shapes 是一个可选参数，如果没有声明会按照 G2-mobile 默认为特定 geom 类型配置的形状进行渲染，当然用户也可自己指定渲染的形状。详情参考自定义 shape 教程

示例

chart.point().position('carat*price').shape('cut', ['circle', 'rect']); // 使用自定义的 shapes

chart.geom().shape(dim, callback);

通过回调函数设置图形类型.

参数

dim

dim 为映射至颜色属性的数据源字段名。
callback

[Function] 回调函数

示例

chart.point().position('x*y').shape('z', function(value) {
  if (value === 1) {
    return 'circle'
  }else {
    return 'rect';
  }
});

size

size(dim | value)

将数据值映射到图形的大小上的方法。

chart.geom().size(value）

传入数字常量，如 chart.point().size(20)。

注意： 不同图形的 size 的含义有所差别：

point 图形的 size 影响点的半径大小；
line，area，path 中的 size 影响线的粗细；
interval 的 size 影响柱状图的宽度。

chart.geom().size(dim)

根据 dim 字段的值映射大小，使用默认的最大值 max:10 和最小值 min: 1。

示例

chart.point().position('x*y').size('z'); // 使用 z 字段的值来映射大小

示例

chart.point().position('x*y').size(10);
chart.point().position('x*y').size('z');

chart.geom().size(dim, callback)

使用回调函数控制图形大小。

示例

chart.point().position('x*y').size('z', function(value) {
  if(value === 1) {
    return 5;
  }
  return 10;
});

style

style(cfg)

用于快速配置图形的样式。参数符合 canvas 图形属性

示例

var cfg = {
  line: {
    lineDash: [2,4] // 虚线配置
  },
  interval: {
    radius: 5 // 圆角柱状图
  }

};

默认样式参考 G2 style