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

spaceFlex

Previous
repeatMatrix
Next
spaceLayer

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

使用类似 css flex 的布局方式来划分空间区域,常用于多图表对比的视图。

开始使用

提供一个两层 flex 容器布局的画布。

spaceFlex
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
width: 900,
});
const flex = chart
.spaceFlex()
.data({
value: 'https://assets.antv.antgroup.com/g2/seattle-weather.json',
})
.attr('direction', 'col')
.attr('ratio', [1, 2]);
flex
.interval()
.attr('paddingBottom', 0)
.attr('paddingRight', 300)
.axis('x', false)
.encode('x', (d) => new Date(d.date).getUTCDate())
.encode('y', 'temp_max')
.encode('color', 'steelblue');
flex
.spaceFlex()
.attr('ratio', [2, 1])
.call((node) =>
node
.cell()
.attr('paddingRight', 0)
.attr('paddingBottom', 50)
.encode('x', (d) => new Date(d.date).getUTCDate())
.encode('y', (d) => new Date(d.date).getUTCMonth())
.encode('color', 'temp_max')
.style('inset', 0.5)
.axis('x', { title: 'Date' })
.axis('y', { title: 'Month' })
.legend({ color: false })
.scale('color', {
palette: 'gnBu',
}),
)
.call((node) =>
node
.interval()
.attr('paddingBottom', 50)
.coordinate({ transform: [{ type: 'transpose' }] });
.axis('x', false)
.encode('x', (d) => new Date(d.date).getUTCMonth())
.encode('y', 'temp_max')
.encode('color', 'steelblue'),
);
chart.render();

更多的案例,可以查看图表示例页面。

选项

当前 flex 主要提供了最核心的两个配置,便于空间分片。

属性描述类型默认值
ratio设置 flex 容器中的子元素占用空间的比例number[]均分
direction设置 flex 划分空间的方向col | rowrow
dataflex 容器的数据Data

spaceFlex 对应的配置都可以使用 API 进行设置,例如:

{
"attr": {
"direction": "col",
"ratio": [
1,
2,
3
]
}
}

FAQ

  • 怎么使用 spaceFlex 定义复杂的图表布局?

spaceFlex 提供了按照比例横向纵向划分空间,对于复杂的布局,理论上都可以通过不断拆分容器层级结构实现。