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