mcpField
S
syncfusion-maui-toolkit-sunburst-charts

syncfusion-maui-toolkit-sunburst-charts

github.com/syncfusion设计与 UI3945 次安装7 周前更新
代码仓库

关于 syncfusion-maui-toolkit-sunburst-charts

面向 .NET MAUI 开发者的 Syncfusion SfSunburstChart 指南,通过交互式同心环展示层级类别及其数值占比。

主要功能

  1. 01使用 GroupMemberPath 配置层级
  2. 02按数值确定扇区大小
  3. 03配置角度和半径
  4. 04支持旋转与溢出处理的数据标签
  5. 05自定义工具提示模板
  6. 06选择高亮与中心内容

适用场景

  1. 01探索区域到产品的销售层级
  2. 02以径向图展示类别占比
  3. 03可视化组织或文件系统层级
  4. 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.md
center-view.md
data-labels.md
getting-started.md
selection.md
tooltips.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