logo

Ant Design Charts

  • Manual
  • Options
  • Examples
  • Productsantv logo arrow
  • 2.0.0
  • Component Overview
  • Common Configuration Statistical Charts
    • Chart composition
    • Component
      • 标题(Title)
      • Axis
      • Legend
      • Scrollbar
      • Slider
      • Tooltip
      • Label
    • Core
      • Color En
      • View
      • Data
        • overview
        • custom
        • ema
        • fetch
        • filter
        • fold
        • inline
        • join
        • kde
        • log
        • map
        • pick
        • rename
        • slice
        • sort
        • sortBy
      • 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
      • 样式(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
    • Specal Plot
      • Area
      • Bar
      • CirclePacking
      • DualAxes
      • Gauge
      • Line
      • Rose
      • Sankey
      • Scatter
      • Sunburst
      • Treemap
      • Venn
      • WordCloud
      • Column
      • Pie
      • BidirectionalBar
      • Box
      • Bullet
      • Funnel
      • Heatmap
      • Histogram
      • Liquid
      • Radar
      • Stock
      • Tiny
      • Violin
      • Waterfall
      • RadialBar
  • Relation Graph Components
    • Overview
    • MindMap
    • Fishbone
    • IndentedTree
    • Dendrogram
    • OrganizationChart
    • FlowGraph
    • FlowDirectionGraph
    • NetworkGraph
    • FAQ

stackEnter

Previous
sortY
Next
stackY

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...

概述

stackEnter 是堆叠(stack)图形元素的一种动画效果,主要用于堆叠图表的入场动画。其核心功能是通过动态过渡的方式,让堆叠的图形(如柱状图、面积图等)以更直观、美观的形式呈现数据的分层和累积关系。

通过 stackEnter,AntV 让堆叠图表的初始渲染更具表现力,增强数据呈现的清晰度和用户体验。

使用场景

堆叠动画

  • stackEnter 会按堆叠顺序(从底部到顶部)依次渲染每一层数据,形成逐层叠加的动画效果。
  • 例如:在堆叠柱状图中,每个类别的柱子会从基线开始,先绘制最底部的数据层,再依次向上叠加其他层,最终形成完整的堆叠柱。

视觉引导

  • 通过动画突出堆叠的“累积过程”,帮助用户理解每层数据对总和的贡献。
  • 适合展示部分与整体的关系(如不同类别在各维度的占比)。

平滑过渡

  • 动画通常伴随缓动效果(easing),使过渡更自然,避免生硬的数据变化。

具体案例

  • 堆叠柱状图/条形图:每根柱子分段向上增长。
  • 堆叠面积图:面积区域从基线逐层展开。
  • 其他堆叠图表:如玫瑰图、雷达图的堆叠形态。

配置项

属性描述类型默认值
groupBy选择一个分组通道string | string[]x
reducer分组取值方式(I: number[], V: any[]) => any(I, V) => V[I[0]]
orderBy排序的通道stringnull
reverse是否逆序booleantrue
duration动画时长(单位千分之一秒)number3000

groupBy

在 stackEnter 执行的时候,需要将数据进行分组,在每个分组中执行 stackEnter 的计算逻辑,比如对于面积图,需要把同一个 x 值下的 y 数据变成一个组,然后在组内做最大最小值的处理逻辑,所以 stackEnter 设置为 x 通道。

理论上,stackEnter 可以设置为所有的通道值,具体可以参考 encode 文档。所有的枚举值如下:

export type ChannelTypes =
| 'x'
| 'y'
| 'z'
| 'x1'
| 'y1'
| 'series'
| 'color'
| 'opacity'
| 'shape'
| 'size'
| 'key'
| 'groupKey'
| 'position'
| 'series'
| 'enterType'
| 'enterEasing'
| 'enterDuration'
| 'enterDelay'
| 'updateType'
| 'updateEasing'
| 'updateDuration'
| 'updateDelay'
| 'exitType'
| 'exitEasing'
| 'exitDuration'
| 'exitDelay'
| `position${number}`;

reducer

reducer 是一个函数,用于在分组后对数据进行处理。它接收两个参数:

  • I:数据索引数组,表示分组后每组数据在原始数据集中的索引位置
  • V:原始数据值数组,包含所有数据项

默认情况下,reducer 返回每个分组的第一个元素值:(I, V) => V[I[0]],但你可以自定义这个函数来实现特定的数据处理逻辑, 例如求和、取平均值等,让图表有更清晰的组织方式。以下是简单的例子供参考:

{
"transform": [
{
"groupBy": "x"
}
]
}

示例

以下是简单的示例代码,用于展现 stackEnter 的使用方式以及展现效果。

最后,呈现的如下的效果图(动态效果):

stackEnter