logo

G2

  • Docs
  • Chart Introduction
  • API
  • Examples
  • Theme
  • Ecosystem
  • Productsantv logo arrow
  • 5.3.3
  • Get Started
  • Introduction
    • What is G2
    • Use In Framework
    • Experimental Spec API
  • Core Concepts
    • Chart
      • Components of G2 Charts
      • How to Use Charts
    • Mark
      • overview
      • 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
      • overview
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • Encode
    • Scale
      • overview
      • band
      • linear
      • log
      • ordinal
      • point
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • Transform
      • overview
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectX
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • Coordinate
      • overview
      • fisheye
      • parallel
      • polar
      • radial
      • theta
      • transpose
      • cartesian3D
      • helix
    • Style
    • Animate
      • overview
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • State
    • Interaction
      • Overview
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • Composition
      • overview
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • Theme
      • overview
      • Academy
      • classic
      • classicDark
    • event
    • Color
  • Chart API
  • Chart Component
    • 标题(Title)
    • Axis
    • Legend
    • Scrollbar
    • Slider
    • Tooltip
    • Label
  • Extra Topics
    • Graph
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • Geo
      • geoPath
      • geoView
    • 3D
      • Draw 3D Chart
      • point3D
      • line3D
      • interval3D
      • surface3D
    • Plugin
      • renderer
      • rough
      • lottie
      • a11y
    • Package on demand
    • Set pattern
    • Server-side rendering(SSR)
    • Spec Function Expression Support (Available in 5.3.0)
  • Whats New
    • New Version Features
    • Migration from v4 to v5
  • Frequently Asked Questions (FAQ)

groupColor

Previous
group
Next
groupX

Resources

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-互动图形解决方案
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

对离散的 color 通道进行分组,并且对通道根据指定的 Reducer 进行聚合。等效于 channels = ['color'] 的 group。

groupColor 是 group 函数组的一个变种,专门用于对离散的 color 通道进行分组,并且对通道根据指定的 Reducer 进行聚合。等效于 channels = ['color'] 的 group,具体的使用方式和配置项与 group 函数相同。下面,只是针对 groupColor 函数的使用场景和配置项进行说明。

配置项

属性描述类型默认值
[channel]输出到具体 mark 的 channel 数据的聚合方式Reducer

有关 Reducer 的详细说明,请参考 group 函数的配置项。

示例

下面例子中,我们获取 penguins.json 数据集中的 species 和 sex 字段,并且对 species 字段进行分组,对 sex 字段进行计数聚合。最后将 species 字段映射到 color 通道上。注意,在对应的 mark 中有 transform 方法可以使用数据的变换。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
height: 120,
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/penguins.json',
},
encode: { color: 'sex' },
transform: [
{ type: 'groupColor', y: 'count' },
{ type: 'stackY' },
{ type: 'normalizeY' },
],
coordinate: { transform: [{ type: 'transpose' }] },
axis: { y: { labelFormatter: '.0%' } },
labels: [{ text: 'sex', position: 'inside' }],
});
chart.render();
return chart.getContainer();
})();

说明:

  1. groupColor 函数的 y 属性指定了对 sex 字段进行计数聚合;
  2. stackY 函数将 y 通道进行堆叠;
  3. normalizeY 函数将 y 通道进行归一化处理;
  4. transpose 函数将坐标系进行转置;
  5. 最后通过 labels 函数在图表中添加标签。