logo

F2

  • 教程
  • 组件API
  • 图表示例
  • 所有产品antv logo arrow
  • 5.0.3
  • 快速上手
  • 图表组成
  • 图形语法
  • 数据 - Data
  • 度量 - Scale
  • 坐标系 - Coordinate
  • 图形标签 - Shape
  • 绘图属性 - Style
  • 动画属性 - Animation
  • 事件属性 - Event
  • 图形使用 - JSX
  • 组件介绍 - Component
  • 多端/框架 - Framework
    • 多端适配
    • 如何在 React 中使用
    • 如何在 Vue 中使用
    • 如何在小程序中使用
    • 如何在 Node.js 中使用
    • 配置 jsx transform
    • 使用 svg 渲染
  • 进阶 - Advanced
    • 自定义 View
  • 常见问题 - Question
    • 和 React 同时使用时,TS 类型报错

坐标系 - Coordinate

上一篇
度量 - Scale
下一篇
图形标签 - Shape

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

坐标系是将两种位置标度结合在一起组成的 2 维定位系统,描述了数据是如何映射到图形所在的平面。

F2 提供了直角坐标系和极坐标两种类型,目前所有的坐标系均是 2 维的。

如何设置坐标系

F2 默认提供的坐标系类型为笛卡尔坐标系,当需要切换坐标系时,可以通过调用下面的语法声明需要使用的坐标系:

<Canvas>
<Chart
coord={{
type: coordType,
}}
></Chart>
</Canvas>
坐标系类型说明
rect直角坐标系,目前仅支持二维,由 x, y 两个互相垂直的坐标轴构成。
polar极坐标系,由角度和半径 2 个维度构成。

坐标系类型及配置

坐标系可以分为笛卡尔坐标系和非笛卡尔坐标系,非笛卡尔坐标系即极坐标,由角度和半径这两个维度来确定位置。

利用极坐标可生成饼图、玫瑰图和雷达图等,较适用于周期性数据的可视化场景,比如时间和方向数据。

坐标系类型的变换会改变几何标记的形状,比如在极坐标系中,矩形将变为圆环的一部分。

例如下图展示的柱状图、层叠柱状图,在不同坐标系下就能变换出各种类型:

直角坐标系极坐标(未转置)极坐标(转置)
层叠柱状图
柱状图

直角坐标系

<Canvas>
<Chart
coord={{
// 声明直角坐标系
type: 'rect',
// 坐标系进行转置
transposed: true,
}}
></Chart>
</Canvas>

极坐标

<Canvas>
<Chart
coord={{
// 声明极坐标
type: 'polar',
// 坐标系进行转置
startAngle: { Number }, // 起始弧度
endAngle: { Number }, // 结束弧度
innerRadius: { Number }, // 用于空心部分的半径设置
radius: { Number }, // 实心圆的半径大小设置
transposed: true, // 极坐标转置
}}
></Chart>
</Canvas>

这里需要说明的是,F2 极坐标默认的起始角度和结束角度如下图所示: