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

normalizeY

Previous
jitterY
Next
pack

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 相关通道(如 y、y1 等)根据指定的 basis 进行归一化处理。归一化会将数据转换为 0 到 1 之间的比例值,使得不同尺度的数据可以在同一个坐标系中进行比较。这个转换会保持数据的相对关系不变,同时使得所有数据都按照相同的标准进行缩放。

下面这个示例展示了如何创建一个百分比堆积柱状图,展示不同年龄段的性别比例。

{
"coordinate": {
"transform": [
{
"type": "transpose"
}
]
},
"transform": [
{
"type": "stackY"
},
{
"type": "normalizeY"
}
],
"scale": {},
"axis": {
"y": {
"labelFormatter": ".0%"
}
},
"labels": [
{
"text": "people",
"position": "inside",
"style": {
"fill": "white"
}
}
]
}

使用场景

  1. 百分比堆叠图表:当需要展示各部分占整体的百分比时,常与 stackY 转换一起使用。
  2. 数据标准化:当不同组的数据量级差异较大,但您更关注其分布或比例时。
  3. 相对比较:当需要比较不同类别之间的相对大小而不是绝对值时。

配置项

属性名类型默认值说明
groupBystring | string[]'x'用于指定如何对数据进行分组的字段。每个分组将独立进行归一化计算。
basis'deviation' | 'first' | 'last' | 'max' | 'mean' | 'median' | 'min' | 'sum' | ((I, Y) => number)'max'指定归一化计算的基准值。

groupBy 说明

用于指定如何对数据进行分组的字段。每个分组将独立进行归一化计算。这里的字段名是指 encode 配置中的视觉通道名称,比如 'x'、'y'、'color' 等。例如,当设置 groupBy: 'color' 时,会按照 encode.color 对应的数据字段进行分组。

  • 类型:string | string[]
  • 默认值:'x'

basis 说明

  • 'max':使用组内最大值作为基准

  • 'min':使用组内最小值作为基准

  • 'mean':使用组内平均值作为基准

  • 'median':使用组内中位数作为基准

  • 'sum':使用组内总和作为基准

  • 'first':使用组内第一个值作为基准

  • 'last':使用组内最后一个值作为基准

  • 'deviation':使用组内标准差作为基准

  • 自定义函数:可传入函数来自定义基准值的计算方式。该函数接收两个参数:

    import { max, min } from '@antv/vendor/d3-array';
    // I: 索引数组,Y: 数据值数组
    // 使用值域的范围作为基准
    (I, Y) => max(I, (i) => Y[+i]) - min(I, (i) => Y[+i]);

示例

使用自定义 basis 计算基准值

下面的例子展示了如何使用不同的 basis 进行归一化:

{
"transform": [
{
"basis": "mean"
}
]
}

交互式对比不同 basis 效果

{
"insetRight": 20,
"scale": {
"y": {
"type": "log"
}
},
"axis": {
"y": {
"title": "↑ Change in price (%)"
}
},
"labels": [
{
"text": "Symbol",
"selector": "last",
"fontSize": 10
}
],
"tooltip": {
"items": [
{
"channel": "y",
"valueFormatter": ".1f"
}
]
}
}

自定义分组

可以通过 groupBy 选项指定如何对数据进行分组:

{
"transform": [
{
"groupBy": "color"
}
],
"axis": {
"y": {
"labelFormatter": ".0%"
}
}
}