syncfusion-blazor-sunburst-chart

用途

Syncfusion Blazor Sunburst Chart（SfSunburstChart）用于把层级数据渲染为同心环的扇形分段，视觉效果可被描述为多级饼图或径向矩形树图。每个环对应层级中的一级，每段对应一个节点。它适合展示人口分布、组织人员构成、文件系统占用、按地区划分的销售数据，以及任何符合“父 → 子”遍历的父子结构数据。

主要能力

• 数据绑定：从扁平集合绑定数据，通过 IdMemberPath、ParentIdMemberPath、LabelMemberPath、ValueMemberPath 四个成员路径推断层级。
• 外观：内置主题（Theme）、自定义调色板（Palette）、背景（Background）、边框（SunburstChartBorder）、外边距（SunburstChartMargin）、半径（Radius）、内半径（InnerRadius）、起始/结束角度（StartAngle、EndAngle）、标题与副标题（SunburstTitleSettings、SunburstSubtitleSettings）。
• 尺寸：可通过 CSS 适配容器，也可用固定像素或百分比；Width 与 Height 默认均为 100%。
• 动画：EnableAnimation（默认 true）控制入场动画，AnimationType 可选 Rotation（默认）或 FadeIn；可关闭动画以应对大数据量或性能考虑。
• 数据标签：通过 SunburstDataLabelSettings.Visible 启用，支持 OverflowMode（Trim、Hide、None）与 RotationMode（Angle、Normal），可用 SunburstDataLabelTextStyle 自定义文本样式。
• 图例：通过 SunburstLegendSettings 启用与定位，支持 Position（Top、Bottom、Left、Right）、ToggleVisibility 与无障碍属性，可用 SunburstLegendTextStyle、SunburstLegendBorder 自定义外观。
• 高亮：SunburstHighlightSettings 支持悬停高亮，Mode 可选 Single、Parent、Child、All，可设置 Color、Opacity；也可借 SunburstTooltipSettings.EnableHighlight 由提示触发高亮。
• 选择：SunburstSelectionSettings 支持分段选择，Mode 可选 Single（默认）、Parent、Child、All，可设置 Color、Opacity；再次点击或下钻导航会清除选择。
• 下钻：SunburstDrillSettings.Enable 启用下钻（双击、双击触摸或 Enter 键触发），可显示面包屑；面包屑的对齐属性位于 SunburstDrillSettings（BreadcrumbHorizontalAlignment、BreadcrumbVerticalAlignment），其外观与无障碍设置位于嵌套的 SunburstBreadcrumbSettings 子组件。
• 提示：SunburstTooltipSettings.Enable 显示标签与值，支持 Format、HeaderText、EnableHighlight、ShowHeaderLine、Opacity、Fill，并可自定义文本样式与边框。
• 事件：DrillDownStarting/DrillUpStarting（可取消）、DrillDownCompleted/DrillUpCompleted；PointClick、SelectionChanged、LegendClick；LegendItemRendering、DataLabelRendering、SegmentRendering、TooltipRendering；Loaded、PrintCompleted、Exporting、ExportCompleted。文档还说明 Action<> 与 EventCallback<> 的语义差异。
• 打印与导出：PrintAsync 打印；ExportAsync 导出为 PNG、JPEG、SVG、PDF（含方向）、XLSX 或 CSV；相关参数有 AllowDownload 与 IsBase64。
• 无障碍：支持 WCAG 2.2 AA、Section 508、屏幕阅读器、键盘与 ARIA；文档给出分段、层级、面包屑与图例的 WAI-ARIA 角色与属性，以及键盘导航表（Tab、方向键、Home、End、Enter、空格）。

使用方式

前置：安装 Syncfusion.Blazor.Charts NuGet 包，平台为 Blazor（.NET 8/9/10）。

初始步骤（Blazor Server）：创建 Blazor Server 应用、安装 NuGet 包、在 _Imports.razor 添加命名空间、在 Program.cs 注册 AddSyncfusionBlazor()、添加脚本引用并渲染首个图表。

其他托管模型：

• Blazor Web App：创建应用（Server/WebAssembly/Auto 交互性），WASM/Auto 渲染模式下需在 .Client 项目安装包，注册服务、添加脚本引用并渲染首个图表。
• 独立 WebAssembly：创建独立 Blazor WebAssembly 应用，安装包、注册服务、在 index.html 添加脚本并渲染首个图表。

基础用法：在 @using Syncfusion.Blazor.Charts 后使用 <SfSunburstChart TItem="NodeDetails" ...>，指定 DataSource 及四个成员路径（其中 IdMemberPath、ParentIdMemberPath、LabelMemberPath、ValueMemberPath 均为必填），并设置 Width、Height。

常见组合模式：

• 同时启用图例、提示与数据标签：使用 SunburstLegendSettings Visible="true" Position="SunburstLegendPosition.Bottom"、SunburstTooltipSettings Enable="true"、SunburstDataLabelSettings Visible="true"。
• 启用带面包屑的下钻：使用 <SunburstDrillSettings Enable="true" ShowBreadcrumbs="true" />。
• 完整交互仪表板：结合 Palette 自定义配色、图例（Position 与 ToggleVisibility）、数据标签（OverflowMode、RotationMode）、下钻（含面包屑对齐与 SunburstBreadcrumbSettings 的 FontWeight、Separator、SeparatorColor）以及提示（HeaderText、EnableHighlight）。默认面包屑位置为 Top/Left，若希望其位于图表下方，可将 BreadcrumbHorizontalAlignment 设为 Center、BreadcrumbVerticalAlignment 设为 Bottom。

适用场景

• 以层级方式展示人口、组织人员、文件系统占用、按地区销售等父子结构数据。
• 需要在 Blazor Server、WebAssembly 或 Blazor Web App 中嵌入可交互的层级可视化。
• 需要图例、提示、数据标签、高亮、选择、下钻、面包屑等交互组合的分析或仪表板界面。
• 需要打印或导出为 PNG、JPEG、SVG、PDF、XLSX、CSV 的场景。
• 有 WCAG 2.2 AA、Section 508、屏幕阅读器与键盘导航等无障碍要求的项目。

限制与注意事项

• 四个成员路径（IdMemberPath、ParentIdMemberPath、LabelMemberPath、ValueMemberPath）为必填。
• 层级校验涉及缺失或重复 ID、循环、无法解析的父节点、多个根节点以及深度限制等规则。
• 选择在再次点击或下钻导航时会被清除。
• 面包屑的对齐属性属于 SunburstDrillSettings，而外观与无障碍设置属于嵌套的 SunburstBreadcrumbSettings。
• 具体价格、收费、平台支持范围与效果等资料未提供。