logo

G2

  • 文档
  • 图表介绍
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • sunburst
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
      • pow
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • theta
      • transpose
      • radial
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表 API
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
      • a11y
    • 按需打包
    • 设置纹理
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

dodgeX

上一篇
diffY
下一篇
flexX

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

dodgeX 是一种分组布局转换,它通过生成并应用 series 通道值,使图表元素能够按系列进行分组展示。dodgeX 转换主要通过以下步骤工作:

  1. 按分组条件(默认为 x 通道)将数据进行分组
  2. 使用 color 通道的值生成 series 通道的值
  3. 按顺序和间距调整同一分组内不同系列的坐标位置,形成并列结构

使用场景

dodgeX 转换主要用于将同组数据按系列在坐标系上错开排列的场景,以突显各系列之间的数据差异和分布特征。

例如下面的案例展示了美国各州不同年龄段人口的分布情况,通过 dodgeX 转换让不同年龄段的数据在同一州内并排展示,便于直观比较。

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'interval',
autoFit: true,
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/f129b517-158d-41a9-83a3-3294d639b39e.csv',
format: 'csv',
},
axis: { y: { labelFormatter: '~s' } },
encode: { x: 'state', y: 'population', color: 'age' },
transform: [
{ type: 'sortX', by: 'y', reverse: true, slice: 6 },
{ type: 'dodgeX' },
],
});
chart.render();

配置项

属性描述类型默认值必选
groupBy数据分组的通道或通道组合string | string[]x
orderBy分组内元素的排序规则TransformOrder() => null
reverse是否逆序排列分组内的元素booleanfalse
padding分组内元素之间的间距(0 ~ 1)number0

groupBy

groupBy 用于指定数据分组的通道或通道组合,默认按 x 通道分组,也可以指定为其他通道或多个通道的组合。

orderBy

orderBy 用于指定分组内元素的排序规则,支持多种排序策略:

type Primitive = number | string | boolean | Date;
type TransformOrder =
| 'value'
| 'sum'
| 'series'
| 'maxIndex'
| string[]
| null
| ((data: Record<string, Primitive>) => Primitive);

reverse

reverse 用于控制是否逆序排列分组内的元素。当设置为 true 时,分组内的元素会以与默认相反的顺序排列。

padding

padding 用于控制分组内元素之间的间距,取值范围为 0 到 1。值越大,元素之间的间距越大;当值为 0 时,元素之间没有间距。

示例

以下示例展示了 dodgeX 转换各配置项的功能:

  • groupBy: 按 x 通道(季度)分组显示各部门数据
  • orderBy: 设置为 value,按业绩值排序组内元素
  • reverse: 设置为 true,使组内元素按业绩值从高到低排列
  • padding: 设置组内元素间距为 0.1

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
const data = [
{ 季度: 'Q1', 部门: '销售部', 业绩: 90, 年份: '2024' },
{ 季度: 'Q1', 部门: '市场部', 业绩: 80, 年份: '2024' },
{ 季度: 'Q1', 部门: '研发部', 业绩: 70, 年份: '2024' },
{ 季度: 'Q2', 部门: '销售部', 业绩: 90, 年份: '2024' },
{ 季度: 'Q2', 部门: '市场部', 业绩: 70, 年份: '2024' },
{ 季度: 'Q2', 部门: '研发部', 业绩: 80, 年份: '2024' },
{ 季度: 'Q3', 部门: '销售部', 业绩: 70, 年份: '2024' },
{ 季度: 'Q3', 部门: '市场部', 业绩: 80, 年份: '2024' },
{ 季度: 'Q3', 部门: '研发部', 业绩: 90, 年份: '2024' },
{ 季度: 'Q4', 部门: '销售部', 业绩: 80, 年份: '2024' },
{ 季度: 'Q4', 部门: '市场部', 业绩: 70, 年份: '2024' },
{ 季度: 'Q4', 部门: '研发部', 业绩: 90, 年份: '2024' },
];
chart.options({
type: 'interval',
autoFit: true,
data,
encode: {
x: '季度',
y: '业绩',
color: '部门',
},
transform: [
{
type: 'dodgeX',
groupBy: 'x',
orderBy: 'value',
reverse: true,
padding: 0.1,
},
],
});
chart.render();