创建美丽的南丁格尔玫瑰图用于数据可视化。完美适用于以圆形格式显示分类数据。
工具功能
- 为数据可视化创建美丽的玫瑰图。: 为数据可视化创建美丽的玫瑰图。
- 支持分类数据显示。: 支持分类数据显示。
- 可自定义颜色和外观。: 可自定义颜色和外观。
- 完美适用于统计数据展示。: 完美适用于统计数据展示。
使用方法
- 第一步: 点击'载入示例'查看演示，或按格式输入数据：标签,数值,颜色
- 第二步: 自定义图表标题和显示选项。
- 第三步: 点击'生成图表'按钮创建并查看图表，需要时可下载。
生成原理
南丁格尔玫瑰图历史和极坐标
南丁格尔玫瑰图（也称为极区图或鸡冠花图）由弗洛伦斯·南丁格尔于1858年开创，用于可视化克里米亚战争期间的死亡率数据。该图表使用极坐标，其中数据类别表示为从中心点辐射的楔形，半径与数据值成正比。与角度变化的饼图不同，玫瑰图具有相等的角度但半径不同，使值比较更直观。该工具实现极坐标（r，θ）到笛卡尔坐标（x，y）的转换，使用x = r × cos(θ)，y = r × sin(θ)、扇形区域计算和径向缩放。高级功能包括用于数据系列比较的多个同心环、用于视觉深度的渐变填充以及用于数据值的注释标签。该可视化擅长以美观的圆形格式显示周期性模式、季节性数据和周期性趋势。
数据映射和扇形生成算法
图表生成算法将圆分为等角度扇形（θ = 360° / n个类别）并将数据值映射到径向距离。数据处理包括：值归一化（缩放到最大半径）、扇形的面积计算（A = ½ r² θ以弧度为单位）以及从调色板或渐变的颜色分配。扇形渲染使用SVG路径命令或Canvas弧操作，从中心原点绘制，具有计算的角度和半径。高级功能包括：用于更好值分布的对数或平方根缩放、用于环形图样式的内半径配置、用于扇形分隔的描边边框以及数据更新之间的平滑过渡。算法处理边缘情况：零值（用于可见性的最小半径）、异常值（上限或单独缩放）以及用于自动定位的标签碰撞检测。交互功能包括悬停效果、用于数据深入的点击事件以及用于引人入胜演示的动画序列。
视觉设计和与其他图表的比较
南丁格尔玫瑰图为特定数据类型提供独特优势：周期性数据（12个月年度模式、24小时每日周期、每周模式）、分类比较（同等重要的多个类别）以及视觉冲击力（比条形图更具演示吸引力）。该工具提供自定义：配色方案（顺序、发散、分类调色板）、标签定位（扇形内部、带连接器的外部、径向方向）以及大小配置（半径、内孔）。与替代方案的比较：饼图（角度vs半径用于值编码）、雷达图（多个变量vs跨类别的单个变量）以及条形图（线性vs圆形布局）。导出选项包括：用于信息图表和印刷媒体的SVG、用于报告和仪表板的PNG/JPEG以及带工具提示的交互式HTML。最佳实践包括限制类别（6-12个最适合可读性）、使用一致的配色方案以及在商业智能和数据叙事应用中提供清晰的图例以进行数据解释。
常见问题
- 什么是南丁格尔玫瑰图，何时应该使用它？
- 南丁格尔玫瑰图（极坐标面积图）以圆形格式显示分类数据，其中每个类别是一个具有相等角度但半径与数据值成比例的扇形。用于：周期性数据（月度模式、日周期）、分类比较，以及您想要突出显示主导类别的视觉演示。对于演示来说，它比条形图更具视觉吸引力。
- 该工具接受什么数据格式？
- 以格式输入数据：标签,值,颜色（每行一个条目）。颜色是可选的 - 如果省略，则使用默认颜色。示例："Product A,350,#FF6B6B Product B,280,#4ECDC4"。标签可以是文本，值应该是数字，颜色可以是十六进制代码（#FF6B6B）或颜色名称。
- 扇区如何确定大小和颜色？
- 每个扇区具有相等的角度（360°除以类别数），但半径根据数据值而变化。半径与值成比例 - 较大的值创建更长的径向段。颜色可以按类别指定或使用默认调色板。该工具自动缩放值以适合图表，同时保持比例关系。
- 我可以自定义图表的外观吗？
- 可以，您可以自定义：图表标题、显示/隐藏标签（类别名称）、显示/隐藏百分比，以及各个类别颜色。该工具提供调整视觉演示的选项，同时保持极坐标面积图的核心结构。
- 与饼图或条形图相比有什么优势？
- 南丁格尔图表提供：等角扇区使比较更容易、径向长度清楚地表示大小、更好的视觉冲击力用于演示、非常适合周期性/定期数据，以及有效突出主导类别。与角度变化的饼图不同，玫瑰图保持一致的角度，使值比较更加直观。
相关文档
- MDN - Canvas API - HTML5 Canvas API 用于图形和可视化
- MDN - SVG 文档 - 可缩放矢量图形文档和教程
- W3C - SVG 规范 - W3C 官方 SVG 规范
- MDN - CSS Color - CSS颜色值和颜色空间
- Web.dev - 图形和视觉效果 - Web图形和动画最佳实践