Geom

    几何标记对象，决定创建图表的类型，具体的概念介绍请参见 。

    下面是一条简单的绘制柱状图的语法，声明完使用的 geom 类型之后，就可以进行图形上的各种图形属性映射，下面我们会进行详述。

    1. chart.interval().position('x*y').color('x');

    注意：上述 返回的不是 chart 对象，而是一个 geom 几何标记对象 Geom。

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

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

    当然几何标记和数据调整方式的组合不仅仅局限于上述几种，可以通过整合几何标记和数据调整方式来自由创建和组合图表：

    1. chart.area().position('x*y').adjust([ 'stack', 'symmetric' ]);

    Geom 支持的接口可以分为三大类：

    • 数据映射相关的属性函数: position, color, shape, size, opacity；
    • 显示辅助信息的函数: style, label, tooltip；
    • 额外的控制函数: adjust, select, active，show, hide。

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

    1. line().position('x*y');
    2. line().position([ 'x', 'y' ]);

    position('fieldA*fieldB')

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

    以 chart.point().position('x_y') 为例，point 代表图形，即最后需要生成点图，而 position 代表位置，position('x_y') 代表数据在图形中的位置由 x 和 y 这两个维度的变量决定，x * y 的数据处理结果可以理解为：

    (x1, y1) 这样的数值对，最后就会被转换为画布上对应的坐标点。

    另外，也可以以数组格式传入：chart.geom().position([ 'fieldA', 'fieldB' ])

    color

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

    1. line().color('red'); // 常量颜色
    2. line().color('type'); // 对 type 字段进行映射，使用内置的颜色
    3. line().color('type', [ 'red', 'blue' ]) // 指定颜色
    4. line().color('type', (type) => { // 通过回调函数
    5.   if (type === 'a') {
    6.     return 'red';
    7.   }
    8.   return 'blue';
    9. });
    10. line().color('type*value', (type, value) => { //多个参数，通过回调函数
    11.   if (type === 'a' && value > 100) {
    12.     return 'red';
    13.   }
    14.   return 'blue';
    15. });

    color(value)

    参数
    • value: string

    只支持接收一个参数，value 可以是：

    • 映射至颜色属性的数据源字段名，如果数据源中不存在这个字段名的话，则按照常量进行解析，这个时候会使用 G2 默认提供的颜色。
    • 也可以直接指定某一个具体的颜色值 color，如 '#fff', 'white' 等。
      代码示例
    1. chart.point().position('x*y').color('x'); // 对 x 字段进行映射，使用内置的颜色
    2. chart.point().position('x*y').color('red'); // 所有点用红色渲染

    color(field, colors)

    参数
    • field: string

    field 为映射至颜色属性的数据源字段名，也支持指定多个参数。

    • colors: string | array | function

    colors 的参数有以下情况：

    • 如果为空，即未指定颜色的数组，那么使用内置的全局的颜色；
    • 如果需要指定颜色，则需要以数组格式传入，那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序，会默认按照原始数据源中字段的顺序进行分配；
    • 还支持渐变颜色设置：'color1-color2'，用于指定一个渐变色，数据根据分类或者连续类型，在渐变的颜色区间内取颜色。

    chart.point().position('xy').color('z'); // 使用默认的颜色
    chart.point().position('x    y').color('z', [ 'red', 'blue' ]); // 使用传入的指定颜色
    chart.point().position('xy').color('z', 'red-blue'); // 使用渐变色
    chart.point().position('x    y').color('z', 'l(270) 0:#173162 1:#3663a1'); // 使用渐变色，l 后面传入角度，0 代表起始颜色，1 代表结束颜色

    • colors 如果是回调函数，则该回调函数的参数为对应字段的数值，具体使用如下，当 color 映射为多个字段时，参数按照字段声明的顺序传入：

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

    return 'blue';
    });

    shape

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

    1. point.shape('circle'); // 常量
    2. point.shape('type'); // 使用字段映射到形状，使用内置的形状
    3. point.shape('type', [ 'circle', 'diamond', 'square' ]); // 指定形状
    4. point.shape('type', (type) => { // 回调函数
    5.   if(type === 'a') {
    6.     return 'circle';
    7.   }
    8.   return 'square';
    9. });

    shape(shape)

    参数
    • shape: string
    代码示例
    1. chart.point().position('x*y').shape('square'); // 指定所有点的图形是正方形

    shape(field, shapes)

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

    参数
    • field: string

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

    • shapes: string | array

    shapes 是一个可选参数，如果没有声明会按照 G2 默认为特定 geom 类型配置的形状进行渲染，当然用户也可自己指定渲染的形状，具体的形状已在上面列出，下面是 G2 为特定的几何图形对象提供的 shapes:

    1. const shapes = {
    2.   point: [ 'hollowCircle', 'hollowSquare', 'hollowDiamond', 'hollowBowtie', 'hollowTriangle', 'hollowHexagon', 'cross', 'tick', 'plus', 'hyphen', 'line' ],
    3.   line: [ 'line', 'dash', 'dot' ],
    4.   area: [ 'area' ]
    5. };
    代码示例
    1. const defs = {
    2.   'cut': {
    3.     values: [ 'Ideal', 'Premium', 'Very-Good', 'Good', 'Fair' ]
    4.   }
    5. };
    6. chart.source(data, defs);
    7. chart.point().position('carat*price').shape('cut'); // 使用默认的 shapes
    8. chart.point().position('carat*price').shape('cut', [ 'cross', 'tick', 'plus', 'hyphen', 'line' ]); // 使用自定义的 shapes

    shape(field, callback)

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

    参数
    • field: string

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

    • callback: function

    [Function] 回调函数

    代码示例
    1. chart.point().position('x*y').shape('z', (value) => {
    2.   if (value === 1) {
    3.     return 'circle'
    4.   }
    5.   return 'square';
    6. });

    size

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

    1. point.size(10); // 常量
    2. point.size('type', [ 0, 10 ]); // 使用字段映射到大小，并指定最大值和最小值
    3. point.size('type', (type) => { // 回调函数
    4.   if(type === 'a') {
    5.     return 10;
    6.   }
    7.   return 5;
    8. });

    size(value）

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

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

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

      size(field)

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

    代码示例

    size(field, [min, max])

    根据 field 字段的值映射大小，使用声明的最大值 max 和最小值 min。

    代码示例
    1. chart.point().position('x*y').size('z', [ 10, 100 ]); // 使用 z 字段的值来映射大小，最大值为 100，最小值 10

    size(field, callback)

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

    参数
    • callback: function
      回调函数。
    代码示例
    1. chart.point().position('x*y').size('z', (value) => {
    2.   if(value === 1) {
    3.     return 5;
    4.   }
    5.   return 10;
    6. });

    opacity

    将数据值映射到图形的透明度上的方法。

    1. point.opacity(0.3); // 常量，但是数值范围为 0 - 1
    2. point.opacity('type'); // 使用字段映射到透明度
    3. point.opacity('type', (type) => { // 回调函数
    4.   if(type === 'a') {
    5.     return 1;
    6.   }
    7.   return 0.5;
    8. });

    opacity(value)

    直接指定所有图形的透明度，value 为 0 至 1 范围的小数。

    代码示例
    1. chart.interval().position('x*y').opacity(0.8); // 图形颜色为 0.8 透明度

    opacity(field)

    根据 field 字段的值计算透明度。

    代码示例
    1. chart.interval().position('x*y').opacity('z');

    opacity(field, callback)

    通过回调函数设置透明度。

    代码示例
    1. chart.point().position('x*y').opacity('z', (value) => {
    2.   if(value === 1) {
    3.     return 0.5;
    4.   }
    5.   return 0.8;
    6. });

    声明几何标记对象的数据调整方式，可用于绘制层叠图、扰动图、分组图等。支持单一的数据调整方式也支持各种数据调整方式的组合。

    G2 支持的调整类型包括： 'stack', 'dodge', 'jitter', 'symmetric'

    1. interval().adjust('stack');
    2. interval().adjust([ 'dodge', 'stack' ]);
    3. interval().adjust([{
    4.   type: 'dodge',
    5.   marginRatio: 0, // 数值范围为 0 至 1，用于调整分组中各个柱子的间距
    6.   dodgeBy: 'xx' // 声明按照 xx 字段进行分组，一般不需要声明
    7. }]);

    上述已经已经提到我们除了提供一些基本的几何图形对象类型之外，结合数据的调整方式提供了类似 pointStack 的类型，其实这些类型也可以通过参数的形式传入，并且用户还可以对这些数据的调整方式进行组合，创造出新颖多样的图表来。如下代码示例：

    1. chart.interval().position('x*y').color('z').adjust('stack');

    label

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

    1. line.label('field'); // 显示某个字段的文本
    2. line.label('x*y*z', (x, y, z) => {
    3.   return; // something
    4. });
    5.  
    6. line.label('x', {
    7.   offset: 10
    8.   textStyle: {
    9.     fill: 'red'
    10.   }
    11. });
    • textStyle 的更详细的配置项 绘图属性

      label(field)

    显示 field 字段对应的文本。

    参数
    • field: String
      代表数据源中的数据字段名。
    代码示例
    1. chart.point().position('x*y').label('x');

    label(field, cfg)

    1. chart.line().label('x', {
    2.   // 文本线的配置，如果值为 false，表示不展示文本线
    3.   labelLine: {
    4.     lineWidth: 1, // 线的粗细
    5.     stroke: '#ff8800', // 线的颜色
    6.     lineDash: [ 2, 1 ], // 虚线样式
    7.   } | false,
    8.   // 数值，设置坐标轴文本 label 距离坐标轴线的距离
    9.   offset: number, 
    10.   // 设置文本的显示样式，还可以是个回调函数，回调函数的参数为该坐标轴对应字段的数值
    11.   textStyle: {
    12.     textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    13.     fill: '#404040', // 文本的颜色
    14.     fontSize: '12', // 文本大小
    15.     fontWeight: 'bold', // 文本粗细
    16.       rotate: 30, 
    17.       textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
    18.   } || (text) => {
    19.     // text: 坐标轴对应字段的数值
    20.   }, 
    21.   // 文本是否需要自动旋转，默认为 true
    22.   autoRotate: boolean,
    23.   /**
    24.    * 用于格式化坐标轴上显示的文本信息的回调函数
    25.    * @param  {string} text  文本值
    26.    * @param  {object} item  该文本值对应的原始数据记录
    27.    * @param  {number} index 索引值
    28.    * @return {string}       返回格式化后的文本
    29.    */
    30.   formatter(text, item, index) {},
    31.   /**
    32.    *  使用 html 渲染文本
    33.    * @param  {string} text  文本值
    34.    * @param  {object} item  该文本值对应的原始数据记录
    35.    * @param  {number} index 索引值
    36.    * @return {string}       返回 html 字符串
    37.    */
    38.   htmlTemplate(text, item, index) {}
    39. })
    • textStyle 的更详细的配置项
    • htmlTemplate 默认为 null, 配置为回调函数时，既开启 html 渲染文本

      label(field, callback, cfg)

    使用回调函数控制文本显示。

    参数

    • field: string
      代表数据源中的数据字段名。

    • callback: function
      回调函数。

    • cfg: object
      该配置用法同 chart.geom().label(field, cfg) 中的 cfg 属性。

    代码示例

    将数据值映射到 Tooltip 上。

    1. tooltip(false); // 关闭该 geom 上的 tooltip
    2. tooltip('x');
    3. tooltip('x*y');
    4. tooltip('x*y', (x, y) => {})

    tooltip(false)

    关闭该 geom 上的 tooltip。

    tooltip(field)

    (field: string)

    对应数据源的一个或者多个字段，当有多个时，使用 * 来连接。

    1. chart.<geom>.tooltip('dim1*dim2...*dimN');

    这个时候 tooltip 的显示内容如下：

    image

    代码示例
    1. const data = [
    2.   { gender: "female", height: 161.2, weight: 51.6 },
    3.   { gender: "female", height: 167.5, weight: 59 },
    4.   { gender: "male", height: 159.5, weight: 49.2 },
    5.   { gender: "male", height: 157, weight: 63 },
    6.   { gender: "female", height: 155.8, weight: 53.6 }
    7. ];
    8. const chart = new G2.Chart({
    9.   container: 'c2',
    10.   forceFit: true,
    11.   height: 400
    12. });
    13.  
    14. chart.source(data, {
    15.   weight: {
    16.     alias: '体重（kg）'
    17.   },
    18.   height: {
    19.     alias: '身高（cm）'
    20. });
    21. chart.tooltip({
    22.   showTitle: false
    23. });
    24. chart.point().position('height*weight')
    25.   .color('gender', [ '#f96a52', '#00a3d7' ])
    26.   .opacity(0.5)
    27.   .shape('circle')
    28.   .tooltip('gender*height*weight');
    29. chart.render();

    tooltip(field, callback)

    (field: string, callback: function)

    geom.tooltip() 方法支持回调，使用方式如下，其返回的值必须为对象，该值中的属性同 chart.tooltip() 的 itemTpl 模板相对应，返回的变量可用于 的字符串模板:

    1. chart.tooltip({
    2.   itemTpl: '<li>{x}: {y}</li>'
    3. });
    4. chart.line()
    5.   .position('x*y')
    6.   .tooltip('x*y', (x, y) => {
    7.     return {
    8.       x, 
    9.       y
    10.     };
    11.   );

    下面是一个实际 demo:

    1. const { DataView } = DataSet;
    2. const data = [
    3.   { item: '事例一', count: 40 },
    4.   { item: '事例二', count: 21 },
    5.   { item: '事例三', count: 17 },
    6.   { item: '事例四', count: 13 },
    7.   { item: '事例五', count: 9 }
    8. ];
    9. const dv = new DataView();
    10. dv.source(data).transform({
    11.   type: 'percent',
    12.   field: 'count',
    13.   dimension: 'item',
    14.   as: 'percent'
    15. });
    16. const chart = new G2.Chart({
    17.   container: 'c3',
    18.   forceFit: true,
    19.   height: 400,
    20.   padding: [ 80, 100, 80, 80 ]
    21. });
    22. chart.source(dv, {
    23.   percent: {
    24.     formatter: val => {
    25.       val = (val * 100) + '%';
    26.       return val;
    27.     }
    28.   }
    29. });
    30. chart.coord('theta', {
    31.   radius: 0.75
    32. });
    33. chart.tooltip({
    34.   showTitle: false,
    35.   itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
    36. });
    37. chart.intervalStack()
    38.   .position('percent')
    39.   .color('item')
    40.   .label('percent', {
    41.     formatter: (val, item) => {
    42.       return item.point.item + ': ' + val;
    43.     }
    44.   })
    45.   .tooltip('item*percent', (item, percent) => {
    46.     percent = percent * 100 + '%';
    47.     return {
    48.       name: item,
    49.       value: '<span style="color: #1890ff;">' + percent + '</span>'
    50.     };
    51.   })
    52.   .style({
    53.     lineWidth: 1,
    54.     stroke: '#fff'
    55.   });
    56. chart.render();
    • style 的更详细的配置项

      style

    用于配置几何标记显示的图形属性。

    1. // 几种使用方式
    2. line().style({ // 统一为所有 shape 设置固定的样式
    3.   lineWidth: 2
    4. });
    5. line().style('a*b', { // 使用回调函数设置属性
    6.   lineWidth: (a, b) => {},
    7.   stroke: 'red'
    8. });

    开启、关闭以及设置 shape 对于鼠标 click 事件的响应效果， G2 默认仅为饼图开启了选中效果。

    1. geom.select(false); // 关闭
    2. geom.select(true); // 打开
    3. geom.select([true,] {
    4.   mode: 'single' | 'multiple', // 选中模式，单选、多选
    5.   style: {}, // 选中后 shape 的样式
    6.   cancelable: true | false, // 选中之后是否允许取消选中，默认允许取消选中
    7.   animate: true | false // 选中是否执行动画，默认执行动画
    8. });
    • style 的更详细的配置项

    开启以及关闭 shape 对于鼠标 hover 时的响应效果，G2 默认为各个 shaoe 内置了 active 效果 。

    1. geom.active(false); // 关闭默认响应
    2. geom.active(true); // 开启默认响应
    3.  
    4. geom.active([true], {
    5.   highlight: false, // true 是否开启 highlight 效果，开启时没有激活的变灰
    6.   style: {
    7.     fill: 'red'
    8.   }
    9. });

    动画配置。

    1. geom().animate({
    2.   appear: {
    3.     // 初始入场动画配置
    4.   }
    5.   enter: {
    6.     // 更新时出现动画配置
    7.   },
    8.   leave: {
    9.     // 更新时销毁动画配置
    10.   },
    11.   update: {
    12.     // 更新时改变动画配置
    13.   }
    14. });

    更加详细的配置参见 。

    其他方法

    show 显示，默认 geometry 显示，如果在创建 geometry 时设置 visible: false

    1. const line = chart.line({visible: false}).position('x*y');
    2.  
    3. line.show();

    hide 隐藏

    1. const line = chart.line().position('x*y');
    2.  

    setSelected

    可以指定原始数据选中对应的图形

    View

    原文: https://antv.alipay.com/zh-cn/g2/3.x/api/geom.html