logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.2
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • 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
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(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
      • radial
      • theta
      • transpose
      • 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)
  • 图表组件
    • 标题(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
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

normalizeY

上一篇
jitterY
下一篇
pack

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

概述

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

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

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
coordinate: { transform: [{ type: 'transpose' }] },
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/87b2ff47-2a33-4509-869c-dae4cdd81163.csv',
transform: [
{
type: 'filter',
callback: (d) => d.year === 2000,
},
],
},
transform: [{ type: 'stackY' }, { type: 'normalizeY' }],
encode: {
x: 'age',
y: 'people',
color: 'sex',
},
scale: {
color: { type: 'ordinal', range: ['#ca8861', '#675193'] },
},
axis: {
y: { labelFormatter: '.0%' },
},
labels: [
{
text: 'people',
position: 'inside',
style: { fill: 'white' },
},
],
});
chart.render();
return chart.getContainer();
})();

使用场景

  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 进行归一化:

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ category: 'A', value: 10, group: '1' },
{ category: 'B', value: 20, group: '1' },
{ category: 'C', value: 30, group: '1' },
{ category: 'A', value: 40, group: '2' },
{ category: 'B', value: 50, group: '2' },
{ category: 'C', value: 60, group: '2' },
],
encode: {
x: 'category',
y: 'value',
color: 'group',
},
transform: [
{
type: 'normalizeY',
basis: 'mean', // 使用平均值作为基准
},
],
});
chart.render();
return chart.getContainer();
})();

交互式对比不同 basis 效果

(() => {
const valueList = [
'first',
'deviation',
'last',
'max',
'mean',
'median',
'min',
'sum',
];
const valueMap = valueList.map((p) => {
return {
label: p,
value: p,
};
});
const chart = new G2.Chart();
chart.options({
type: 'line',
width: 900,
height: 600,
insetRight: 20,
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/indices.json',
},
encode: { x: (d) => new Date(d.Date), y: 'Close', color: 'Symbol' },
transform: [{ type: 'normalizeY', basis: 'first', groupBy: 'color' }],
scale: { y: { type: 'log' } },
axis: { y: { title: '↑ Change in price (%)' } },
labels: [{ text: 'Symbol', selector: 'last', fontSize: 10 }],
tooltip: { items: [{ channel: 'y', valueFormatter: '.1f' }] },
});
const handleSetValue = (value) => {
chart.transform([{ type: 'normalizeY', basis: value, groupBy: 'color' }]);
chart.render(); // 重新渲染图表
};
// 插入Value 选择器
const selectorContainer = document.createElement('div');
selectorContainer.textContent = '选择 basis ';
const selector = document.createElement('select');
selector.innerHTML = valueMap.map(
(value, index) =>
`<option value="${value.value}" ${index === 0 ? 'selected' : ''}>${
value.label
}</option>`,
);
selector.onchange = (e) => {
handleSetValue(e.target.value);
};
selectorContainer.appendChild(selector);
const node = chart.getContainer();
node.insertBefore(selectorContainer, node.childNodes[0]);
chart.render();
return node;
})();

自定义分组

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

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ category: 'A', year: '2020', value: 100 },
{ category: 'B', year: '2020', value: 200 },
{ category: 'A', year: '2021', value: 150 },
{ category: 'B', year: '2021', value: 300 },
{ category: 'A', year: '2022', value: 180 },
{ category: 'B', year: '2022', value: 360 },
],
encode: {
x: 'year',
y: 'value',
color: 'category',
},
transform: [
{
type: 'normalizeY',
groupBy: 'color', // 按照 color 通道进行归一化(对应数据字段 category)
},
],
axis: {
y: { labelFormatter: '.0%' },
},
});
chart.render();
return chart.getContainer();
})();