logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3-beta.0
  • 概览
  • Chart
  • Mark
  • View
  • GeoView
  • SpaceLayer
  • FacetRect
  • SpaceFlex
  • FacetCircle
  • RepeatMatrix
  • TimingKeyframe

FacetRect

上一篇
SpaceLayer
下一篇
SpaceFlex

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

开始使用

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
width: 928,
height: 270,
paddingBottom: 50,
});
const facetRect = chart
.facetRect()
.attr('paddingBottom', 50)
.data({
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/anscombe.json',
})
.encode('x', 'series');
facetRect
.point()
.attr('inset', 10)
.encode('x', 'x')
.encode('y', 'y')
.style('stroke', '#000');
chart.render();

创建可视化

facetRect.interval

添加 interval 图形,具体见 mark。

facetRect.rect

添加 rect 图形,具体见 mark。

facetRect.point

添加 point 图形,具体见 mark。

facetRect.area

添加 area 图形,具体见 mark。

facetRect.line

添加 line 图形,具体见 mark。

facetRect.vector

添加 vector 图形,具体见 mark。

facetRect.link

添加 link 图形,具体见 mark。

facetRect.polygon

添加 polygon 图形,具体见 mark。

facetRect.image

添加 image 图形,具体见 mark。

facetRect.text

添加 text 图形,具体见 mark。

facetRect.lineX

添加 lineX 图形,具体见 mark。

facetRect.lineY

添加 lineY 图形,具体见 mark。

facetRect.range

添加 range 图形,具体见 mark。

facetRect.rangeX

添加 rangeX 图形,具体见 mark。

facetRect.rangeY

添加 rangeY 图形,具体见 mark。

facetRect.connector

添加 connector 图形。

facetRect.sankey

添加 sankey 图形,具体见 graph。

facetRect.treemap

添加 treemap 图形,具体见 graph。

facetRect.boxplot

添加 boxplot 图形,具体见 mark。

facetRect.shape

添加自定义图形,具体见 mark。

facetRect.pack

添加 pack 图形,具体见 graph。

facetRect.forceGraph

添加 forceGraph 图形,具体见 graph。

facetRect.tree

添加 tree 图形,具体见 graph。

facetRect.wordCloud

添加 wordCloud 图形,具体见 mark。

facetRect.gauge

添加 gauge 图形,具体见 mark。

设置属性

facetRect.attr

获取或设置图表的配置项。

facetRect.data

设置图形的数据,支持多种数据来源和数据变换,具体见 data。

facetRect.scale

设置图形每个通道的比例尺,具体见 scale。

facetRect.legend

设置图形的图例,具体见 legend。

facetRect.axis

设置图形的坐标轴,具体见 axis。

facetRect.style

设置图形的样式,具体见 style。

facetRect.theme

设置图形的主题,具体见 theme。