箱型图

阅读时间约 1 分钟

图表容器

width

optional number default: 400

设置图表宽度。

height

optional number default: 400

设置图表高度。

autoFit

optional boolean default: true

图表是否自适应容器宽高。当 autoFit 设置为 true 时,widthheight 的设置将失效。

padding

optional number[] | number | 'auto'

画布的 padding 值,代表图表在上右下左的间距,可以为单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向,或者开启 auto,由底层自动计算间距。

appendPadding

optional number[] | number

额外增加的 appendPadding 值,在 padding 的基础上,设置额外的 padding 数值,可以是单个数字 16,或者数组 [16, 8, 16, 8] 代表四个方向。

renderer

optional string default: canvas

设置图表渲染方式为 canvassvg

pixelRatio

optional number default: window.devicePixelRatio

设置图表渲染的像素比,和底层的 devicePixelRatio 含义一致,一般不用设置,除非在页面有整体 scale 的情况下,可以自定义。

limitInPlot

optional boolean

是否对超出坐标系范围的 Geometry 进行剪切。

数据映射

data

required array object

设置图表数据源。数据源为对象集合,例如:[{ time: '1991',value: 20 }, { time: '1992',value: 20 }]

xField

required string

图形在 x 方向对应的数据字段名,一般是横向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么班级字段就是对应的 xField。

yField

required string

图形在 y 方向对应的数据字段名,一般是纵向的坐标轴对应的字段。比如:要看不同班级的人数情况,那么人数字段就是对应的 yField。

groupField

optional string

分组拆分字段,默认是分组情况,颜色作为视觉通道。

outliersField

optional string

异常值字段。

meta

optional object

全局化配置图表数据元信息,以字段为单位进行配置,来定义数据的类型和展示方式。在 meta 上的配置将同时影响所有组件的文本信息。

细分配置项名称类型功能描述
aliasstring字段的别名
formatterfunctioncallback 方法,对该字段所有值进行格式化处理
valuesstring[]枚举该字段下所有值
rangenumber[]字段的数据映射区间,默认为[0,1]

关于 meta 的更多配置项,请查看 Meta Options

图形样式

boxStyle

optional StyleAttr | Function

柱子样式配置。

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

outliersStyle

optional StyleAttr | Function

柱子样式配置,配置同 boxStyle。

color

optional string | string[] | Function

指定点的颜色。如没有配置 colorField,指定一个单值即可。对 colorFiled 进行了配置的情况下,即可以指定一系列色值,也可以通过回调函数的方法根据对应数值进行设置。

默认配置:采用 theme 中的色板。

// 设置单一颜色
{
  color: '#a8ddb5'
}
// 设置多色
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // 部分图表使用 seriesField
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

图表组件

tooltip

fields
可选 string[]

指定 tooltip 中显示的字段,默认不同图表有不同的默认字段列表。配合 formatter 配置一起使用,效果更佳。

tooltip: {
  fields: ['x', 'y'],
}
formatter
可选 Function

格式化 tooltip item 内容(暂时不支持多 tooltipItems 的格式化,可以使用 customContent 处理)

tooltip: {
  formatter: (datum: Datum) => {
    return { name: datum.x, value: datum.y + '%' };
  },
}
follow
可选 boolean default: true

设置 tooltip 内容框是否跟随鼠标移动。

enterable
可选 boolean default: false

tooltip 是否允许鼠标滑入。

showTitle
可选 boolean default: false

是否展示 tooltip 标题。

title
可选 string

设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。

position
可选 top | bottom | left | right

设置 tooltip 的固定展示位置,相对于数据点。

shared
可选 boolean

true 表示合并当前点对应的所有数据并展示,false 表示只展示离当前点最逼近的数据内容。

showCrosshairs
可选 boolean default: false

是否展示 crosshairs。

crosshairs
可选 object

配置 tooltip 的 crosshairs,当且仅当 showCrosshairs 为 true 时生效。

细分配置项名称类型功能描述
typex | y | xycrosshairs 的类型: x 表示 x 轴上的辅助线,y 表示 y 轴上的辅助项
linelineStyle线的配置项,详细可见 ShapeAttrs
texttextStyle辅助线文本配置,支持回调
textBackgroundtextBackgroundStyle辅助线文本背景配置
followboolean辅助线是否跟随鼠标移动,默认为 false,即定位到数据点

textStyle

属性名类型介绍
fontSizenumber文字大小
fontFamilystring文字字体
fontWeightnumber字体粗细
lineHeightnumber文字的行高
textAlignstring设置文本内容的当前对齐方式, 支持的属性:center | end | left | right | start,默认值为start
fillstring文字的填充色
fillOpacitynumber文字的填充透明度
strokestring文字的描边
lineWidthnumber文字描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber文字的整体透明度
shadowColorstring文字阴影颜色
shadowBlurnumber文字阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距文字的水平距离
shadowOffsetYnumber设置阴影距文字的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码,以 label.style 配置为例:

{
  label: {
    style:{
      fontSize: 80,
      fontWeight: 300,
      textAlign: 'center',
      textBaseline: 'middle',
      shadowColor: 'white',
      shadowBlur: 10,
    }
  }
}

textBackgroundStyle

细分配置项名称类型功能描述
paddingnumber | number[]文本背景周围的留白
styleshapeStyle线的配置项, 详细可见 ShapeAttrs
showMarkers
可选 boolean default: true

是否渲染 tooltipMarkers。

marker
可选 ShapeAttrs

tooltipMarker 的样式配置。

样式配置类型,详细可见: ShapeAttrs

showContent
可选 boolean default: false

是否展示 tooltip 内容框。

container
可选 string|HTMLElement

自定义 tooltip 的容器。

containerTpl
可选 string

用于指定图例容器的模板,自定义模板时必须包含各个 dom 节点的 class。

itemTpl
可选 string

每项记录的默认模板,自定义模板时必须包含各个 dom 节点的 class。

domStyles
可选 TooltipDomStyles

传入各个 dom 的样式。

dom-styles
/** Tooltip 内容框的 css 样式定义 */
{
  domStyles: {
    'g2-tooltip'?: CSSProperties;
    'g2-tooltip-title'?: CSSProperties;
    'g2-tooltip-list'?: CSSProperties;
    'g2-tooltip-list-item'?: CSSProperties;
    'g2-tooltip-marker'?: CSSProperties;
    'g2-tooltip-value'?: CSSProperties;
    'g2-tooltip-name'?: CSSProperties;
  }
}
offset
可选 number

tooltip 偏移量。

reversed
optional boolean

是否将 tooltip items 逆序.

showNil
optional boolean

是否显示空值的 tooltip 项

customItems
可选 Function

在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等)。

{
  tooltip: {
    customItems: (originalItems: TooltipItem[]) => {
      // process originalItems, 
      return originalItems;
    };
  }
}
customContent
可选 Function

支持自定义模板。

{
  tooltip: {
    customContent: (title, data) => {
      return `<div>${title}</div>`;
    };
  }
}

尝试一下:

label

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 inner|outer|spider
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

LabelLineCfg 类型定义如下:(关于 ShapeAttrs 详细查看 ShapeAttrs 文档)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    },
    rotate: true
  }
}

axis

xAxis、yAxis 配置相同。注意:由于 DualAxes(双轴图) 和 BidirectionalBar(对称条形图) 是双 y 轴, yAxis 类型是以 yField 中的字段作为 key 值的object

top
optional boolean default: false

是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡。

position
optional top | bottom | left | right

适用于直角坐标系,设置坐标轴的位置。

title
optional object

标题的配置项,null 表示不展示。

细分配置项名称类型功能描述
textstring坐标轴标题
positionstring轴标题的位置,默认:'center'。可选项: start, center, end
offsetnumber标题距离坐标轴的距离
spacingnumber标题距离坐标轴文本的距离
styleshapeStyle标题文本配置项
autoRotateboolean是否自动旋转

shapeStyle

属性名类型介绍
fillstring图形的填充色
rnumber用于 point, 代表图形的半径大小
fillOpacitynumber图形的填充透明度
strokestring图形的描边
lineWidthnumber图形描边的宽度
lineDash[number,number]描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
lineOpacitynumber描边透明度
opacitynumber图形的整体透明度
shadowColorstring图形阴影颜色
strokeOpacitynumber图形边框透明度
shadowBlurnumber图形阴影的高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例代码:

{
  style: {
    fill: 'red',
    fillOpacity: 0.5,
    stroke: 'black',
    lineWidth: 1,
    lineDash: [4, 5],
    strokeOpacity: 0.7,
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5,
    cursor: 'pointer'
  }
}

关于 ShapeStyle 更加详细的文档参考 绘图属性

label

optional object

文本标签的配置项,null 表示不展示。

属性名类型介绍
typestring当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染(饼图 label 支持 inner|outer|spider
offsetnumberlabel 的偏移量
offsetXnumberlabel 相对于数据点在 X 方向的偏移距离
offsetYnumberlabel 相对于数据点在 Y 方向的偏移距离
contentstring | IGroup | IShape | GeometryLabelContentCallback展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示
styleShapeAttrslabel 文本图形属性样式
autoRotatestring是否自动旋转,默认 true
rotatenumber文本旋转角度
labelLinenull | boolean | LabelLineCfg用于设置文本连接线的样式属性,null 表示不展示。
labelEmitboolean只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭
layout'overlap' | 'fixedOverlap' | 'limitInShape'文本布局类型,支持多种布局函数组合使用。
position'top' | 'bottom' | 'middle' | 'left' | 'right'指定当前 label 与当前图形的相对位置
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

LabelLineCfg 类型定义如下:(关于 ShapeAttrs 详细查看 ShapeAttrs 文档)

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    },
    rotate: true
  }
}
label
optional AxisLabelCfg | null

文本标签的配置项,null 表示不展示。AxisLabelCfg 配置如下:

参数名类型默认值描述
offsetnumber-label 的偏移量
rotatenumber-文本旋转角度
autoRotateboolean |avoidCallbacktrue是否自动旋转
autoHideboolean |avoidCallback | { type:string,cfg?:AxisLabelAutoHideCfg }false是否自动隐藏
autoEllipsisboolean |avoidCallback |stringfalse是否自动省略
formatter(text: string, item: ListItem, index: number) => anyfalse格式化函数
styleShapeAttrs-坐标轴刻度线的样式配置项

avoidCallback 类型定义如下:

type avoidCallback = (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean;

AxisLabelAutoHideCfg 类型定义如下:

interface AxisLabelAutoHideCfg {
  /** 最小间距配置 */
  minGap?: number;
}
verticalFactor
optional number

标记坐标轴 label 的方向,左侧为 1,右侧为 -1(仅适用于垂直方向的坐标轴)

verticalLimitLength
optional number

配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。

grid
optional object

坐标轴网格线的配置项,null 表示不展示。

细分配置项名称类型功能描述
linelineStyle线的样式,
alternateColorstring|string[]两个栅格线间的填充色
closedboolean对于 circle 是否关闭 grid
alignTickboolean是否同刻度线对齐,如果值为 false,则会显示在两个刻度中间

网格线条样式的配置与 line 是一致的。

line
optional object

坐标轴线的配置项,null 表示不展示。

注意: 线条样式的完整配置是 { style: { stroke: '#ddd', ... } }, 如果配置线条样式不生效的时候,请检查一下。

属性名类型介绍
strokestring线的颜色
lineWidthnumber线宽
lineDash[number,number]虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0,0]的效果为没有描边。
opacitynumber透明度
shadowColorstring阴影颜色
shadowBlurnumber高斯模糊系数
shadowOffsetXnumber设置阴影距图形的水平距离
shadowOffsetYnumber设置阴影距图形的垂直距离
cursorstring鼠标样式。同 css 的鼠标样式,默认 'default'。

示例(设置 x 轴的 grid 网格线条样式):

{
  xAxis: {
    grid: {
      line: {
        style: {
          stroke: 'black',
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: 'black',
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: 'pointer'
        }
      }
    }
  }
}
tickLine
optional object

坐标轴刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴刻度线的样式。
alignTickboolean坐标轴刻度线是否同 tick 对齐
lengthnumber坐标轴刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
subTickLine
optional object

坐标轴子刻度线的配置项,null 表示不展示。

细分配置项名称类型功能描述
styleShapeAttrs | ShapeAttrsCallback坐标轴子刻度线的样式。
countnumber子刻度个数
lengthnumber坐标轴子刻度线长度

关于 ShapeAttrs 详细查看 ShapeAttrs 文档。ShapeAttrsCallback 回调参数如下:

type ShapeAttrsCallback = (item: any, index: number, items: any[]) => ShapeAttrs;
nice
optional boolean default: true

是否美化。

min
optional number default: 0

坐标轴最小值。

max
optional number

坐标轴最大值。

minLimit
optional number

最小值限定。

maxLimit
optional number

最大值限定。

tickCount
optional number

期望的坐标轴刻度数量,非最终结果。

tickInterval
optional number

坐标轴刻度间隔。

tickMethod
optional string | Function default: false

指定 tick 计算方法,或自定义计算 tick 的方法,内置 tick 计算方法包括 cattime-catwilkinson-extendedr-prettytimetime-prettylogpowquantiled3-linear

animate
optional boolean default: true

动画开关,默认开启。

animateOption
optional object

动画参数配置。

interface ComponentAnimateCfg {
  /** 动画执行时间 */
  readonly duration?: number;
  /** 动画缓动函数 */
  readonly easing?: string;
  /** 动画延迟时间 */
  readonly delay?: number;
}
// 配置参考
{
  animateOption: {
    appear: ComponentAnimateCfg;
    update: ComponentAnimateCfg;
    enter: ComponentAnimateCfg;
    leave: ComponentAnimateCfg;
  }
}

legend

配置图例有两种方式 第一种,传入 boolean 设置是否显示图例。

legend: false; // 关闭图例

第二种,传入 LegendCfg 对图例进行整体配置。

legend: {
  layout: 'horizontal',
  position: 'right'
}
layout
optional horizontal | vertical

图例布局方式。提供横向布局和纵向布局。

title
optional G2LegendTitleCfg

图例标题配置,默认不展示。G2LegendTitleCfg 配置如下:

参数名类型描述
titlestring文本显示内容
spacingnumber标题同图例项的间距
styleobject文本样式配置项,参考  绘图属性
position
optional string

图例位置,可选项:'top', 'top-left', 'top-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right'。

尝试一下:

offsetX
optional number

图例 x 方向的偏移。

offsetY
optional number

图例 y 方向的偏移。

background
optional LegendBackgroundCfg

背景框配置项。LegendBackgroundCfg 配置如下:

参数名类型描述
paddingnumber | number[]背景的留白
styleShapeAttr背景样式配置项, 参考绘图属性
flipPage
optional boolean
适用于 分类图例,当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页)
optional object
适用于 分类图例,图例分页导航器的主题样式设置。LegendPageNavigatorCfg 配置如下:
参数名类型默认值描述
marker.stylePageNavigatorMarkerStyle-分页器指示箭头 样式配置
text.stylePageNavigatorTextStyle-分页器页面信息 样式配置

PageNavigatorMarkerStyle 配置如下:

参数名类型默认值描述
inactiveFillstring-Fill color of arrow marker when unclickable (inactive status).
inactiveOpacitynumber-Fill opacity of arrow marker when unclickable (inactive status).
fillstring-Default fill color of arrow marker (active status).
opacitynumber-Default fill opacity of arrow marker (active status).
sizenumber-Size of arrow marker.

PageNavigatorTextStyle 配置如下:

参数名类型默认值描述
fillstring-Font color of page navigator info.
fontSizenumber-Font size of page navigator info.

示例:

pageNavigator: {
  marker: {
    style: {
      // 非激活,不可点击态时的填充色设置
      inactiveFill: '#000',
      inactiveOpacity: 0.45,
      // 默认填充色设置
      fill: '#000',
      opacity: 0.8,
      size: 12,
    },
  },
  text: {
    style: {
      fill: '#ccc',
      fontSize: 8,
    },
  },
},
itemHeight
optional number default: null
适用于 分类图例,图例的高度, 默认为 null。
itemWidth
optional number default: null
适用于 分类图例,图例项的宽度, 默认为 null,自动计算。
itemName
optional LegendItemNameCfg
适用于 分类图例,图例项 name 文本的配置。LegendItemNameCfg 配置如下:
参数名类型默认值描述
styleobject-文本样式配置项,参考  绘图属性
spacingnumberfalse图例项 marker 同后面 name 的间距
formatterfunction-格式化函数, (text: string, item: ListItem, index: number) => any;
itemValue
optional LegendItemValueCfg
适用于 分类图例,图例项 value 附加值的配置项。LegendItemValueCfg 配置如下:
参数名类型默认值描述
styleobject-文本样式配置项,详见  绘图属性
alignRightbooleanfalse是否右对齐,默认为 false,仅当设置图例项宽度时生效
formatterfunction-格式化函数, (text: string, item: ListItem, index: number) => any;
itemSpacing
optional number
适用于 分类图例,控制图例项水平方向的间距。
label
optional ContinueLegendLabelCfg
适用于 连续图例,文本的配置项。ContinueLegendLabelCfg 配置如下:
参数名类型默认值描述
alignstring-文本同滑轨的对齐方式
- rail : 同滑轨对齐,在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效
styleobject-文本样式配置项,详见  绘图属性
spacingnumber-文本同滑轨的距离
formatter(value: any) => string文本的格式化方式
marker
optional MarkerCfg
适用于 分类图例,图例项的 marker 图标的配置。
参数名类型默认值描述
symbolMarker | MarkerCallback-配置图例 marker 的 symbol 形状
styleShapeAttrs-图例项 marker 的配置项
spacingnumber-图例项 marker 同后面 name 的间距

Marker 为支持的标记类型有: circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphenMarkerCallback(x: number, y: number, r: number) => PathCommand

maxWidth
optional number
适用于 分类图例,图例项最大宽度设置。当 layout 等于 'horizontal' 时,生效,当图例项横向排布,超过最大宽度时,会结合 flipPage: true 进行分页。
maxHeight
optional number
适用于 分类图例,图例项最大高度设置。当 layout 等于 'vertical' 时,生效,当图例项纵向排布,超过最大高度时,会结合 flipPage: true 进行分页。
reversed
optional boolean
适用于 分类图例,是否将图例项逆序展示。
custom
optional boolean

是否为自定义图例,当该属性为 true 时,需要声明 items 属性。

items
optional LegendItem[] 适用于 分类图例,用户自己配置图例项的内容。LegendItem 配置如下:
参数名类型是否必选描述
idstring唯一值,用于动画或者查找
namestringrequired名称
valueanyrequired
markerMarkerCfg图形标记
参数名类型默认值描述
symbolMarker | MarkerCallback-配置图例 marker 的 symbol 形状
styleShapeAttrs-图例项 marker 的配置项
spacingnumber-图例项 marker 同后面 name 的间距

Marker 为支持的标记类型有: circle | square | line | diamond | triangle | triangle-down | hexagon | bowtie | cross | tick | plus | hyphenMarkerCallback(x: number, y: number, r: number) => PathCommand

min
optional number
适用于 连续图例,选择范围的最小值。
max
optional number
适用于 连续图例,选择范围的最大值。
value
optional number[]
适用于 连续图例,当前选中的范围。
legendOption.selected ✨ 🆕
object optional

图例高亮状态,false 表示默认置灰,默认不设置或为 true 表示高亮,会同步进行数据的筛选展示。

示例:

legend: {
  selected: {
    '分类一': true,
    '分类二': false,
    '分类三': false,
  }
}
slidable
optional boolean default: true
适用于 连续图例,滑块是否可以滑动。
rail
optional ContinueLegendRailCfg
适用于 连续图例,图例滑轨(背景)的样式配置项。ContinueLegendRailCfg 配置如下:
参数名类型描述
typestringrail 的类型,color, size,默认:'color'
sizenumber滑轨的宽度
defaultLengthnumber滑轨的默认长度,默认:100。当限制了 maxWidth,maxHeight 时,不会使用这个属性会自动计算长度
styleobject滑轨的样式,参考 绘图属性
rail.type='color'rail.type='size
colorsize
track
optional ContinueLegendTrackCfg 适用于 连续图例,选择范围的色块样式配置项。ContinueLegendTrackCfg 配置如下:
参数名类型默认值描述
styleobject-选定范围的样式,参考 绘图属性
handler
optional ContinueLegendHandlerCfg 适用于 连续图例,滑块的配置项。(暂不支持自定义)

ContinueLegendHandlerCfg 配置如下:

参数名类型默认值描述
sizenumber-滑块的大小,默认:10
styleobject-滑块的样式设置,参考 绘图属性
animate
optional boolean default: false

是否开启动画开关。

animateOption
optional ComponentAnimateOption

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。动画配置详情如下:

ComponentAnimateOption 为组件各个动画类型配置。

interface ComponentAnimateOption {
  appear?: ComponentAnimateCfg; // 图表第一次加载时的入场动画
  enter?: ComponentAnimateCfg; // 图表绘制完成,发生更新后,产生的新图形的进场动画
  update?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,有状态变更的图形的更新动画
  leave?: ComponentAnimateCfg; // 图表绘制完成,数据发生变更后,被销毁图形的销毁动画
}

interface ComponentAnimateCfg {
  animation?: string; // 动画效果,内置的动画效果见下表,也可以通过自定义动画的方式实现自定义效果
  duration?: number; // 动画执行时间
  easing?: string; // 动画缓动函数
  delay?: number; // 动画延迟时间
}

其中 animation 传入动画函数名称,内置默认动画函数如下表,同时也可以通过 registerAnimation 自定义动画函数。

动画效果,前往图表示例查看效果

animation效果说明不适用场景
'fade-in'fade-in.gif渐现动画。
'fade-out'fade-out.gif渐隐动画。
'grow-in-x'grow-in-x.gif容器沿着 x 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。不适用于饼图、玫瑰图等 polar、theta 坐标系下的图表以及柱、条状图
'grow-in-y'grow-in-y.gif容器沿着 y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。不适用于饼图、玫瑰图等 polar、theta 坐标系下的图表以及柱、条状图
'grow-in-xy'grow-in-xy.gif容器沿着 x,y 方向放大的矩阵动画,多用于 G.Group 容器类进行动画。
'scale-in-x'scale-in-x.gif单个图形沿着 x 方向的生长动画。
'scale-in-y'scale-in-y.gif单个图形沿着 y 方向的生长动画。
'wave-in'wave-in-p.gifwave-in-r.gif划入入场动画效果,不同坐标系下效果不同。
'zoom-in'zoom-in.gif沿着图形中心点的放大动画。
'zoom-out'zoom-out.gif沿着图形中心点的缩小动画。
'path-in'path-in.gifpath 路径入场动画。
'position-update'图形位置移动动画。限用于图表标签 label 上

annotations

type
required string

标注类型, text | line | image | region | dataMarker | dataRegion | regionFilter | shape | html.

position
required object

标注位置。

  • 第一种,object 使用图表 x, y 对应的原始数据例如:{ time: '2010-01-01', value: 200 };
  • 第二种,数组来配置位置 [ x, y ],根据数组中的值的存在以下几种形式: 1、对应数据源中的原始数据; 2、关键字:'min'、'max'、'median'、'start'、'end' 分别代表数据的最大值、最小值、中间值以及坐标系区间的起始和结束; 3、x, y 都是百分比的形式,如 30%,在绘图区域定位(即坐标系内)。 1 和 2 两种类型的数据可以混用,但是使用百分比形式时 x 和 y 必须都是百分比形式。
  • 第三种,回调函数,可以动态得确定辅助元素的位置,应用于数据动态更新,辅助元素的位置根据数据变化的场景。
top
optional boolean default: false

是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层。

animate
optional boolean

是否进行动画。

offsetX
optional number

x 方向的偏移量。

offsetY
optional number

y 方向的偏移量。

start
optional Array

起始位置,一般用于 line、region 等。

end
optional Array

结束位置,一般用于 line、region 等。

{
  type: 'line',
  start: ['min', 'median'],
  end: ['max', 'median'],
},
style
optional object

图形样式属性,参考绘图属性。

src
optional string

图片路径,用于 image 中。

content
optional string

文本内容,用于 text 中。

rotate
optional number

文本的旋转角度,弧度制。

maxLength
optional number

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

文本在二维坐标系的显示位置,是沿着 x 轴显示 还是沿着 y 轴显示。

background
optional object

文字包围盒样式设置。

参数名类型默认值描述
styleobject-文本背景的样式, 参考绘图属性
paddingnumber | number[]-文本背景周围的留白
color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

设定 regionFilter 只对特定 geometry 类型起作用,如 apply: ['area'],一般用于 regionFilter。

autoAdjust
optional boolean

文本超出绘制区域时,是否自动调节文本方向。

direction
optional upward | downward

朝向。

lineLength
optional number

line 长度,用于 dataRegion。

render
optional string

自定义标记的绘制 render 函数,其他 container 为标记绘制的父容器, view 为图形实例, helpers 为辅助函数,其他 parserPosition 可以用来计算数据点对应的坐标位置,用于 shape。

container
optional string | HTMLElement

自定义 HTML 图形标记的容器元素,用于 html

html
optional string | HTMLElement

自定义的图形标记的 HTML 元素,可为 HTML DOM 字符串,或 HTML 元素,或 html 回调函数,用于 html

alignX
optional 'left' | 'middle' | 'right'

DOM 元素在 X 方向的对齐方式,用于 html

alignY
optional left' | 'middle' | 'right'

DOM 元素在 Y 方向的对齐方式,用于 html

slider

目前只适用于:折线图、面积图、双轴图。

配置项类型功能描述
startnumber默认起始位置
endnumber默认结束位置
heightnumber缩略轴高度
trendCfgTrendCfg背景趋势的配置
backgroundStyleobject背景配置,参考绘图属性
foregroundStyleobject前景配置,参考绘图属性
handlerStyleHandlerStylehandler 配置
textStyleobject文本配置,参考绘图属性
minLimitnumber允许滑动位置下限
maxLimitnumber允许滑动位置上限
formatterFunction滑块文本格式化函数

TrendCfg 类型如下:

配置项类型功能描述
datanumber[]统计文本的样式
smoothboolean是否平滑
isAreaboolean是否面积图
backgroundStyleobject背景样式配置,参考绘图属性
lineStyleobjectline 样式配置,参考绘图属性
areaStyleobjectarea 样式配置,参考绘图属性

HandlerStyle 类型如下:

配置项类型功能描述
widthnumber缩略轴手柄宽度
heightnumber缩略轴手柄高度
fillstring缩略轴手柄填充色
highLightFillstring缩略轴手柄填充高亮色(hover 状态)
strokestring缩略轴手柄描边色
opacitynumber缩略轴手柄填充透明度
radiusnumber缩略轴手柄背景圆角
cursorstring缩略轴手柄鼠标样式 (hover 状态)

图表事件

在 Plot 上通过 on 绑定事件、off 移除绑定事件。

// 绑定事件
plot.on('eventName', callback);
// 绑定事件,只触发一次
plot.once('eventName', callback);
// 移除事件
plot.off('eventName', callback);

组合方式: ${componentName}:${eventName}

// plot 添加点击事件,整个图表区域
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// element 添加点击事件, element 代表图形元素,关于图形元素,请查看:https://g2.antv.vision/zh/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// 图例添加点击事件
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// 图例名称添加点击事件
plot.on('legend-item-name:click', (...args) => {
  console.log(...args);
});

// 给 tooltip 添加点击事件
plot.on('tooltip:show', (...args) => {
  console.log(...args);
});

plot.on('tooltip:hide', (...args) => {
  console.log(...args);
});

plot.on('tooltip:change', (...args) => {
  console.log(...args);
});

// label 添加点击事件
plot.on('label:click', (...args) => {
  console.log(...args);
});

// mask 添加点击事件
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// axis-label 添加点击事件
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// 给 annotation 添加点击事件
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

图表方法

render()

渲染图表。

update()

更新图表配置项,配置覆盖,不会做差异比对。

使用示例:

plot.update({
  ...currentConfig,
  legend: false,
});

图表主题

推荐使用 💄 ThemeSet 在线自定义自己的主题配置。

内置主题

目前默认的内置主要有两套:defaultdark

{
  theme: 'default', // 'dark',
}

主题属性

除了使用内置的 defaultdark 主题之外,还可以通过设置主题属性来修改部分主题内容:

下表列出了组成主题的大配置项上的具体属性:

主题属性类型描述
defaultColorstring主题色
paddingnumbernumber[]
fontFamilystring图表字体
colors10string[]分类颜色色板,分类个数小于 10 时使用
colors20string[]分类颜色色板,分类个数大于 10 时使用
columnWidthRationumber一般柱状图宽度占比,0 - 1 范围数值
maxColumnWidthnumber柱状图最大宽度,像素值
minColumnWidthnumber柱状图最小宽度,像素值
roseWidthRationumber玫瑰图占比,0 - 1 范围数值
multiplePieWidthRationumber多层饼图/环图占比,0 - 1 范围数值
geometriesobject配置每个 Geometry 下每个 shape 的样式,包括默认样式以及各个状态下的样式
componentsobject配置坐标轴,图例,tooltip, annotation 的主题样式
labelsobject配置 Geometry 下 label 的主题样式
innerLabelsobject配置 Geometry 下展示在图形内部的 labels 的主题样式
pieLabelsobject配置饼图 labels 的主题样式

使用方式:

{
  theme: {
    colors10: ['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA']
  }
}

主题属性(主题样式表)

除了以上介绍的主题属性之外,还可以传入主题样式表来自定义主题。如果你需要对全局主题进行配置的话,对样式风格进行切换,比如更改颜色、字体大小、边框粗细等

使用方式:

{
  theme: {
    styleSheet: {
      fontFamily: 'Avenir'
    }
  }
}

支持的样式表属性:

属性类型描述
backgroundColorstring背景色
brandColorstring主题色,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10string分类颜色色板,分类个数小于 10 时使用
paletteQualitative20string分类颜色色板,分类个数大于 10 时使用
paletteSemanticRedstring语义红色
paletteSemanticGreenstring语义绿色
paletteSemanticYellowstring语义黄色
fontFamilystring字体

更新主题

使用方式:

// 示例1:
plot.update({ theme: 'dark' });

// 示例2:
plot.update({ theme: { defaultColor: '#FF6B3B' } })

自定义注册主题

另外,还可以通过 G2 提供了自定义主题机制来定义全新的主题结构,以允许用户切换、定义图表主题。前往 G2 | 自定义主题 查看详情。

🌰 自定义主题 DEMO 示例

图表交互

添加交互

// 开启「鼠标移入图表元素(柱状图的柱子、点图的点等)时触发 active」的交互
interactions: [{ type: 'element-active' }]

// 开启多个交互
interactions: [{ type: 'element-active' }, { type: 'brush' }]

配置交互

通过 cfg 可以对交互行为进行配置,详细参考 G2 | 修改交互的默认交互

// 修改 tooltip 触发事件
interactions: [
  { 
    type: 'tooltip',
    cfg: { start: [{ trigger: 'element:click', action: 'tooltip:show' }] } 
  }
]

移除交互

// 方式1: 关闭 tooltip 交互
interactions: [{ type: 'tooltip', enable: false }]

// 方式2:
plot.chart.removeInteraction('interaction-type');

使用示例:

// 移除 图例筛选 交互
plot.chart.removeInteraction('legend-filter');