关于 syncfusion-maui-toolkit-sunburst-charts
面向 .NET MAUI 开发者的 Syncfusion SfSunburstChart 指南,通过交互式同心环展示层级类别及其数值占比。
主要功能
- 01使用 GroupMemberPath 配置层级
- 02按数值确定扇区大小
- 03配置角度和半径
- 04支持旋转与溢出处理的数据标签
- 05自定义工具提示模板
- 06选择高亮与中心内容
适用场景
- 01探索区域到产品的销售层级
- 02以径向图展示类别占比
- 03可视化组织或文件系统层级
- 04在仪表板中加入可交互层级视图
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-sunburst-charts安装后在 Claude Code 中输入/syncfusion-maui-toolkit-sunburst-charts确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/appearance.mdcenter-view.mddata-labels.mdgetting-started.mdselection.mdtooltips.md详细介绍
实现 .NET MAUI Sunburst 图表
指导用户实现 Syncfusion .NET MAUI Sunburst Chart(SfSunburstChart)。这是一款强大的层次结构数据可视化组件,可在径向布局中展示多层分类数据。每个环代表层次结构中的一个级别,扇区大小与其值成比例。该组件支持自定义外观、数据标签、工具提示和选择功能。
何时使用此技能
在以下情况下使用 Syncfusion .NET MAUI Sunburst Chart:
- 可视化层次结构数据,包含 2-5 个级别(组织结构图、文件系统、产品类别)
- 展示比例关系,其中扇区大小代表值或计数
- 显示嵌套分类数据,例如按区域 → 部门 → 产品划分的销售额
- 创建径向可视化,作为树图或嵌套饼图的替代方案
- 构建交互式仪表板,支持多层数据探索
当用户需要同时了解层次结构和各级别的相对比例时,旭日图是理想选择。
组件概述
SfSunburstChart 以同心环的形式呈现层次结构数据,其中:
- 中心代表根节点,也可显示自定义内容
- 内环代表较高层级的类别
- 外环代表详细的子类别
- 扇区大小由值属性决定
主要功能:
- 使用 GroupMemberPath 配置层次级别
- 自定义角度、半径和内半径
- 支持旋转和溢出模式的数据标签
- 支持自定义模板的交互式工具提示
- 支持多种显示模式的选择高亮
- 中心视图,用于显示摘要信息
文档与导航指南
入门
📄 阅读: references/getting-started.md
- NuGet 包安装与设置
- 基本旭日图实现
- 创建层次结构数据模型
- 配置 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/center-view.md
- 在图表中心添加自定义视图
- 使用 CenterHoleSize 设置合适的尺寸
- 在中心创建摘要展示
- 使用边框和标签构建复杂布局
评论
支持 Markdown