F2 玫瑰图（南丁格尔玫瑰图）开发指南：用极坐标半径表达数据大小

数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载导读玫瑰图Rose Chart又称南丁格尔玫瑰图Nightingale Rose Chart是移动端图表库 F2 中一种特殊的饼图变体。与普通饼图用扇形角度表示数值不同玫瑰图通过扇区半径长短来映射数据大小因而能在角度均匀分配的前提下让数值差异更大、更细的分类数据一眼可辨。本文以 site/examples/pie/rose/index.zh.md 中的基础示例为核心结合 F2 仓库源码极坐标实现、Interval 几何标记从坐标系原理、JSX 声明式配置到运行效果完整讲解如何在 F2 中实现玫瑰图。读完本文你将能独立写出可运行的基础玫瑰图并理解其背后的极坐标映射与半径表达机制。一、玫瑰图是什么从南丁格尔到半径编码玫瑰图由护理学先驱弗洛伦斯·南丁格尔Florence Nightingale于 1858 年提出最初用于直观展示克里米亚战争中士兵的伤亡原因与月份分布。它的核心思想是分类维度均匀地分布在圆周上每个分类占据一个角度相等的扇形数值维度通过扇形的半径长度表达数值越大半径越长扇区面积越大。这种设计的价值在于当分类数据之间的数值差异较大例如人口从 25.8 到 46 跨越了近一倍时半径编码相比角度编码能产生更显著的视觉面积差从而更容易突出差异、对比强弱。在 F2 的官方示例目录中玫瑰图被归入 site/examples/pie/rose与饼图pie、环形图donut并列属于扇形类图表家族。官方文档总结其适用场景为展示数值差异较大的分类数据突出显示数据间的差异程度周期性数据的可视化展示需要同时展示分类和数值的场景。二、快速上手一个可运行的基础玫瑰图2.1 完整示例代码以下是仓库中 rose.jsx 的完整代码展示了玫瑰图的最小可运行配置/** jsx jsx */ import { jsx, Canvas, Chart, Interval, Legend } from antv/f2; const data [ { year: 2001, population: 41.8 }, { year: 2002, population: 25.8 }, { year: 2003, population: 31.7 }, { year: 2004, population: 46 }, { year: 2005, population: 28 }, ]; const context document.getElementById(container).getContext(2d); const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} coord{{ type: polar, }} scale{{ population: { min: 0, }, }} Interval xyear ypopulation coloryear / Legend positionright / /Chart /Canvas ); const chart new Canvas(props); chart.render();2.2 代码结构拆解这段代码由四层组成遵循 F2 一贯的声明式 JSX 语法层级组件作用画布Canvas绑定 canvas 2D 上下文设置pixelRatio适配高清屏图表Chart承载数据、坐标系与度量配置几何标记Interval声明数据字段映射x、y、color辅助组件Legend展示分类图例置于图表右侧其中最关键的是Chart的coord配置coord{{ type: polar }}是把普通柱状图变为玫瑰图的开关。在 F2 中同一个Interval几何标记配合直角坐标系默认rect渲染为柱状图配合极坐标系polar渲染为玫瑰图。2.3 字段映射的含义Interval xyear ypopulation coloryear /的映射逻辑如下xyear分类字段决定每个扇形在圆周上的位置角度维度ypopulation数值字段决定扇形的半径长度数值维度coloryear分类字段同时作为颜色分组每个年份一个颜色。三、原理深挖极坐标如何把柱子变成扇形要真正理解玫瑰图需要深入 F2 的坐标系层。玫瑰图的变形发生在 packages/f2/src/coord/polar.ts 的Polar类中它是直角坐标系基类 packages/f2/src/coord/base.ts 的子类。3.1 极坐标的值域语义直角坐标系rect.ts中x与y两个值域分别对应画布的水平与垂直方向。而极坐标系重新定义了值域语义见 polar.ts// 极坐标下 x 表示弧度y 代表半径 const x: Range [startAngle, endAngle]; const y: Range [innerRadiusRatio * radius, radius];也就是说在极坐标中x 轴不再是横坐标而是角度弧度范围从startAngle到endAngley 轴不再是纵坐标而是半径范围从内半径到外半径。这就解释了为什么同一份xyear、ypopulation的映射在极坐标下会渲染成沿圆周分布、半径各异的扇形——数据字段并没有变变的是坐标系的解释方式。3.2 关键默认参数从 polar.ts 可以看到极坐标的默认行为参数默认值含义radius半径比例1外半径 radiusRatio * min(width, height) / 2默认取画布宽高较小者的一半保证扇形完整落在画布内innerRadius内半径比例0为0时是实心玫瑰图大于0时呈现环形效果startAngle-Math.PI / 2起始角度即从 12 点钟方向开始绘制endAngle(Math.PI * 3) / 2终止角度与起始角度相差整圆2π需要说明的是coord{{ type: polar }}只是最简写法这些参数都可以进一步显式配置例如coord{{ type: polar, innerRadius: 0.5, startAngle: 0, endAngle: Math.PI }}可以做出从 3 点钟方向开始的半圆环形玫瑰。3.3 坐标转换的数学本质极坐标把归一化坐标点转换为画布坐标的核心逻辑在convertPointpolar.tsconst angle xStart (xEnd - xStart) * point[xDim]; const radius yStart (yEnd - yStart) * point[yDim]; return { x: center.x Math.cos(angle) * radius, y: center.y Math.sin(angle) * radius, };point[xDim]0~1 的归一化分类比例被线性映射为圆周上的弧度point[yDim]0~1 的归一化数值比例被线性映射为半径长度再通过三角函数展开为画布上的笛卡尔坐标点。而isCyclic()方法polar.ts判断角度跨度是否达到2π用于识别循环坐标系这是极坐标区别于直角坐标的又一特征。四、Interval 几何标记从柱状图语义到玫瑰图尺寸玫瑰图复用的是 F2 的Interval几何标记柱状图几何而不是独立的图表类型。这一点在 withInterval.tsx 的getDefaultSize方法中有直接证据const defaultWithRatio { column: 1 / 2, // 直方图、柱图 rose: 0.999999, // 玫瑰图 multiplePie: 3 / 4, // 多饼图 }; let ratio; if (coord.isPolar) { if (coord.transposed count 1) { ratio defaultWithRatio.multiplePie; } else { ratio defaultWithRatio.rose; } } else { ratio defaultWithRatio.column; }这段代码的含义判断依据是coord.isPolar当坐标系是极坐标时Interval自动按玫瑰图rose逻辑计算尺寸否则按柱状图column逻辑玫瑰图占比0.999999几乎等于1即每个分类的扇形在圆周上首尾相接、不留间隙从而形成连续完整的玫瑰花瓣效果多饼图占比3/4当极坐标配合transposed转置且分类数大于 1 时自动切换为多饼图布局。也就是说同样的几何标记会根据坐标系自适应尺寸策略这是 F2语法式图表设计的典型体现。五、渲染细节扇形如何被绘制与动画玫瑰图的扇形由极坐标视图 view/polar.tsx 负责渲染。它把经过坐标映射后的矩形关键点xMin、xMax、yMin、yMax翻译成sector扇形图形sector key{key} attrs{{ cx: center.x, cy: center.y, fill: color, lineWidth: 1, startAngle: ${xMin}rad, endAngle: ${xMax}rad, r0: yMin, r: yMax, ...shape, }} /可以看到Interval在直角坐标系下产出的柱形关键点在极坐标下被直接解读为扇形的起始角、终止角、内半径与外半径从而渲染为扇形。该视图还内置了入场动画整体以sector类型的裁剪动画从startAngle扫到endAngle展开polar.tsx数据更新时则对startAngle、endAngle、r0、r等属性做平滑过渡。六、数据与度量为什么population要设min: 0示例中scale配置对玫瑰图有特殊意义scale{{ population: { min: 0, }, }}必须从 0 开始玫瑰图用半径表达数值如果度量不从 0 开始最短的半径将不是 0导致所有扇区都缩水为环状破坏半径与数值的线性对应关系保持比例真实设min: 0后半径与数值严格线性相关数值差异才能被忠实呈现。因此min: 0是玫瑰图几乎必备的度量约束与柱状图非零基线的要求一脉相承。示例数据中population的最小值 25.8 远大于 0若不设min: 0则最小扇区会退化为一个窄环玫瑰图半径对比的视觉优势将大打折扣。七、在 F2 工程中运行示例本文示例来自 F2 的示例站点源码site/examples/pie/rose/demo/rose.jsx运行时需要页面中存在canvas idcontainer元素代码通过document.getElementById(container).getContext(2d)获取绘图上下文设置pixelRatio{window.devicePixelRatio}在高分屏如 Retina 屏上保证图表清晰从antv/f2导入jsx, Canvas, Chart, Interval, Legend五个成员使用new Canvas(props)创建画布实例并调用chart.render()完成渲染。官方文档还指出玫瑰图常与以下能力组合使用形成更丰富的应用环形玫瑰图通过coord的innerRadius配置留出中心空洞图例交互Legend支持点击筛选点击某个年份可隐藏对应扇形动态数据玫瑰图支持数据更新动画扇形半径随新数据平滑伸缩与其他图表混排在Canvas内可同时放置多个Chart实现仪表盘式组合视图。八、延伸从玫瑰图到整个极坐标图表家族理解了coord.type决定几何标记渲染形态这一核心机制后可以轻松延伸出更多极坐标图表配置组合渲染结果coord{{ type: polar }}Interval玫瑰图本文主题coord{{ type: polar, innerRadius: 0.5 }}Interval环形玫瑰图 / 南丁格尔环形图coord{{ type: polar, transposed: true }}Interval多饼图multiplePie 尺寸策略自动生效coord{{ type: polar }}Line雷达图coord{{ type: polar }}Area面积雷达图这一设计正是 F2图形语法Grammar of Graphics思想的体现坐标系Coord、几何标记Geometry、度量Scale、颜色Color四个维度自由组合即可从柱状图变形出玫瑰图、雷达图等一系列图表无需引入额外组件类型。仓库中 packages/f2/src/coord/index.ts 同时导出Rect与Polar两种坐标系配合 components/interval 的多种视图intervalView、polar、polygonView共同构成这套灵活的渲染体系。结语玫瑰图是 F2 中用坐标系换图表类型思想的经典案例一份Interval声明在rect坐标系下是柱状图在polar坐标系下就是南丁格尔玫瑰图。本文从官方示例出发结合 polar.ts 的极坐标值域语义、withInterval.tsx 的玫瑰尺寸策略以及 view/polar.tsx 的扇形渲染细节完整还原了玫瑰图的实现链路。实际开发时只需记住两个要点coord设为polar数值度量设min: 0即可快速交付一张语义清晰、适合移动端展示的玫瑰图。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Plotly.py 旧版极坐标图Legacy Polar Charts从 go.Scatter(r, t) 到 Area 风向玫瑰图的迁移指南Plotly.py 旧版极坐标图Legacy Polar Charts从 go.Scatter r, t 到 Area 风向玫瑰图的迁移指南 极坐标图P数据可视化数据分析Plotly.py 风玫瑰图Wind Rose Chart完整指南用 px.bar_polar 与 go.Barpolar 绘制极坐标风速风向分布Plotly.py 风玫瑰图Wind Rose Chart完整指南用 px.bar_polar 与 go.Barpolar 绘制极坐标风速风向分布 导读数据可视化数据分析上一篇GoogleTest 1.8.1 自定义注入点Customization Points完全指南从宏覆盖到跨平台移植下一篇大型数据库对比性能优化指南DBeaver高效比较方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考