语法示例:

  1. chart.<geomType>()
  2. .position()
  3. .size()
  4. .color()
  5. .shape()
  6. .opacity()
  7. .adjust()
  8. .tooltip()
  9. .label()
  10. .style()
  11. .select();

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

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

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

注意:上述 chart.interval() 返回的不是 chart 对象,而是一个 geom 几何标记对象 Geom。

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

type 说明
point 点,用于点图的构建。
path 路径,无序的点连接而成的一条线。
line 线,点按照 x 轴连接成一条线,构成线图。
area 填充线图跟坐标系之间构成区域图,也可以指定上下范围。
interval 使用矩形或者弧形,用面积来表示大小关系的图形,一般构成柱状图、饼图等图表。
polygon 多边形,可以用于构建热力图、地图等图表类型。
schema k线图,箱型图。
edge 树图、流程图、关系图。
heatmap 热力图。

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

类型 描述
pointStack 层叠点图
pointJitter 扰动点图
pointDodge 分组点图
intervalStack 层叠柱状图
intervalDodge 分组柱状图
intervalSymmetric 对称柱状图
areaStack 层叠区域图
schemaDodge 分组箱型图

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

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

关于数据调整和几何标记更详细的介绍请阅读 G2 高级教程: 几何标记和数据调整

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

  1. 数据映射相关的属性函数: position, color, shape, size, opacity

  2. 显示辅助信息的函数: style, label, tooltip

  3. 额外的控制函数: adjust, select, activeshow, hide

方法

position

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

  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 的数据处理结果可以理解为:

Geom 几何标记 - 图1

(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’ 等。

  • 可以是渐变色,譬如l(270) 0:#173162 1:#3663a1

代码示例
  1. chart.point().position('x*y').color('x'); // 对 x 字段进行映射,使用内置的颜色
  2. chart.point().position('x*y').color('red'); // 所有点用红色渲染
  3. chart.point().position('x*y').color('l(270) 0:#173162 1:#3663a1'); // 使用渐变色,l 后面传入角度,0 代表起始颜色,1 代表结束颜色

color(field, colors)

参数
  • field: string

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

  • colors: string | array | function

colors 的参数有以下情况:

  • 如果为空,即未指定颜色的数组,那么使用内置的全局的颜色;

  • 如果需要指定颜色,则需要以数组格式传入,那么分类的颜色按照数组中的颜色确定。对于颜色的分配顺序,会默认按照原始数据源中字段的顺序进行分配;

  • 还支持渐变颜色设置:’color1-color2’,用于指定一个渐变色,数据根据分类或者连续类型,在渐变的颜色区间内取颜色。

  1. chart.point().position('x*y').color('z'); // 使用默认的颜色
  2. chart.point().position('x*y').color('z', [ 'red', 'blue' ]); // 使用传入的指定颜色
  3. chart.point().position('x*y').color('z', 'red-blue'); // 使用渐变色
  • colors 如果是回调函数,则该回调函数的参数为对应字段的数值,具体使用如下,当 color 映射为多个字段时,参数按照字段声明的顺序传入:
  1. chart.point().position('x*y').color('z', (value) => {
  2. if(value === 1) {
  3. return 'red'
  4. }
  5. return 'blue';
  6. });

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

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

geom 类型 shape 类型 解释
point ‘circle’, ‘square’, ‘bowtie’, ‘diamond’, ‘hexagon’, ‘triangle’, ‘triangle-down’,
‘hollowCircle’, ‘hollowSquare’, ‘hollowBowtie’, ‘hollowDiamond’,
‘hollowHexagon’, ‘hollowTriangle’, ‘hollowTriangle-down’,
‘cross’, ‘tick’, ‘plus’, ‘hyphen’, ‘line’
hollow 开头的图形都是空心的。
line ‘line’,’smooth’,’dot’,’dash’,’spline’
area ‘area’,’smooth’,’line’,’smoothLine’
interval ‘rect’,’hollowRect’,’line’,’tick’ hollowRect 是空心的矩形,line 和 tick 都是线段
polygon ‘polygon’,’hollow’ polygon 多边形、hollow 空心多边形。
schema ‘box’,’candle’ 目前仅支持箱型图、K线图

代码示例
  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'); // 使用字段映射到大小
  3. point.size('type', [ 0, 10 ]); // 使用字段映射到大小,并指定最大值和最小值
  4. point.size('type', (type) => { // 回调函数
  5. if(type === 'a') {
  6. return 10;
  7. }
  8. return 5;
  9. });

size(value)

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

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

  • point 图形的 size 影响点的半径大小;

  • line, area, path 中的 size 影响线的粗细;

  • interval 的 size 影响柱状图的宽度。

size(field)

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

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

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. });

adjust

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

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');

stack 类型支持的参数:

  • reverseOrder 控制层叠的顺序,默认是 true
    1. chart.interval()
    2. .position('year*percent')
    3. .color('country')
    4. .adjust({type: 'stack', reverseOrder: false});
    image.pngimage.png

    label

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

  1. line.label('field'); // 显示某个字段的文本
  2. line.label('x*y*z', (x, y, z) => {
  3. return; // something
  4. });
  5. line.label('x', {
  6. offset: 10
  7. textStyle: {
  8. fill: 'red'
  9. }
  10. });

label(field)

使用默认配置渲染 field 字段对应的文本。

参数
  • field: String

代表数据源中的数据字段名。

代码示例
  1. chart.point().position('x*y').label('x');

label(field, cfg)

设置全量文本的配置信息。所有配置项可见下文配置项。

  1. chart.line().label('x', {
  2. // 设置文本的显示样式,还可以是个回调函数,回调函数的参数为该坐标轴对应字段的数值
  3. textStyle: {
  4. textAlign: 'center', // 文本对齐方向,可取值为: start middle end
  5. fill: '#404040', // 文本的颜色
  6. fontSize: '12', // 文本大小
  7. fontWeight: 'bold', // 文本粗细
  8. textBaseline: 'top' // 文本基准线,可取 top middle bottom,默认为middle
  9. },
  10. rotate: 30,
  11. })

label(field, callback, cfg)

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

参数
  • field: string

代表数据源中的数据字段名。

  • callback: function

回调函数。可以返回字符串,显示成文本;也可以返回对象,对象中的文本使用 “content” 字段。

  • cfg: object

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

代码示例
  1. chart.polygon()
  2. .position('children*value')
  3. .color('type').shape('stroke')
  4. .label('name*children', (name, children) => {
  5. if (children === 0) {
  6. // 若children为0,不显示该项
  7. return null;
  8. }
  9. // 设置没有子节点的标签为红色,有子节点的为蓝色
  10. if (!children) {
  11. // 显示的文本使用 content,如果不设置这个值,会自动设置 label 函数里面的第一个字段
  12. return { textStyle: { fill: 'red' },content: name };
  13. } else {
  14. return { textStyle: { fill: 'blue' } };
  15. }
  16. }, {
  17. textStyle: {
  18. fontSize: 12
  19. }
  20. });


label配置项

通用属性

useHtml: boolean

是否使用html渲染,默认为false

formatter: function

对显示文本进行格式化 。

代码示例
  1. chart.point().position('x*y').label('x', {
  2. /**
  3. * 格式化文本信息
  4. * @param {string} text 文本值
  5. * @param {object} item 该文本值对应的原始数据记录
  6. * @param {number} index 索引值
  7. * @return {string} 返回格式化后的文本
  8. */
  9. formatter: function(text, item, index) {
  10. return text + item.point.y // 设置文本为 x + y
  11. }
  12. });

type: string

文本布局类型。默认为'default'。可选值如下:

  • scatter: 按照散点图 label 布局算法对所有 label 进行二次布局。数据过于密集的情况下会剔除放不下的 label。
散点图普通 label 布局 散点图指定 scatter label 布局
Geom 几何标记 - 图4 Geom 几何标记 - 图5
  • treemap: 剔除形状容纳不了的 label。
treemap 普通布局 指定 treemap label 布局
Geom 几何标记 - 图6 Geom 几何标记 - 图7
  • map: label 将会初始定位到地图板块的可视中心,为了防止 label 之间相互覆盖布局,尝试向四周偏移,会剔除放不下的 label。
map 普通布局 指定 map label 布局
Geom 几何标记 - 图8 Geom 几何标记 - 图9

labelLine: { object | boolean }

配置文本连线。如果值为 false,表示不展示文本线。

代码示例
  1. chart.line().label('x', {
  2. labelLine: {
  3. lineWidth: 1, // 线的粗细
  4. stroke: '#ff8800', // 线的颜色
  5. lineDash: [ 2, 1 ], // 虚线样式
  6. }
  7. });

注:为了更好的视觉效果,布局算法会忽略预设的textAligntextBaseline

canvas专有配置属性

offset: { array | number }

设置坐标轴文本 label 距离坐标轴线的距离,可以是数值或数组。默认为[0, 20]。数组可指定当前坐标轴x,y方向上的偏移。单个数值指定y方向上的偏移

textStyle

设置文本的显示样式,具体请见更详细的配置项 绘图属性

autoRotate: boolean

文本是否需要自动旋转,默认为 true

position:string

仅当chart的geom为interval时有效。指定当前label与当前图形的相对位置,可选参数为middle, top,bottom,left,right。默认为top。位置效果如下:

Geom 几何标记 - 图10

html专有配置属性

htmlTemplate: function

useHtml配合使用。当useHtml为true时,指定html渲染文本。

代码示例
  1. chart.area().label('x', {
  2. useHtml: true,
  3. htmlTemplate: (text, item, index) {
  4. return '<div>' + text + '</div>';
  5. }
  6. })

tooltip

将数据值映射到 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 的显示内容如下:

Geom 几何标记 - 图11

代码示例
  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. chart.source(data, {
  14. weight: {
  15. alias: '体重(kg)'
  16. },
  17. height: {
  18. alias: '身高(cm)'
  19. }
  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 模板相对应,返回的变量可用于 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

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

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

select

开启、关闭以及设置 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. });

active

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

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

animate

动画配置。

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

更加详细的配置参见 G2 Animate API

其他方法

show 显示

geometry 显示,如果在创建 geometry 时设置 visible: false

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

hide 隐藏

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

setSelected

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

  1. const data = [{}, {}];
  2. const interval = chart.intervalStack()
  3. .position('percent')
  4. .color('item');
  5. chart.render();
  6. interval.setSelected(data[0]);