Bar

2 min read

Plot Container

width

optional number default: 400

Set the width of the chart.

height

optional number default: 400

Set the height of the chart.

autoFit

optional boolean default: true

Whether the chart automatically adjusts to fit the container. If it is set to true, width and height configuration would fail.

padding

optional number[] | number | 'auto'

Set padding value of the canvas. You can also use auto.

appendPadding

optional number[] | number

Extra appendPadding value.

renderer

optional string default: canvas

Set the render way to canvas or svg.

pixelRatio

optional number default: window.devicePixelRatio

Set the pixel ratio of the chart.

limitInPlot

optional boolean

Whether clip the Geometry beyond the coordinate system。

supportCSSTransform

optional boolean

支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。

useDeferredLabel

optional boolean|number

开启后 label 渲染会在浏览器空闲时机执行。可制定具体 number 数值,来限定 timeout 时间 (建议开启时,指定 timeout 时间)

locale

optional string

Specify the locale. There are two built-in locales: 'zh-CN' and 'en-US'. Or you can use G2Plot.registerLocale to register a new locale. Go src/locales/en_US.ts to see the format.

Data Mapping

data

required array object

Configure the data source. The data source is a collection of objects. For example:[{ time: '1991',value: 20 }, { time: '1992',value: 20 }]

xField

required string

The name of the data field corresponding to the graph in the x direction, usually the field corresponding to the horizontal coordinate axis. For example, to see how many people are in different classes, the class field is the corresponding xField.

yField

required string

The name of the data field corresponding to the graph in the y direction, usually the field corresponding to the vertical coordinate axis. For example, to see the number of students in different classes, the number field is the corresponding yField.

seriesField

optional string

Grouping field. It is the same meaning as groupField、colorField in Grouped Bar, and the same as stackField、colorField in Stacked Bar.

groupField

optional string

Grouping field for Stacked Bar and Grouped Bar. Its priority is higher than seriesField. When isGroup is true, the data will be grouped by groupField.

isGroup

optional boolean

Whether the plot is Grouped Bar.

isStack

optional boolean

Whether the plot is Stacked Bar.

isRange

optional boolean

Whether the plot is Range Bar.

isPercent

optional boolean

Whether the plot is Percent Bar. When isPercent is true, isStack must be true.

meta

optional object

Configure the meta of each data field of the chart in global, to define the type and presentation of data. Configuration of the meta will affect the text content of all components.

PropertiesTypeDescription
aliasstringalias of the data field
formatterfunctioncallback function to format all values of the data field
valuesstring[]enumerate all the values of the data field
rangenumber[]mapping range of the data field, default: [0,1]

See also the Meta Options to learn more about configuration of meta.

Graphic Style

coordinate

optional Transformation[]

Transformations of coordinate;

Types of Transformation are as follows:

type Transformation =
  | {
      type: 'reflectX'; // send (x, y) to (-x, y)
    }
  | {
      type: 'reflectY'; // send (x, y) to (x, -y)
    }
  | {
      type: 'transpose'; // send (x, y) to (y, x)
    };

color

optional string | string[] | Function

Configure the color. If there is no colorField configured, set one single color. Otherwise you can set a series of colors, or you can use callback function.

Default: The color board of the theme.

// set one single color
{
  color: '#a8ddb5'
}
// set a series of colors
{
  colorField: 'type', // or seriesField in some cases
  color: ['#d62728', '#2ca02c', '#000000'],
}
// Function
{
  colorField: 'type', // or seriesField in some cases
  color: ({ type }) => {
    if(type === 'male'){
      return 'red';
    }
    return 'yellow';
  }
}

pattern ✨

optional object | Function

Set the pattern style of the geometries.

  • PatternOption: consists of type and cfg, type includes: dot, line, square, cfg is optional.
  • Features: pattern will override the style of geometry (such as pieStyle, columnStyle, etc.).
  • Usage: You can set a uniform pattern style for all geometries of the chart by using configuration (PatternOption) or CanvasPattern object, and a callback is provided to set the pattern for each geometry. In addition, we provide getCanvasPattern function, pass in the PatternOption to create the pattern to modify the Legend stylesDemo

The type of pattern is defined as follows:

PatternAttr =
  | CanvasPattern
  | PatternOption
  | ((datum: Datum, color: string /** inherit color */) => PatternOption | CanvasPattern);

Usage:

// set a uniform pattern style for all geometries
{
   pattern: {
    type: 'dot',
    cfg: {
      size: 4,
      padding: 4,
      rotation: 0,
      fill: '#FFF',
      isStagger: true,
    },
  },
}
// set the pattern for each geometry
{
  pattern: ({type}, color) =>{
    if(type ==='分类一') {
      return { 
        type: 'dot',
        cfg: {
          backgroundColor: color, // inherit color
        }
      }
    } else if(type ==='分类二') {
      return {
         type: 'square',
         cfg: {
           backgroundColor: 'pink', // custom color
         }
       }
    } else if(type ==='分类三') {
      return { 
        type: 'line' 
      }
    }
  },
}

Common configuration(cfg) for all types of pattern:

AttributeTypeDescription
backgroundColorstringBackground color of the pattern
fillstringFill color of the symbol in pattern
fillOpacitynumberTransparency of the symbol in pattern
strokestringStroke color of the symbol in pattern
strokeOpacitynumberStroke opacity of the symbol in pattern
lineWidthnumberThe thickness of the symbol's stroke
opacitynumberOverall transparency of the pattern
rotationnumberRotation angle of the pattern

Additional configuration for dotPattern

AttributeTypeDescription
sizenumberThe size of the dot, default: 6
paddingnumberThe distance between dots, default: 2
isStaggerbooleanStaggered dots. default: true

Additional configuration for linePattern

AttributeTypeDescription
spacingnumberThe distance between the two lines, default: 5

Additional configuration for squarePattern

AttributeTypeDescription
sizenumberThe size of the square, default: 6
paddingnumberThe distance between squares, default:1
isStaggerbooleanStaggered squares. default:true

intervalPadding

optional, number

Specify the padding of interval, pixel value. Used in GroupColumn plot.

dodgePadding

optional, number

Specify the padding of interval on the same group, pixel value. Used in GroupColumn plot.

minBarWidth

optional, number

Specify the min width of bar, pixel value. Auto adapt by default.

maxBarWidth

optional, number

Specify the max width of bar, pixel value. Auto adapt by default.

barStyle

optional StyleAttr | Function

Bar graphic Style.

PropertiesTypeDescription
fillstringFill color of the shape
rnumberused in point, means the radius of geometry
fillOpacitynumberFill opacity of the shape
strokestringStroke color of the shape
lineWidthnumberThe width of the stroke of the shape
lineDash[number,number]Configure dashed line stroke. The first parameter is the length of each segment, and the second parameter is the gap between segment. When lineDash is set to [0,0], there is no effect.
lineOpacitynumberOpacity of the stroke
opacitynumberOpacity of the shape
shadowColorstringShadow color of the shape
strokeOpacitynumberStroke opacity of the shape
shadowBlurnumberGaussian blur coefficient of the shadow
shadowOffsetXnumberConfigure horizontal distance between shadow and shape
shadowOffsetYnumberConfigure vertical distance between shadow and shape
cursorstringMouse style, same as the mouse style of CSS, default value : 'default'

Example:

{
  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'
  }
}

More documents about ShapeStyle, see Graphic Style.

barBackground.style

optional StyleAttr

Background style of bar graphic. Attention: It doesn't work when type="line" in Radial-bar plot.

Example:

{
  barBackground: {
    style: {
      fill: '#000',
      fillOpacity: 0.25,
    }
  }
}

barWidthRatio

optional number

The ratio of bar width( Range:[0-1] ).

marginRatio

optional number

The ratio of spacing between columns in groups( Range:[0-1] ), only for Grouped Bar.

shape

可选 string

内置 shape 类型有:hollow-rect, tick; 此外,还可以搭配 registerShape 进行自定义使用.

Demo

state

optional object

Set the style of the corresponding state. Now you can config four state styles: 'default' | 'active' | 'inactive' | 'selected'.

Example:

{
  interactions: [{ type: 'element-active' }],
  state: {
    // 设置 active 激活状态的样式
    active: {
      animate: { duration: 100, easing: 'easeLinear' },
      style: {
        lineWidth: 2,
        stroke: '#000',
      },
    },
  }
};

Plot Components

axis

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

双 y 轴中 yAxis 配置示例:
yAxis: {
  '2016年耕地总面积': {
    nice: true,
  },
  '2016年转基因种植面积': {
    nice: true,
    min: 0,
    max: 100,
},
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是否自动旋转,默认为: true
rotationnumber关闭 autoRotate 后,可以设置自动旋转的角度,如: -Math.PI / 2 (条形图 y 轴标题)

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 与当前图形的相对位置 (💡 注意:只对 geometry 为 interval 的柱条形图生效)
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

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

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

{
  label: {
    style: {
      fill: 'red',
      opacity: 0.6,
      fontSize: 24
    }
  }
}
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;
  type?: string;
}

如果你需要强制最后一个 tick 展示,可以尝试这么设置

{
  scale: {
    [xField 对应的值]: {
      showLast: true,
    }
  },
  xAxis: {
    // 设置默认不自动隐藏,或
    // autoHide: false,
    autoHide: {
      type: 'equidistantceWithReverseBoth'
    }
  }
}
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'
        }
      }
    }
  }
}

示例(设置 x 轴的 line 坐标轴线条样式):

{
  xAxis: {
    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 配置如下:

参数名类型描述
textstring文本显示内容
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
适用于 分类图例,当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页)
maxRow
number optional
适用于 分类图例,当图例项过多分页时,可以设置最大行数(仅适用于 layout: 'horizontal'),默认为:1。
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 配置如下:
参数名类型默认值描述
style((item: ListItem, index: number, items: ListItem[]) => ShapeAttrs) | ShapeAttrs-
spacingnumber-
formatter(text: string, item: ListItem, index: number) => any;

其中, ShapeAttrs 详细配置见:文档ListItem 配置如下:

type ListItem = {
  /**
   * 名称 {string}
   */
  name: string;
  /**
   * 值 {any}
   */
  value: any;
  /**
   * 图形标记 {object|string}
   */
  marker?: Marker | string;
}

type Marker = {
  symbol? string;
  style?: ShapeAttrs;
  spacing?: number;
};
itemValue
optional LegendItemValueCfg
适用于 分类图例,图例项 value 附加值的配置项。LegendItemValueCfg 配置如下:
参数名类型默认值描述
alignRightbooleanfalse是否右对齐,默认为 false,仅当设置图例项宽度时生效
formatterfunction-格式化函数, (text: string, item: ListItem, index: number) => any;
style((item: ListItem, index: number, items: ListItem[]) => ShapeAttrs) | ShapeAttrs-

其中, ShapeAttrs 详细配置见:文档ListItem 配置如下:

type ListItem = {
  /**
   * 名称 {string}
   */
  name: string;
  /**
   * 值 {any}
   */
  value: any;
  /**
   * 图形标记 {object|string}
   */
  marker?: Marker | string;
}

type Marker = {
  symbol? string;
  style?: ShapeAttrs;
  spacing?: number;
};
itemSpacing
optional number
适用于 分类图例,控制图例项水平方向的间距。
itemMarginBottom
optional number
适用于 分类图例,控制图例项垂直方向的间距。
label
optional ContinueLegendLabelCfg
适用于 连续图例,文本的配置项。ContinueLegendLabelCfg 配置如下:
参数名类型默认值描述
alignstring-文本同滑轨的对齐方式
- rail : 同滑轨对齐,在滑轨的两端
- top, bottom: 图例水平布局时有效
- left, right: 图例垂直布局时有效
styleobject-文本样式配置项,详见  绘图属性
spacingnumber-文本同滑轨的距离
formatter(value: any) => string文本的格式化方式
marker
optional MarkerCfg | MarkerCfgCallback
适用于 分类图例,图例项的 marker 图标的配置。
参数名类型默认值描述
symbolstring | MarkerSymbolCallback -配置图例 marker 的 symbol 形状
styleShapeAttrs | ((style: ShapeAttrs) => ShapeAttrs)-图例项 marker 的配置项
spacingnumber-图例项 marker 同后面 name 的间距

MarkerSymbolCallback 类型定义如下:

除了内置一些 symbol 类型,可以指定具体的标记类型,也可以通过回调的方式返回 symbol 绘制的 path 命令

内置支持的标记类型有:"circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"

回调的方式为:(x: number, y: number, r: number) => PathCommand

自定义图例 marker DEMO

type LegendItem = { name: string; value: string; } & MarkerCfg;

type MarkerCfgCallback = (name: string, index: number, item: LegendItem) => MarkerCfg;
radio ✨
optional RadioCfg
适用于 分类图例,图例项的末尾展示一个 radio 的按钮 🔘,点击可以实现“图例正选”筛选(聚焦)。
type RadioCfg = { style: ShapeAttr };
maxItemWidth
number optional
适用于 分类图例,图例项最大宽度设置。
maxWidthRatio
number optional. 取值范围:[0, 1], 默认: 0.25
适用于 分类图例,图例项容器最大宽度比例(以 view 的 bbox 容器大小为参照)设置,如果不需要该配置,可以设置为 null
maxHeightRatio
number optional. 取值范围:[0, 1], 默认: 0.25
适用于 分类图例,图例项容器最大高度比例(以 view 的 bbox 容器大小为参照)设置,如果不需要该配置,可以设置为 null
maxWidth
optional number
适用于 分类图例,图例项容器最大宽度设置。当 layout 等于 'horizontal' 时,生效,当图例项横向排布,超过最大宽度时,会结合 flipPage: true 进行分页。实际上,图例项容器最大宽度的计算如下:
const viewBBox = this.view.viewBBox;
const maxWidth = Math.min(maxWidth, maxWidthRatio * viewBBox.width);
maxHeight
optional number
适用于 分类图例,图例项容器最大高度设置。当 layout 等于 'vertical' 时,生效,当图例项纵向排布,超过最大高度时,会结合 flipPage: true 进行分页。实际上,图例项容器最大宽度的计算如下:
const viewBBox = this.view.viewBBox;
const maxHeight = Math.min(maxHeight, maxHeightRatio * viewBBox.height);
reversed
optional boolean
适用于 分类图例,是否将图例项逆序展示。
custom
optional boolean

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

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

MarkerSymbolCallback 类型定义如下:

除了内置一些 symbol 类型,可以指定具体的标记类型,也可以通过回调的方式返回 symbol 绘制的 path 命令

内置支持的标记类型有:"circle" | "square" | "line" | "diamond" | "triangle" | "triangle-down" | "hexagon" | "bowtie" | "cross" | "tick" | "plus" | "hyphen"

回调的方式为:(x: number, y: number, r: number) => PathCommand

自定义图例 marker DEMO

min
optional number
适用于 连续图例,选择范围的最小值。
max
optional number
适用于 连续图例,选择范围的最大值。
value
optional number[]
适用于 连续图例,当前选中的范围。
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-滑块的样式设置,参考 绘图属性

label

小提琴图暂时不支持 label 展示,可以使用 annnotation 进行替代

属性名类型介绍
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 与当前图形的相对位置 (💡 注意:只对 geometry 为 interval 的柱条形图生效)
animateboolean | AnimateOption动画配置。
formatterFunction格式化函数
autoHideboolean是否自动隐藏,默认 false

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

type LabelLineCfg = {
  style?: ShapeAttrs;
}

示例代码:

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

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 时生效。

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

TooltipCrosshairsText 类型定义如下:

/** 辅助线文本配置 */
type TooltipCrosshairsText = {
  /**
   * 文本位置,只支持 start, end
   * @type {string}
   */
  position?: string;
  /**
   * 文本内容
   */
  content?: string;
  /**
   * 距离线的距离
   * @type {number}
   */
  offset?: number;
  /**
    * 是否自动旋转
    * @type {boolean}
    */
  autoRotate?: boolean;
  /**
    * 文本的配置项
    * @type {ShapeAttrs}
    */
  style?: TextStyle;
}

其中,TextStyle 类型定义详见: 通用文本样式

TooltipCrosshairsTextCallback 类型定义如下:

/**
 * 辅助线文本回调函数
 * @param type 对应当前 crosshairs 的类型,值为 'x' 或者 'y'
 * @param defaultContent 对应当前 crosshairs 默认的文本内容
 * @param items 对应当前 tooltip 内容框中的数据
 * @param currentPoint 对应当前坐标点
 * @returns 返回当前 crosshairs 对应的辅助线文本配置
 */
type TooltipCrosshairsTextCallback = (type: string, defaultContent: any, items: any[], currentPoint: Point) => TooltipCrosshairsText;

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>`;
    };
  }
}

annotations

详细配置见:各 Annotation 配置项说明。

Annotations are array types and can be set multiple times.

annotations: [
  {
    type: 'text',
    position: ['median', 'median'],
    content: '辅助文本',
    style: {
      fill: 'red',
    },
  },
];

💠 Text Annotation

type
optional string

需要指定 type: 'text', 标识为:辅助文本,在指定位置添加文本说明。

position
required [string, string] | Datum | ((xScale, yScales) => [string, string])

文本标注位置。

Example

x
optional number

文本标注位置 x,需要搭配 y 属性配置。不建议使用,建议使用 position

y
optional number

文本标注位置 y,需要搭配 x 属性配置。不建议使用,建议使用 position

content
optional string

Text annotations 的文本标注内容。

rotate
optional number

文本的旋转角度,弧度制。顺时针旋转。

offsetX
optional number

文本在 x 轴方向的偏移量。

offsetY
optional number

文本在 y 轴方向的偏移量。

style
optional object

文本标注样式,参考绘图属性

background
optional object

文字包围盒样式设置。

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

文文本的最大长度。

autoEllipsis
optional boolean

超出 maxLength 是否自动省略。

ellipsisPosition
optional head | middle | tail

文本截断的位置。

isVertical
optional boolean

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

💠 Line Annotation

type
optional string

需要指定 type: 'line', 标识为:辅助线(可带文本),例如表示平均值或者预期分布的直线。

start
optional AnnotationPosition

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

AnnotationPosition 类型定义如下:

type AnnotationPositionCallback = (
  xScales: Scale[] | Record<string, Scale>,
  yScales: Scale[] | Record<string, Scale>
) => [number | string, number | string];

// types of annotation
type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

除了指定原始数据之外,还可以使用预设定数据点,如:

  • 'min': 最小值,minimum value.
  • 'max': 最大值,maximum value.
  • 'mean': 平均值,average value.
  • 'median': 中位值,median value.
  • 'start': 即 0.
  • 'end': 即 1.

Example

end
optional AnnotationPosition

结束位置,一般用于 line、region 等。具体配置属性参考: start

style
optional object

辅助线样式属性,参考绘图属性

text
optional LineAnnotationTextCfg

辅助线上的文本设置。

LineAnnotationTextCfg 类型定义如下:

type LineAnnotationTextCfg = {
  /** 文本内容*/
  content?: string;
  /** 自动旋转,沿着线的方向,默认 true */
  autoRotate?: boolean;
  /** 文本的偏移 x */
  offsetX?: number;
  /** 文本的偏移 y */
  offsetY?: number;
  /** 字体样式,参考绘图属性 */
  style?: object;
};

Example

top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

💠 Arc Annotation

type
optional string

需要指定 type: 'arc', 标识为:辅助弧线,只在极坐标系下生效。常用于绘制仪表盘。

start
optional AnnotationPosition

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

AnnotationPosition 类型定义如下:

type AnnotationPositionCallback = (
  xScales: Scale[] | Record<string, Scale>,
  yScales: Scale[] | Record<string, Scale>
) => [number | string, number | string];

// types of annotation
type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

除了指定原始数据之外,还可以使用预设定数据点,如:

  • 'min': 最小值,minimum value.
  • 'max': 最大值,maximum value.
  • 'mean': 平均值,average value.
  • 'median': 中位值,median value.
  • 'start': 即 0.
  • 'end': 即 1.

Example

end
optional AnnotationPosition

结束位置,一般用于 line、region 等。具体配置属性参考: start

style
optional object

辅助线样式属性,参考绘图属性

💠 Image Annotation

type
optional string

需要指定 type: 'image', 标识为:辅助图片,在图表上添加辅助图片。

src
optional string

图片路径,用于 image 中。

position
optional [string, string] | Datum | ((xScale, yScales) => [string, string])

图片标注位置。

Example

start
optional AnnotationPosition

起始位置,需搭配 end 使用,也可以直接只使用 position。具体配置属性参考 Line Annotation start 配置。

除了指定原始数据之外,还可以使用预设定数据点,如:

  • 'min': 最小值,minimum value.
  • 'max': 最大值,maximum value.
  • 'mean': 平均值,average value.
  • 'median': 中位值,median value.
  • 'start': 即 0.
  • 'end': 即 1.

Example

end
optional AnnotationPosition

结束位置,需搭配 start 使用,也可以直接只使用 position。具体配置属性参考: start

style
optional object

图片标注样式,可以设置图片标注的宽度和高度,如下:

annnotations: [{
  type: 'image',
  src: 'xxx',
  style: {
    width: 50,
    height: 50,
  }
}]
top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

💠 Region Annotation

type
optional string

需要指定 type: 'region', 标识为:辅助框,框选一段图区,设置背景、边框等。

start
optional AnnotationPosition

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

AnnotationPosition 类型定义如下:

type AnnotationPositionCallback = (
  xScales: Scale[] | Record<string, Scale>,
  yScales: Scale[] | Record<string, Scale>
) => [number | string, number | string];

// types of annotation
type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

除了指定原始数据之外,还可以使用预设定数据点,如:

  • 'min': 最小值,minimum value.
  • 'max': 最大值,maximum value.
  • 'mean': 平均值,average value.
  • 'median': 中位值,median value.
  • 'start': 即 0.
  • 'end': 即 1.

Example

end
optional AnnotationPosition

结束位置,一般用于 line、region 等。具体配置属性参考: start

style
optional object

辅助线样式属性,参考绘图属性

top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

💠 DataMarker Annotation

type
optional string

需要指定 type: 'dataMarker', 标识为:特殊数据点标注,多用于折线图和面积图。

position
required [string, string] | Datum | ((xScale, yScales) => [string, string])

DataMarker 标注位置,参考 Text Annotation 标注的 position 设置。

Example

point
optional null | DataMarkerPointCfg

point 设置。当设置为:null 时,不展示 point 点标识。

DataMarkerPointCfg 类型定义如下:

// 当前只支持对 point 的样式进行设置。
type DataMarkerPointCfg = {
  style?: ShapeAttrs;
}
line
optional null | DataMarkerLineCfg

line 设置。当设置为:null 时,不展示 line 标识。

DataMarkerLineCfg 类型定义如下:

// 当前只支持对 line 的样式以及长度进行设置。
type DataMarkerPointCfg = {
  style?: ShapeAttrs;
  length?: number;
}
text
optional null | AnnotationTextCfg

DataMareker 辅助标记上的文本设置。当设置为:null 时,不展示文本标识。

AnnotationTextCfg 类型定义如下:

// 当前只支持对 line 的样式以及长度进行设置。
type AnnotationTextCfg = {
  /** 文本内容*/
  content?: string;
  /** 自动旋转,沿着线的方向,默认 true */
  autoRotate?: boolean;
  /** 文本的偏移 x */
  offsetX?: number;
  /** 文本的偏移 y */
  offsetY?: number;
  /** 字体样式,参考绘图属性 */
  style?: object;
};
autoAdjust
optional boolean

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

direction
optional upward | downward

朝向。

`markdown:docs/common/annotations/base-annotation.zh.md`

💠 DataRegion Annotation

type
optional string

需要指定 type: 'dataRegion', 标识为:特殊数据区间标注,多用于折线图和面积图。

position
required [string, string] | Datum | ((xScale, yScales) => [string, string])

DataMarker 标注位置,参考 Text Annotation 标注的 position 设置。

Example

lineLength
number optional default: 0

line 长度。

region
null | { style?: ShapeAttrs } optional default: 0

标注区间的配置。点击 ShapeAttrs 查看详细样式配置。

text
null | EnhancedTextCfg optional default: 0

文本的配置。

top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

💠 Region Annotation

type
optional string

需要指定 type: 'regionFilter', 标识为:区域着色,将图表中位于矩形选区中的图形元素提取出来,重新着色。

start
optional AnnotationPosition

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

AnnotationPosition 类型定义如下:

type AnnotationPositionCallback = (
  xScales: Scale[] | Record<string, Scale>,
  yScales: Scale[] | Record<string, Scale>
) => [number | string, number | string];

// types of annotation
type AnnotationPosition =
  | [number | string, number | string]
  | Record<string, number | string>
  | AnnotationPositionCallback;

除了指定原始数据之外,还可以使用预设定数据点,如:

  • 'min': 最小值,minimum value.
  • 'max': 最大值,maximum value.
  • 'mean': 平均值,average value.
  • 'median': 中位值,median value.
  • 'start': 即 0.
  • 'end': 即 1.

Example

end
optional AnnotationPosition

结束位置,一般用于 line、region 等。具体配置属性参考: start

style
optional object

辅助线样式属性,参考绘图属性

color
optional string

染色色值,一般用于 regionFilter。

apply
optional string[]

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

top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

💠 Html Annotation

type
optional string

需要指定 type: 'html',。自定义任意 HTML 类型的图形标记,通过 option 中的 html 配置来在图表中使用 HTML DOM 元素来添加图形标记。option 配置如下:

container
string | HTMLElement optional

可选,自定义 HTML 图形标记的容器元素

html
string | HTMLElement | ((container: HTMLElement, view: View) => void | string | HTMLElement)

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

alignX
'left' | 'middle' | 'right' optional default: 'left'

DOM 元素在 X 方向的对齐方式

alignY
'top' | 'middle' | 'bottom' optional default: 'top'

DOM 元素在 Y 方向的对齐方式

offsetX
number optional

X 方向的偏移

offsetY
number optional

Y 方向的偏移

💠 Shape Annotation

type
optional string

需要指定 type: 'shape',。自定义任意类型的图形标记,通过 option 中的 render 回调函数来在图表区域绘制自定义标记。option 配置如下:

render
( container: IGroup, view: View, helpers: { parsePosition: (position: [string | number, string | number] | Datum) => Point } ) => void

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

top
optional boolean

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

offsetX
optional number

x 轴方向的偏移量。

offsetY
optional number

y 轴方向的偏移量。

animate
optional boolean

是否进行动画。

animateOption
optional object

动画参数配置,当且仅当 animate 属性为 true,即动画开启时生效。,参考动画参数配置

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 状态)

Scrollbar

ShapeAttrs 类型的请参考绘图属性

配置项类型功能描述
type'horizontal' | 'vertical'滚动条类型
widthnumber宽度,在 vertical 下生效
heightnumber高度,在 horizontal 下生效
paddingnumber | number[]padding
categorySizenumber对应水平滚动条,为 x 轴每个分类字段的宽度;对于垂直滚动条,为 x 轴每个分类字段的高度
styleScrollbarStyle滚动条默认样式的设置
animateboolean滚动的时候是否开启动画,默认跟随 view 中 animate 配置

ScrollbarStyle 类型如下:

配置项类型功能描述
trackColorstring滚动条滑道填充色
thumbColorstring滚动条滑块填充色
thumbHighlightColorstring滚动条滑块高亮样式,对应主题的 hover.style.thumbColor
lineCapstring决定滚动条末端绘制形状,同 Canvas lineCap 属性。

Conversion Tag

Applicable to base bar charts and base bar charts, the Conversion Rate component allows the user to focus on the rate of change in the data.

optional object | false
PropertiesTypeDefaultDescription
sizenumber-Conversion rate Component dimensions
spacingnumber-Component and column spacing
offsetnumber-Component and axis spacing
arrowArrowCfg | false-Arrow shape configuration, false does not display arrows
textTextCfg | falseNo-Text configuration, false does not display text

ArrowCfg configuration is as follows:

PropertiesTypeDefaultDescription
headSizenumber-Size of the arrow
styleobject-Arrow style

TextCfg configuration is as follows:

PropertiesTypeDefaultDescription
headSizenumber-Size of the arrow
styleobject-Arrow style
formatter(prev:number, next:number) => string-Custom conversion rate calculation

Please refer to the style configuration ShapeAttrs

Connected Area

Applicable to stacked bar charts and stacked bar charts, the link area component provides visual assistant identification by drawing the link area of the same field, which is convenient for data comparison. (Attention:could not use with columnBackground )

optional object | false
PropertiesTypeRequiredDefault | Description
trigger'hover'、'click'No |'hover'Trigger method
styleConnectedAreaStyleCfgNo |

Types of ConnectedAreaStyleCfg are as follows:

type ConnectedAreaStyleCfg = ShapeAttrs | ((oldStyle: ShapeAttrs, element: Element) => ShapeAttrs);

Examples:

Plot Event

On Plot, binding events are removed by ON and OFF method.

// Bind event
plot.on('eventName', callback);
// Bind event, only trigger one time
plot.once('eventName', callback);
// Remove event
plot.off('eventName', callback);

Composition: ${componentName}:${eventName}

Element refers to the type of element to bind to, for example elementlegend-itemaxis-labelmaskplotlegend-item-namereset-button etc.

Events correspond to DOM common events, for example clickmousedownmouseupdblclickmouseentermouseoutmouseovermousemovemouseleavecontextmenu etc. And support mobile events: touchstarttouchmovetouchend

// Plot adds click events to the entire chart area
plot.on('plot:click', (...args) => {
  console.log(...args);
});

// Element to add a click event, element represents the graphic elements, graphical elements, please see: https://g2.antv.vision/en/docs/manual/concepts/element
plot.on('element:click', (...args) => {
  console.log(...args);
});

// Legend adds click events
plot.on('legend-item:click', (...args) => {
  console.log(...args);
});

// Legend name adds click event
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 adds click events
plot.on('label:click', (...args) => {
  console.log(...args);
});

// Mask adds click events
plot.on('mask:click', (...args) => {
  console.log(...args);
});

// Axis-label adds click events
plot.on('axis-label:click', (...args) => {
  console.log(...args);
});

// Add click events to the annotation
plot.on('annotation:click', (...args) => {
  console.log(...args);
});

Plot Method

render()

Render the chart.

update()

optional

Update chart configuration and overwrite it without comparing difference.

Example:

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

Plot Theme

Recommend to use 💄 ThemeSet to customize your theme configurations online.

Built-in Theme

Built-in defaults: 'default' and 'dark'

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

Theme attributes

In addition to using the built-in 'default' and 'dark' themes, you can also modify some of the theme content by setting the theme properties.

The following table lists the specific properties on the configuration items that make up the topic:

PropertiesTypeDescription
defaultColorstringTheme color
paddingnumbernumber[]
fontFamilystringChart font
colors10string[]Category color palette, used when the number of categories is less than 10
colors20string[]Category color palette, used when the number of categories is greater than 10
columnWidthRationumberGeneral histogram width ratio, 0-1 range of values
maxColumnWidthnumberMaximum width of histogram, pixel value
minColumnWidthnumberMinimum width of histogram, pixel value
roseWidthRationumberRose width ratio, 0-1 range of value
multiplePieWidthRationumberMultilayer pie and loop ratio, 0-1 range values
geometriesobjectConfigure the style of each shape for each Geometry, including the default style and the style for each state
componentsobjectConfigure theme samples for axes, legends, tooltips, and annotations
labelsobjectConfigure the theme style of the label under Geometry
innerLabelsobjectConfigure Geometry to display the Labels theme style inside the graph
pieLabelsobjectConfigure the theme style of pie chart labels

usage:

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

Theme attributes (StyleSheet)

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

usage:

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

支持的样式表属性:

PropertiesTypeDescription
backgroundColorstringBackground color
brandColorstringBrand color,默认取 10 色分类颜色色板的第一个颜色
paletteQualitative10stringQualitative palette,分类个数小于 10 时使用
paletteQualitative20stringQualitative palette,分类个数大于 10 时使用
paletteSemanticRedstringSemantic red
paletteSemanticGreenstringSemantic green
paletteSemanticYellowstringSemantic yellow
fontFamilystringfontFamily

Update theme

usage:

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

// example 2:
plot.update({ theme: { defaultColor: '#FF6B3B' } });

Custom theme

In addition, G2 provides a custom topic mechanism to define a new topic structure, allowing users to switch and define chart topics. Go G2 | Custom theme for more details.

🌰 Customize theme DEMO

Plot Interactions

Built-in interactions of scatter are as follows:

InteractionDescriptionConfiguration
brush用于刷选交互,配置该交互后,可进行刷选。brush: { enabled: true }

brush

optional BrushCfg

Configuration of brush interaction.

Properties

Types of BrushCfg are as follows:

PropertiesTypeDescription
enabledboolean是否开启 brush 刷选交互,默认为:'false'
typestringbrush 类型,可选项:'rect' | 'x-rect' | 'y-rect' | 'cirlce' | 'path' (polygon). 默认: 'rect'
actionstringbrush action, options: 'filter' | 'highlight'. Default: 'filter'
maskMaskCfgConfiguration of mask.
buttonButtonCfgConfiguration of rRset Button,works when action is equal to 'filter'

Types of MaskCfg are as follows:

PropertiesTypeDescription
styleShapeAttrsmask 样式

Types of ButtonCfg are as follows:

export type ButtonCfg = {
  /**
   * padding of button
   */
  padding?: number | number[];
  /**
   * text of button
   */
  text?: string;
  /**
   * custom style of text
   */
  textStyle?: {
    default?: ShapeAttrs;
  };
  /**
   * custom style of button
   */
  buttonStyle?: {
    default?: ShapeAttrs;
    active?: ShapeAttrs;
  };
};

Events

  1. List of vents of brush-filter interaction,
Event NameDescription
G2.BRUSH_FILTER_EVENTS.BEFORE_FILTERHook before brush event to trigger filter append
G2.BRUSH_FILTER_EVENTS.AFTER_FILTERHook after brush event to trigger filter append
G2.BRUSH_FILTER_EVENTS.BEFORE_RESETHook before brush event to trigger filter reset append
G2.BRUSH_FILTER_EVENTS.AFTER_RESETHook after brush event to trigger filter reset append

example:

  1. List of vents of brush-highlight interaction,
Event NameDescription
G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.BEFORE_HIGHLIGHTHook before event to trigger element-range highlight append
G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.AFTER_HIGHLIGHTHook after event to trigger element-range highlight append
G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.BEFORE_CLEARHook before event to trigger element-range-highlight reset append
G2.ELEMENT_RANGE_HIGHLIGHT_EVENTS.AFTER_CLEARHook after event to trigger element-range-highlight reset append

example:

Add interactions

Usage:

// Enable the Active interaction when the mouse moves over a chart element (bar in a bar, dot in a dot, etc.)
interactions: [{ type: 'element-active' }];

// Enable multiple interactions
interactions: [{ type: 'element-active' }, { type: 'brush' }];

Config interactions

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

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

Remove the interaction

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

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

Example:

// Removes legend filtering interaction
plot.chart.removeInteraction('legend-filter');