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

symmetryY

Previous
stackY
Next
overview

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

概述

按照指定通道分组,给每组的 y 和 y1 通道添加偏移,实现对称效果。

使用场景

symmetry y(Y轴对称)通常用于强调或突出数据的对称性、对比或镜像关系。以下是常见的应用场景,结合图表类型和实际案例来说明: `

场景图表类型说明示例
对比两组数据柱状图、条形图两组数据分别显示在Y轴两侧,直观展示对比差异(如A/B测试结果)。男性 vs 女性收入分布
镜像关系分析折线图、面积图数据围绕Y轴对称分布,展示正负关联(如收益与亏损、进出口平衡)。公司月度盈利与亏损对比
对称分布验证箱线图、小提琴图检查数据是否对称分布(如正态分布检验)。身高/体重的对称性分析
双向偏差展示误差条形图同时显示正向和负向偏差(如预测值与实际值的差异)。天气预报误差范围

用途总结

  1. 对比分析:快速识别两组数据的差异或相似性。
  2. 对称验证:检验数据是否符合对称分布(如正态性)。
  3. 双向表达:同时展示正向和负向趋势(如盈亏、误差)。
  4. 自然规律可视化:揭示自然界或科学中的对称现象(如物理、生物)。

配置项

属性描述类型默认值
groupBy指定分组通道,可以是单个通道名称、也可以是多个通道(字符串数组)string | string[]x

groupBy

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

理论上,groupBy 可以设置为所有的通道值,具体可以参考 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}`;

示例

以下是简单的示例代码,用请注意 .transform({ type: 'symmetryY' }) 转换以及对比对应的输出:

{
"transform": [
{
"type": "stackY"
},
{
"type": "symmetryY"
}
]
}

以上的代码就能得到渲染对应的图:

symmetryY

同时,怎么绘制一个对称的条形图?同样的,使用这个 transform 即可,如下:

{
"transform": [
{
"type": "stackY"
},
{
"type": "symmetryY"
}
],
"scale": {
"x": {
"padding": 0.5
}
},
"coordinate": {
"transform": [
{
"type": "transpose"
}
]
},
"legend": false
}

请注意最后 .transform({ type: 'symmetryY' }) 的转换函数。

漏斗图

symmetryY 还有个比较重要的一个应用场景是漏斗图(对比漏斗图、转化漏斗图)、金字塔图,用于展现数据的转化以及结果的呈现。例如,比较典型的漏斗图展现如下:

symmetryY

对应的示例代码为:

{
"autoFit": true,
"transform": [
{
"type": "symmetryY"
}
],
"scale": {
"x": {
"padding": 0
}
},
"coordinate": {
"transform": [
{
"type": "transpose"
}
]
},
"animate": {
"enter": {
"type": "fadeIn"
}
},
"axis": false,
"labels": [
{
"position": "inside",
"transform": [
{
"type": "contrastReverse"
}
]
}
]
}

具体更多的案例,可以参考以上提供的图表示例页面链接。