关于 syncfusion-maui-toolkit-circular-charts
该技能指导 .NET MAUI 开发者使用 Syncfusion.Maui.Toolkit 的 SfCircularChart 构建饼图、环形图和径向条形图,涵盖数据绑定、交互、自定义及导出。
主要功能
- 01饼图、环形图和径向条形图
- 02数据绑定与数据标签
- 03图例、提示和选择交互
- 04小扇区分组为“其他”
- 05自定义样式与中心内容
- 06导出为 PNG、JPEG 或 PDF
适用场景
- 01呈现预算或市场份额占比
- 02比较类别数据与百分比分布
- 03在环形图中心显示补充内容
- 04导出图表用于文档或分享
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ syncfusion/ maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-circular-charts安装后在 Claude Code 中输入/syncfusion-maui-toolkit-circular-charts确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/appearance.mdchart-types.mddata-labels.mdexplode.mdexporting.mdgetting-started.mdgroupto.mdlegend.mdselection.mdtooltip.md详细介绍
实现 .NET MAUI 圆形图表
本技能将指导你实现 Syncfusion .NET MAUI 圆形图表(SfCircularChart),该控件提供饼图、圆环图和径向条形图可视化,用于展示部分与整体的关系以及数据分布。
何时使用此技能
在以下情况下使用此技能:
- 展示比例数据 - 显示各部分对整体的贡献(市场份额、预算分配、调查结果)
- 创建饼图 - 创建由扇区组成的标准圆形图表
- 实现圆环图 - 创建带有中心孔的圆形图表,可选择在中心显示其他信息
- 构建径向条形图 - 使用圆形进度指示器比较不同类别的值
- 展示数据分布 - 可视化百分比明细或类别比较
- 启用图表交互 - 添加工具提示、分离效果、选择和图例
- 合并较小的值 - 自动将较小的数据段合并到“其他”类别
- 导出可视化内容 - 将图表保存为图像或 PDF
- 自定义外观 - 设置颜色、描边、间距和视觉效果
组件概览
SfCircularChart 是用于圆形数据可视化的 .NET MAUI 控件,具备以下功能:
- 三种图表类型:PieSeries、DoughnutSeries、RadialBarSeries
- 数据绑定:使用 XBindingPath 和 YBindingPath 绑定到集合
- 交互功能:工具提示、分离、选择、图例
- 自定义:颜色、描边、间距、角度、半径控制
- 数据标签:在数据段上显示值/百分比
- 分组:将较小的值合并到“其他”类别
- 中心内容:在圆环图/径向条形图的中心显示自定义视图
- 导出:保存为 PNG、JPEG 或 PDF
文档和导航指南
入门
📄 阅读: references/getting-started.md
- NuGet 包安装(
Syncfusion.Maui.Toolkit) - 基本的 SfCircularChart 设置和初始化
- 创建数据模型和视图模型
- 将数据绑定到图表系列
- 添加标题、图例和数据标签
- 完整的最小可运行示例
图表类型
📄 阅读: references/chart-types.md
- PieSeries - 标准饼图实现
- DoughnutSeries - 带内半径和中心视图的圆环图
- RadialBarSeries - 圆形进度/比较条
- 用于调整图表大小的 Radius 属性
- 用于半圆形图表的 StartAngle 和 EndAngle
- 圆环图和径向条形图的 InnerRadius 配置
- 用于显示中心内容的 CenterView 和 CenterHoleSize
- 所有图表类型的代码示例
数据标签
📄 阅读: references/data-labels.md
- 启用和配置数据标签
- 标签位置和对齐方式
- 自定义标签模板
- 防止标签重叠的智能定位
- 外部标签的标签连接线
- 标签格式(值、百分比、自定义格式)
- 样式和外观自定义
图例
📄 阅读: references/legend.md
- 启用 ChartLegend
- 图例位置(顶部、底部、左侧、右侧)
- 图例图标类型和自定义
- 自定义图例模板
- 切换可见性功能
- 图例样式和外观
外观和样式
📄 阅读: references/appearance.md
- 用于设置数据段颜色的 PaletteBrushes
- 用于设置边框的 Stroke 和 StrokeWidth
- 透明度设置
- 用于设置数据段间距的 GapRatio(径向条形图)
- 用于设置径向条形图范围的 MaximumValue
- CapStyle 自定义(平直端、弧形端)
- 径向条形图的轨道自定义(TrackFill、TrackStroke)
- 自定义画刷和渐变填充
工具提示
📄 阅读: references/tooltip.md
- 使用 EnableTooltip 启用工具提示
- 默认工具提示行为
- 自定义工具提示模板
- 自定义工具提示内容
- 设置工具提示外观样式
- 交互式悬停行为
扇出功能
📄 阅读: references/explode.md
- 将图表分段向外扇出
- 使用 ExplodeIndex 指定要扇出的分段
- 使用 ExplodeRadius 设置扇出距离
- 使用 ExplodeOnTouch 支持用户交互
- 扇出多个分段
- 突出显示并分隔分段
选择
📄 阅读: references/selection.md
- 启用选择行为
- 配置 SelectionBehavior
- 选择模式(单选、多选)
- 处理选中的索引
- 提供选择的视觉反馈
- 选择多个分段
数据分组
📄 阅读: references/groupto.md
- 使用 GroupTo 属性自动分组
- 将较小的值合并到“其他”类别
- 设置分组阈值
- 自定义分组标签和外观
- 在图表包含许多小分段时提升可读性
导出图表
📄 阅读: references/exporting.md
- 导出为 PNG 或 JPEG 图像
- 导出为 PDF 文档
- 使用 SaveAsImage 和 GetStreamAsync 方法
- 基于流的导出
- 设置导出质量和分辨率
- 各导出格式的代码示例
评论
支持 Markdown