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

flexX

Previous
dodgeX
Next
group

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

概述

flexX 是一个用于调整柱形图宽度的转换方法。它允许根据数据值动态调整柱形的宽度,使得柱形的宽度能够反映另一个数据维度,从而在可视化中展示更多的信息维度。这种转换特别适用于:

  1. 需要同时展示两个定量变量的场景,如国家 GDP(宽度)和人均 GDP(高度)的关系
  2. 展示市场份额和细分结构的商业分析图表
  3. 人口统计数据的多维度可视化,如人口总数(宽度)和年龄分布(高度)
  4. 销售数据分析,如销售总额(宽度)和利润率(高度)的关系

通过 flexX 转换,我们可以在传统柱状图的基础上增加一个额外的数据维度,使图表更加信息丰富。

{
"paddingLeft": 60
}

使用场景

  1. 不等宽柱形图:当需要柱子的宽度反映数据的某个维度时,例如国家 GDP 总量决定柱子宽度,而柱高展示人均 GDP。

  2. 马利梅柯图(Marimekko Chart):结合 stackY 和 normalizeY 转换,可以创建复杂的商业分析图表,展示市场份额和细分数据。
    使用国家 GDP 总量作为柱形宽度,人均 GDP 作为柱形高度:

{
"paddingBottom": 100
}

配置项

属性描述类型默认值必选
field指定生成权重数组的字段string | (d: any) => Primitive[]-否
channel指定生成权重数组的通道stringy否
reducer聚合每一组权重的函数Reducersum否

类型定义

type Primitive = number | string | boolean | Date;
type Reducer = 'sum' | ((I: number[], V: Primitive[]) => Primitive);

参数说明

  • field: 用于指定柱形宽度的数据字段。当设置了 field 时,其优先级高于 channel。
  • channel: 指定用于计算柱形宽度的编码通道,默认使用 'y' 通道的值。
  • reducer: 聚合函数,用于计算最终的宽度值。默认使用 'sum' 求和。

示例

1. 马利梅柯图(Marimekko Chart)

结合 stackY 和 normalizeY 转换创建市场分析图:

{
"paddingLeft": 0,
"paddingRight": 0
}

在这个例子中,flexX 转换使得每个市场部分的宽度与其总价值成正比,结合堆叠和归一化处理,可以清晰地展示市场份额的分布情况。

这个例子展示了如何使用 flexX 来可视化人口数据,其中柱子的宽度表示州/省的总人口数量,高度表示人口密度,颜色区分不同地区。

2. 时间序列数据分析

展示每月销售数据,使用交易量作为宽度,价格变化率作为高度:

{
"paddingLeft": 60,
"scale": {
"y": {
"nice": true
}
},
"style": {
"radius": 4
},
"axis": {
"y": {
"title": "价格变化率",
"labelFormatter": ".0%"
}
}
}

这个时间序列示例展示了如何使用 flexX 来可视化交易数据,其中柱形的宽度表示交易量大小,高度表示价格变化率,颜色区分涨跌情况。通过这种方式,我们可以同时观察到交易活跃度和价格走势的关系。