关于 syncfusion-maui-sunburst-charts
面向 .NET MAUI 开发者的 Syncfusion Sunburst Chart 实现指南,用同心环展示多层级类别数据,并涵盖下钻、标签和选择等功能。
主要功能
- 01按层级将数据呈现为同心环
- 02配置角度、半径和内半径
- 03自定义数据标签与工具提示
- 04支持选择高亮和交互式下钻
- 05在图表中心添加自定义内容
适用场景
- 01按层级探索区域与产品销售数据
- 02展示类别之间的比例关系
- 03在仪表板中浏览大型层级数据
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ syncfusion/ maui-ui-components-skills --skill syncfusion-maui-sunburst-charts安装后在 Claude Code 中输入/syncfusion-maui-sunburst-charts确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/appearance.mdcenter-view.mddata-labels.mddrill-down.mdgetting-started.mdliquid-glass-effect.mdselection.mdtooltips.md详细介绍
实现 .NET MAUI Sunburst 图表
指导用户实现 Syncfusion® .NET MAUI Sunburst Chart(SfSunburstChart)。这是一款功能强大的层次结构数据可视化组件,可通过径向布局显示多级分类数据。每个圆环代表层次结构中的一个级别,扇区大小与其值成比例。该组件支持交互式下钻、自定义外观、数据标签、工具提示、选择,以及现代液态玻璃效果。
何时使用此技能
在以下场景中使用 Syncfusion® .NET MAUI Sunburst Chart:
- 可视化层次结构数据,包含 2-5 个级别(组织结构图、文件系统、产品类别)
- 展示比例关系,其中扇区大小表示数值或计数
- 支持下钻探索,通过交互式导航浏览大型层次结构数据集
- 显示嵌套分类数据,例如按区域 → 部门 → 产品划分的销售额
- 创建径向可视化,作为树图或嵌套饼图的替代方案
- 构建交互式仪表板,支持多级数据探索
当用户需要同时了解层次结构和各级的相对比例时,Sunburst 图表是理想之选。
组件概览
SfSunburstChart 以同心圆环呈现层次结构数据,其中:
- 中心表示根节点,也可以显示自定义内容
- 内环表示较高级别的类别
- 外环表示详细的子类别
- 扇区大小由值属性决定
- 下钻可用于聚焦特定分支
主要功能:
- 使用 GroupMemberPath 配置层次级别
- 自定义角度、半径和内半径
- 提供旋转和溢出模式的数据标签
- 支持自定义模板的交互式工具提示
- 提供多种显示模式的选择高亮
- 支持带动画工具栏导航的下钻
- 中心视图可显示摘要信息
- 液态玻璃效果,适用于现代 iOS/macOS 样式
文档与导航指南
入门
📄 阅读: references/getting-started.md
- NuGet 包安装和设置
- Sunburst 图表基本实现
- 创建层次结构数据模型
- 配置 ItemsSource 和 ValueMemberPath
- 使用 GroupMemberPath 添加层次级别
- 启用标题、图例、工具提示和标签
- 完整的可运行示例
视觉自定义
外观配置
📄 阅读: references/appearance.md
- 调整起始角度和结束角度以显示部分圆形
- 自定义半径和内半径
- 配置描边颜色和宽度
- 创建圆环图样式的可视化
数据标签
📄 阅读: references/data-labels.md
- 启用并定位数据标签
- 溢出模式(Trim、Hide)
- 旋转模式(Angle、Normal)
- 字体自定义(字体系列、大小、颜色、属性)
交互功能
工具提示
📄 阅读: references/tooltips.md
- 为扇区详细信息启用工具提示
- 自定义工具提示外观
- 创建自定义工具提示模板
- 配置显示时长和样式
选择
📄 阅读: references/selection.md
- 选择类型(Single、Child、Group、Parent)
- 显示模式(Brush、Opacity、Stroke)
- 选择事件(SelectionChanging、SelectionChanged)
- 高亮选中的扇区及相关层次结构
下钻
📄 阅读: references/drill-down.md
- 启用交互式下钻导航
- 工具栏对齐和定位
- 自定义下钻工具栏外观
- 放大返回和重置操作
高级功能
中心视图
📄 阅读: references/center-view.md
- 向图表中心添加自定义视图
- 使用 CenterHoleSize 实现恰当的尺寸
- 在中心创建摘要显示
- 使用边框和标签创建复杂布局
液态玻璃效果
📄 阅读: references/liquid-glass-effect.md
- 现代玻璃设计样式(.NET 10+)
- 在 SfGlassEffectView 中包装图表
- 为工具提示启用玻璃效果
- iOS/macOS 平台专属功能
评论
支持 Markdown