logo

Ant Design Charts

  • 教程
  • 图表组件
  • 图表示例
  • 选项
  • 所有产品antv logo arrow
  • 2.6.0
  • 📈 图表分类
  • 统计图表
    • 图表概览
    • Line 折线图
    • Column 柱状图
    • Bar 条形图
    • Area 面积图
    • Pie 饼图
    • DualAxes 双轴图
    • Scatter 散点图
    • WordCloud 词云图
    • Funnel 漏斗图
    • Heatmap 热力图
    • Histogram 直方图
    • Liquid 水波图
    • BidirectionalBar 对称条形图
    • Box 箱线图
    • Bullet 子弹图
    • CirclePacking 捆绑图
    • Gauge 仪表盘
    • Radar 雷达图
    • Rose 玫瑰图
    • Sankey 桑基图
    • Stock 股票图
    • Sunburst 旭日图
    • Treemap 矩阵树图
    • Venn 韦恩图
    • Tiny 迷你图
    • Violin 小提琴图
    • Waterfall 瀑布图
    • RadialBar 玉珏图
  • 关系图组件
    • 总览
    • MindMap 思维导图
    • Fishbone 鱼骨图
    • IndentedTree 缩进树图
    • Dendrogram 生态树图
    • OrganizationChart 组织结构图
    • FlowGraph 流程图
    • FlowDirectionGraph 流向图
    • NetworkGraph 网络图
    • FAQ

Rose 玫瑰图

上一篇
Radar 雷达图
下一篇
Sankey 桑基图

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

简介

玫瑰图(Rose)又称南丁格尔玫瑰图(Nightingale Rose Chart),是条形图与饼图的变形,由弗洛伦斯・南丁格尔在克里米亚战争期间首创。其核心特征包括:

  • 环形放射结构:将圆形划分为多个扇形区域,每个扇形的半径和角度同时编码数据(传统饼图仅用角度)。
  • 双重数据维度:
    • 扇形角度:通常代表分类占比(与饼图类似)。
    • 半径长度:代表数值大小(类似条形图的高度)。
  • 花瓣式视觉隐喻:通过花瓣的 “大小” 与 “宽窄” 直观传递数据差异,适合展示周期性或分类数据。

代码演示

更多示例详见玫瑰图

基础用法

添加标签

堆叠

添加交互

风向图

配置项

通用属性参考:通用配置

概览

配置项说明类型默认值
data数据Array[]
xField横轴字段string-
yField纵轴字段string | string[]-
colorField和 seriesField 类似,不过会加上颜色通道,详见colorstring(可选)-
sizeField大小、大小映射字段number | string(可选)-
stack玫瑰图是否堆叠boolean|Stackfalse
group玫瑰图是否分组boolean|Groupfalse
radius半径number[0~1]-
innerRadius内径number[0~1]0
title用于指定图表的标题内容,详见标题object(可选)-
axis用于建立数据与视觉位置的映射关系,详见坐标轴object(可选)-
legend图表的辅助元素,使用颜色、大小、形状区分不同的数据类型,用于图表中数据的筛选,详见图例object(可选)-
label数据标签是给图表添加标注的手段之一,详见标签object(可选)-
tooltip用于动态展示数据点的详细信息,详见提示object(可选)-
style视觉样式,配置项详见绘图属性object(可选)-
theme用于控制图表的整体外观,包括颜色、字体、边距等视觉属性,详见主题string | object(可选)light
onReady图表加载回调,用于后续的事件事件绑定Function(可选)-
scale将抽象数据映射为视觉数据,详见比例尺object(可选)-
animate动画作为可视化的重要组成部分,能显著提高数据可视化的表现力,详见动画object(可选)-
interaction提供了按需探索数据的能力,详见交互object(可选)-
state实现交互反馈、高亮、选中等效果,详见状态,不同交互下图表样式object(可选)-
annotations视图好比一个画板,Rose 组件默认在其上绘制了一个玫瑰图,我们可以通过 annotations 在上面叠加更多的图层,详见标注Array(可选)-

Stack

属性描述类型默认值
groupBy指定分组通道string | string[]x
orderBy指定排序的数据TransformOrdernull
yy 通道选择的数据通道来源'y'|'y1'y
y1y1 通道选择的数据通道来源'y'|'y1'y1
reverse是否逆序booleanfalse
series是否有分组字段booleantrue

Group

属性描述类型默认值必选
groupBy数据分组的通道或通道组合string | string[]x
orderBy分组内元素的排序规则TransformOrder() => null
reverse是否逆序排列分组内的元素booleanfalse
padding分组内元素之间的间距(0 ~ 1)number0

事件

详见选项-事件。

方法

详见图表概览-图表方法。