Back to Details

syncfusion-wpf-sunburst-chart

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Assembly Requirements

程序集要求

Required Assembly:
  • Syncfusion.SfSunburstChart.WPF
NuGet Package:
powershell
Install-Package Syncfusion.SfSunburstChart.WPF
Minimum .NET Framework: 4.5 or higher
所需程序集：
  • Syncfusion.SfSunburstChart.WPF
NuGet包：
powershell
Install-Package Syncfusion.SfSunburstChart.WPF
最低.NET Framework版本： 4.5或更高版本

Implementing Sunburst Charts

实现旭日图

Guide for implementing the Syncfusion WPF Sunburst Chart (SfSunburstChart) control for visualizing hierarchical data in concentric circular rings. The sunburst chart displays multi-level categorical data where each ring represents a level in the hierarchy, with the center representing the root and outer rings representing deeper levels.
本指南介绍如何实现Syncfusion WPF Sunburst Chart（SfSunburstChart）控件，以同心圆形式可视化层级数据。旭日图可展示多层分类数据，每个环代表层级中的一个级别，中心代表根节点，外层环代表更深的层级。

When to Use This Skill

适用场景

Use this skill when you need to:
  • Visualize hierarchical data with multiple levels in a circular layout
  • Display organizational structures (departments, teams, roles)
  • Show file system hierarchies (folders, subfolders, files)
  • Present sales data organized by region, category, product, subcategory
  • Implement drill-down experiences with interactive zooming
  • Create multi-level circular visualizations where size represents value
  • Display tree-structured data in a compact, visual format
  • Enable interactive exploration of nested categorical data
Sunburst charts are ideal when you have 2-5 levels of hierarchical data and want to show both the structure and relative sizes of categories.
在以下场景中使用本技能：
  • 以环形布局可视化多层层级数据
  • 展示组织架构（部门、团队、角色）
  • 呈现文件系统层级（文件夹、子文件夹、文件）
  • 展示按区域、分类、产品、子分类组织的销售数据
  • 实现带交互式缩放的钻取体验
  • 创建以尺寸表示数值的多层环形可视化
  • 以紧凑的视觉格式展示树形结构数据
  • 支持嵌套分类数据的交互式探索
当你拥有2-5层层级数据，且希望同时展示结构和分类的相对占比时，旭日图是理想选择。

Component Overview

组件概述

The SfSunburstChart is a specialized WPF control that visualizes hierarchical data in concentric circles:
Key Capabilities:
  • Multi-level hierarchies: Support for 2-5+ hierarchical levels
  • Data binding: MVVM-compatible with IEnumerable data sources
  • Interactive features: Tooltips, selection, zooming/drill-down
  • Visual customization: Color palettes, data labels, legends
  • Animations: FadeIn and Rotation animations for smooth rendering
  • Responsive design: Customizable radius and angles
Core Properties:
  • ItemsSource
    – Data collection (hierarchical data model)
  • ValueMemberPath
    – Property name for segment sizing
  • Levels
    – Collection defining each hierarchy level
  • GroupMemberPath
    – Property for each level's grouping
SfSunburstChart是一款专门的WPF控件，用于以同心圆形式可视化层级数据：
核心功能：
  • 多层层级支持： 支持2-5+层层级结构
  • 数据绑定： 兼容MVVM，支持IEnumerable数据源
  • 交互功能： 工具提示、选择、缩放/钻取
  • 视觉自定义： 调色板、数据标签、图例
  • 动画效果： 淡入和旋转动画，实现平滑渲染
  • 响应式设计： 可自定义半径和角度
核心属性：
  • ItemsSource
    – 数据集合（层级数据模型）
  • ValueMemberPath
    – 用于分段尺寸计算的属性名称
  • Levels
    – 定义每个层级的集合
  • GroupMemberPath
    – 每个层级的分组属性

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md
Use this reference when:
  • Setting up a new sunburst chart project
  • Adding assembly references (Syncfusion.SfSunburstChart.WPF)
  • Creating data models and ViewModels
  • Binding data to the chart
  • Adding basic visual elements (header, legend, data labels)
  • Understanding complete working examples
Topics covered:
  • Assembly references and installation
  • Namespace imports (XAML and C#)
  • Data model structure for hierarchical data
  • ViewModel initialization with ObservableCollection
  • Basic chart configuration (ItemsSource, ValueMemberPath)
  • Adding header, legend, and data labels
  • Theme integration
📄 阅读： references/getting-started.md
在以下场景中使用本参考：
  • 搭建新的旭日图项目
  • 添加程序集引用（Syncfusion.SfSunburstChart.WPF）
  • 创建数据模型和ViewModel
  • 为图表绑定数据
  • 添加基础视觉元素（标题、图例、数据标签）
  • 理解完整的示例工程
涵盖主题：
  • 程序集引用与安装
  • 命名空间导入（XAML和C#）
  • 层级数据的数据模型结构
  • 使用ObservableCollection初始化ViewModel
  • 基础图表配置（ItemsSource、ValueMemberPath）
  • 添加标题、图例和数据标签
  • 主题集成

Hierarchical Levels Configuration

层级配置

📄 Read: references/hierarchical-levels.md
Use this reference when:
  • Defining the hierarchy structure
  • Configuring multiple levels (2-5+ levels)
  • Understanding GroupMemberPath mapping
  • Organizing data by categories and subcategories
Topics covered:
  • SunburstHierarchicalLevel overview
  • Levels collection management
  • GroupMemberPath property usage
  • Multi-level hierarchy examples
  • Level ordering and structure
📄 阅读： references/hierarchical-levels.md
在以下场景中使用本参考：
  • 定义层级结构
  • 配置多层级（2-5+层）
  • 理解GroupMemberPath映射
  • 按分类和子分类组织数据
涵盖主题：
  • SunburstHierarchicalLevel概述
  • 层级集合管理
  • GroupMemberPath属性用法
  • 多层级示例
  • 层级排序与结构

Data Labels

数据标签

📄 Read: references/data-labels.md
Use this reference when:
  • Showing category names and values on segments
  • Customizing label appearance and positioning
  • Handling label overflow (Hide or Trim)
  • Rotating labels for better readability
  • Creating custom label templates
Topics covered:
  • Enabling/disabling labels (ShowLabel)
  • LabelOverflowMode (Hide, Trim)
  • LabelRotationMode (Normal, Angle)
  • Font customization (FontFamily, FontSize, FontStyle, FontWeight)
  • Custom templates (LabelTemplate)
  • Foreground color customization
📄 阅读： references/data-labels.md
在以下场景中使用本参考：
  • 在分段上显示分类名称和数值
  • 自定义标签外观和位置
  • 处理标签溢出（隐藏或截断）
  • 旋转标签以提升可读性
  • 创建自定义标签模板
涵盖主题：
  • 启用/禁用标签（ShowLabel）
  • LabelOverflowMode（Hide、Trim）
  • LabelRotationMode（Normal、Angle）
  • 字体自定义（FontFamily、FontSize、FontStyle、FontWeight）
  • 自定义模板（LabelTemplate）
  • 前景色自定义

Legend Configuration

图例配置

📄 Read: references/legend.md
Use this reference when:
  • Adding a legend to identify categories
  • Customizing legend icons and layout
  • Positioning the legend (Left, Right, Top, Bottom)
  • Implementing legend interactivity (click to select/hide)
  • Creating custom legend templates
Topics covered:
  • Legend initialization
  • LegendIcon shapes (Circle, Pentagon, Rectangle, etc.)
  • Icon sizing (IconHeight, IconWidth)
  • Custom legend templates (LegendIconTemplate)
  • Positioning (DockPosition)
  • Legend interactivity (ClickAction: ToggleSegmentSelection, ToggleSegmentVisibility)
📄 阅读： references/legend.md
在以下场景中使用本参考：
  • 添加图例以识别分类
  • 自定义图例图标和布局
  • 设置图例位置（左、右、上、下）
  • 实现图例交互（点击选择/隐藏）
  • 创建自定义图例模板
涵盖主题：
  • 图例初始化
  • 图例图标形状（圆形、五边形、矩形等）
  • 图标尺寸（IconHeight、IconWidth）
  • 自定义图例模板（LegendIconTemplate）
  • 位置设置（DockPosition）
  • 图例交互（ClickAction：ToggleSegmentSelection、ToggleSegmentVisibility）

Animation

动画效果

📄 Read: references/animation.md
Use this reference when:
  • Adding smooth entry animations
  • Configuring animation duration
  • Choosing between FadeIn and Rotation animations
Topics covered:
  • EnableAnimation property
  • AnimationDuration configuration
  • AnimationType options (FadeIn, Rotation)
  • Performance considerations
📄 阅读： references/animation.md
在以下场景中使用本参考：
  • 添加平滑的入场动画
  • 配置动画时长
  • 在淡入和旋转动画中选择
涵盖主题：
  • EnableAnimation属性
  • AnimationDuration配置
  • AnimationType选项（FadeIn、Rotation）
  • 性能注意事项

Visual Customization

视觉自定义

📄 Read: references/visual-customization.md
Use this reference when:
  • Applying color palettes (predefined or custom)
  • Creating custom color schemes
  • Adjusting chart dimensions (radius, inner radius)
  • Customizing start and end angles
  • Using gradient brushes
Topics covered:
  • Predefined palettes (Metro, AutumnBrights, FloraHues, etc.)
  • Custom palettes (ColorModel, CustomBrushes)
  • Gradient brush examples
  • Region properties (StartAngle, EndAngle, Radius, InnerRadius)
  • Visual structure customization
📄 阅读： references/visual-customization.md
在以下场景中使用本参考：
  • 应用调色板（预定义或自定义）
  • 创建自定义配色方案
  • 调整图表尺寸（半径、内半径）
  • 自定义起始和结束角度
  • 使用渐变画刷
涵盖主题：
  • 预定义调色板（Metro、AutumnBrights、FloraHues等）
  • 自定义调色板（ColorModel、CustomBrushes）
  • 渐变画刷示例
  • 区域属性（StartAngle、EndAngle、Radius、InnerRadius）
  • 视觉结构自定义

Interactivity Features

交互功能

📄 Read: references/interactivity.md
Use this reference when:
  • Adding tooltips on hover
  • Implementing segment selection
  • Enabling drill-down/zooming
  • Configuring interactive behaviors
  • Customizing user experience
Topics covered:
  • Tooltips: ShowToolTip, alignment, offset, duration, custom templates
  • Selection: SelectionDisplayMode, SelectionMode, SelectionType, SelectionBrush
  • Zooming: SunburstZoomingBehavior, toolbar configuration, drill-down
📄 阅读： references/interactivity.md
在以下场景中使用本参考：
  • 添加悬停工具提示
  • 实现分段选择
  • 启用钻取/缩放
  • 配置交互行为
  • 自定义用户体验
涵盖主题：
  • 工具提示： ShowToolTip、对齐方式、偏移量、时长、自定义模板
  • 选择： SelectionDisplayMode、SelectionMode、SelectionType、SelectionBrush
  • 缩放： SunburstZoomingBehavior、工具栏配置、钻取

Event Handling

事件处理

📄 Read: references/events.md
Use this reference when:
  • Responding to segment creation
  • Handling selection changes
  • Customizing segments dynamically
  • Implementing custom behaviors on user actions
Topics covered:
  • SegmentCreated event
  • SelectionChanged event
  • Event argument properties
  • Dynamic segment customization
  • Event handler patterns
📄 阅读： references/events.md
在以下场景中使用本参考：
  • 响应分段创建
  • 处理选择变化
  • 动态自定义分段
  • 实现用户操作的自定义行为
涵盖主题：
  • SegmentCreated事件
  • SelectionChanged事件
  • 事件参数属性
  • 动态分段自定义
  • 事件处理程序模式

Quick Start Example

快速入门示例

Here's a minimal example to create a sunburst chart showing employee distribution:
以下是创建展示员工分布的旭日图的最简示例：

1. Add Assembly Reference

1. 添加程序集引用

xml
<!-- In your XAML, add namespace -->
<Window xmlns:sunburst="clr-namespace:Syncfusion.UI.Xaml.SunburstChart;assembly=Syncfusion.SfSunburstChart.WPF">
xml
<!-- 在XAML中添加命名空间 -->
<Window xmlns:sunburst="clr-namespace:Syncfusion.UI.Xaml.SunburstChart;assembly=Syncfusion.SfSunburstChart.WPF">

2. Create Data Model

2. 创建数据模型

csharp
public class EmployeeData
{
    public string Country { get; set; }
    public string Department { get; set; }
    public string Team { get; set; }
    public double EmployeeCount { get; set; }
}
csharp
public class EmployeeData
{
    public string Country { get; set; }
    public string Department { get; set; }
    public string Team { get; set; }
    public double EmployeeCount { get; set; }
}

3. Create ViewModel

3. 创建ViewModel

csharp
public class ViewModel
{
    public ObservableCollection<EmployeeData> Data { get; set; }
    
    public ViewModel()
    {
        Data = new ObservableCollection<EmployeeData>
        {
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Field Sales", EmployeeCount = 45 },
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Inside Sales", EmployeeCount = 30 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "Development", EmployeeCount = 85 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "QA", EmployeeCount = 35 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "Development", EmployeeCount = 120 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "QA", EmployeeCount = 40 },
            new EmployeeData { Country = "UK", Department = "Sales", Team = "Field Sales", EmployeeCount = 25 },
            new EmployeeData { Country = "UK", Department = "Marketing", Team = "Digital", EmployeeCount = 20 }
        };
    }
}
csharp
public class ViewModel
{
    public ObservableCollection<EmployeeData> Data { get; set; }
    
    public ViewModel()
    {
        Data = new ObservableCollection<EmployeeData>
        {
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Field Sales", EmployeeCount = 45 },
            new EmployeeData { Country = "USA", Department = "Sales", Team = "Inside Sales", EmployeeCount = 30 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "Development", EmployeeCount = 85 },
            new EmployeeData { Country = "USA", Department = "Engineering", Team = "QA", EmployeeCount = 35 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "Development", EmployeeCount = 120 },
            new EmployeeData { Country = "India", Department = "Engineering", Team = "QA", EmployeeCount = 40 },
            new EmployeeData { Country = "UK", Department = "Sales", Team = "Field Sales", EmployeeCount = 25 },
            new EmployeeData { Country = "UK", Department = "Marketing", Team = "Digital", EmployeeCount = 20 }
        };
    }
}

4. XAML Configuration

4. XAML配置

xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="EmployeeCount"
                          Header="Employee Distribution"
                          FontSize="20">
    
    <!-- Define hierarchy levels -->
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Department"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Team"/>
    </sunburst:SfSunburstChart.Levels>
    
    <!-- Add legend -->
    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstLegend DockPosition="Left"/>
    </sunburst:SfSunburstChart.Legend>
    
    <!-- Add data labels -->
    <sunburst:SfSunburstChart.DataLabelInfo>
        <sunburst:SunburstDataLabelInfo ShowLabel="True"/>
    </sunburst:SfSunburstChart.DataLabelInfo>
    
</sunburst:SfSunburstChart>
xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="EmployeeCount"
                          Header="Employee Distribution"
                          FontSize="20">
    
    <!-- 定义层级结构 -->
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Department"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Team"/>
    </sunburst:SfSunburstChart.Levels>
    
    <!-- 添加图例 -->
    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstLegend DockPosition="Left"/>
    </sunburst:SfSunburstChart.Legend>
    
    <!-- 添加数据标签 -->
    <sunburst:SfSunburstChart.DataLabelInfo>
        <sunburst:SunburstDataLabelInfo ShowLabel="True"/>
    </sunburst:SfSunburstChart.DataLabelInfo>
    
</sunburst:SfSunburstChart>

5. Set DataContext

5. 设置DataContext

csharp
public MainWindow()
{
    InitializeComponent();
    this.DataContext = new ViewModel();
}
csharp
public MainWindow()
{
    InitializeComponent();
    this.DataContext = new ViewModel();
}

Common Patterns

常见模式

Pattern 1: Hierarchical Data with 3-4 Levels

模式1：3-4层层级数据

xml
<sunburst:SfSunburstChart ItemsSource="{Binding HierarchicalData}" 
                          ValueMemberPath="Value"
                          Palette="Metro">
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level1"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level2"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level3"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level4"/>
    </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart>
Use when: Displaying organizational structures, file systems, or multi-level sales data.
xml
<sunburst:SfSunburstChart ItemsSource="{Binding HierarchicalData}" 
                          ValueMemberPath="Value"
                          Palette="Metro">
    <sunburst:SfSunburstChart.Levels>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level1"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level2"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level3"/>
        <sunburst:SunburstHierarchicalLevel GroupMemberPath="Level4"/>
    </sunburst:SfSunburstChart.Levels>
</sunburst:SfSunburstChart>
适用场景： 展示组织架构、文件系统或多层级销售数据。

Pattern 2: Interactive Chart with Selection and Tooltips

模式2：带选择和工具提示的交互图表

xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        <!-- Enable selection -->
        <sunburst:SunburstSelectionBehavior EnableSelection="True"
                                           SelectionMode="MouseClick"
                                           SelectionType="Single"/>
        
        <!-- Enable tooltips -->
        <sunburst:SunburstToolTipBehavior ShowToolTip="True"
                                         ShowDuration="3000"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>
Use when: Users need to interact with segments for detailed information.
xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        <!-- 启用选择功能 -->
        <sunburst:SunburstSelectionBehavior EnableSelection="True"
                                           SelectionMode="MouseClick"
                                           SelectionType="Single"/>
        
        <!-- 启用工具提示 -->
        <sunburst:SunburstToolTipBehavior ShowToolTip="True"
                                         ShowDuration="3000"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>
适用场景： 用户需要与分段交互以查看详细信息。

Pattern 3: Drill-Down with Zooming

模式3：带缩放的钻取

xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        <!-- Enable zooming for drill-down -->
        <sunburst:SunburstZoomingBehavior EnableZooming="True"
                                         ToolBarHorizontalAlignment="Right"
                                         ToolBarVerticalAlignment="Top"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>
Use when: Users need to explore deep hierarchies by zooming into specific categories.
xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value">
    
    <sunburst:SfSunburstChart.Behaviors>
        <!-- 启用缩放以实现钻取 -->
        <sunburst:SunburstZoomingBehavior EnableZooming="True"
                                         ToolBarHorizontalAlignment="Right"
                                         ToolBarVerticalAlignment="Top"/>
    </sunburst:SfSunburstChart.Behaviors>
    
</sunburst:SfSunburstChart>
适用场景： 用户需要通过缩放特定分类来探索深层层级。

Pattern 4: Custom Palette with Gradient Brushes

模式4：带渐变画刷的自定义调色板

xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value"
                          Palette="Custom">
    
    <sunburst:SfSunburstChart.ColorModel>
        <sunburst:SunburstColorModel>
            <sunburst:SunburstColorModel.CustomBrushes>
                <LinearGradientBrush>
                    <GradientStop Color="#FF6B88E6" Offset="0"/>
                    <GradientStop Color="#FF2C5AA0" Offset="1"/>
                </LinearGradientBrush>
                <LinearGradientBrush>
                    <GradientStop Color="#FFE67E6B" Offset="0"/>
                    <GradientStop Color="#FFA0422C" Offset="1"/>
                </LinearGradientBrush>
            </sunburst:SunburstColorModel.CustomBrushes>
        </sunburst:SunburstColorModel>
    </sunburst:SfSunburstChart.ColorModel>
    
</sunburst:SfSunburstChart>
Use when: Matching corporate branding or creating custom color themes.
xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value"
                          Palette="Custom">
    
    <sunburst:SfSunburstChart.ColorModel>
        <sunburst:SunburstColorModel>
            <sunburst:SunburstColorModel.CustomBrushes>
                <LinearGradientBrush>
                    <GradientStop Color="#FF6B88E6" Offset="0"/>
                    <GradientStop Color="#FF2C5AA0" Offset="1"/>
                </LinearGradientBrush>
                <LinearGradientBrush>
                    <GradientStop Color="#FFE67E6B" Offset="0"/>
                    <GradientStop Color="#FFA0422C" Offset="1"/>
                </LinearGradientBrush>
            </sunburst:SunburstColorModel.CustomBrushes>
        </sunburst:SunburstColorModel>
    </sunburst:SfSunburstChart.ColorModel>
    
</sunburst:SfSunburstChart>
适用场景： 匹配企业品牌或创建自定义配色主题。

Pattern 5: Animated Entry with Rotation

模式5：带旋转效果的入场动画

xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value"
                          EnableAnimation="True"
                          AnimationType="Rotation"
                          AnimationDuration="1500">
    <!-- Chart configuration -->
</sunburst:SfSunburstChart>
Use when: Adding visual polish with smooth entry animations.
xml
<sunburst:SfSunburstChart ItemsSource="{Binding Data}" 
                          ValueMemberPath="Value"
                          EnableAnimation="True"
                          AnimationType="Rotation"
                          AnimationDuration="1500">
    <!-- 图表配置 -->
</sunburst:SfSunburstChart>
适用场景： 通过平滑的入场动画提升视觉效果。

Key Properties

核心属性

Core Data Binding

核心数据绑定

  • ItemsSource – 
    IEnumerable
    data source (hierarchical data collection)
  • ValueMemberPath – Property name for segment size calculation
  • Levels – Collection of 
    SunburstHierarchicalLevel
    defining hierarchy
  • GroupMemberPath (on levels) – Property for category grouping at each level
  • ItemsSource – 
    IEnumerable
    数据源（层级数据集合）
  • ValueMemberPath – 用于分段尺寸计算的属性名称
  • Levels – 定义层级的
    SunburstHierarchicalLevel
    集合
  • GroupMemberPath（层级属性）– 每个层级的分类分组属性

Visual Elements

视觉元素

  • Header – Chart title
  • Legend – 
    SunburstLegend
    for category identification
  • DataLabelInfo – 
    SunburstDataLabelInfo
    for segment labels
  • Palette – Color scheme (Metro, AutumnBrights, Custom, etc.)
  • ColorModel – Custom brush definitions
  • Header – 图表标题
  • Legend – 用于分类识别的
    SunburstLegend
  • DataLabelInfo – 用于分段标签的
    SunburstDataLabelInfo
  • Palette – 配色方案（Metro、AutumnBrights、Custom等）
  • ColorModel – 自定义画刷定义

Region Properties

区域属性

  • Radius – Chart outer radius (0.0 to 1.0, default: 0.9)
  • InnerRadius – Center circle radius (0.0 to 1.0, default: 0.2)
  • StartAngle – Starting angle in degrees (default: 0)
  • EndAngle – Ending angle in degrees (default: 360)
  • Radius – 图表外半径（0.0至1.0，默认值：0.9）
  • InnerRadius – 中心圆半径（0.0至1.0，默认值：0.2）
  • StartAngle – 起始角度（单位：度，默认值：0）
  • EndAngle – 结束角度（单位：度，默认值：360）

Animation

动画

  • EnableAnimation – Enable/disable entry animation
  • AnimationType – FadeIn or Rotation
  • AnimationDuration – Animation time in milliseconds
  • EnableAnimation – 启用/禁入场动画
  • AnimationType – 淡入或旋转
  • AnimationDuration – 动画时长（单位：毫秒）

Behaviors

交互行为

  • SunburstToolTipBehavior – Tooltip configuration
  • SunburstSelectionBehavior – Selection interactivity
  • SunburstZoomingBehavior – Drill-down/zooming
  • SunburstToolTipBehavior – 工具提示配置
  • SunburstSelectionBehavior – 选择交互
  • SunburstZoomingBehavior – 钻取/缩放

Common Use Cases

常见用例

Use Case 1: Organizational Hierarchy Visualization

用例1：组织架构可视化

Scenario: Display company structure by region, department, team, and role.
Solution:
  • 4 hierarchy levels (Region → Department → Team → Role)
  • ValueMemberPath = "EmployeeCount"
  • Enable selection to highlight departments
  • Add tooltips showing employee counts
场景： 按区域、部门、团队和角色展示公司结构。
解决方案：
  • 4层层级结构（区域→部门→团队→角色）
  • ValueMemberPath = "EmployeeCount"
  • 启用选择功能以高亮部门
  • 添加显示员工数量的工具提示

Use Case 2: File System Explorer

用例2：文件系统浏览器

Scenario: Visualize disk usage by folder hierarchy.
Solution:
  • 3-5 hierarchy levels (Drive → Folder → Subfolder → File)
  • ValueMemberPath = "SizeInBytes"
  • Enable zooming for drill-down navigation
  • Custom palette showing size with color intensity
场景： 按文件夹层级可视化磁盘使用情况。
解决方案：
  • 3-5层层级结构（驱动器→文件夹→子文件夹→文件）
  • ValueMemberPath = "SizeInBytes"
  • 启用缩放以实现钻取导航
  • 自定义调色板，以颜色深浅表示文件大小

Use Case 3: Sales Dashboard

用例3：销售仪表盘

Scenario: Display sales by region, category, product, and SKU.
Solution:
  • 4 hierarchy levels (Region → Category → Product → SKU)
  • ValueMemberPath = "SalesAmount"
  • Interactive legend with ToggleSegmentVisibility
  • Custom data labels showing sales figures
场景： 按区域、分类、产品和SKU展示销售数据。
解决方案：
  • 4层层级结构（区域→分类→产品→SKU）
  • ValueMemberPath = "SalesAmount"
  • 带ToggleSegmentVisibility功能的交互式图例
  • 显示销售数据的自定义数据标签

Use Case 4: Budget Allocation Viewer

用例4：预算分配查看器

Scenario: Show budget distribution across departments and projects.
Solution:
  • 3 hierarchy levels (Department → Project → Phase)
  • ValueMemberPath = "BudgetAmount"
  • Custom color palette matching budget categories
  • Selection highlighting with custom brushes
场景： 展示跨部门和项目的预算分布。
解决方案：
  • 3层层级结构（部门→项目→阶段）
  • ValueMemberPath = "BudgetAmount"
  • 匹配预算分类的自定义调色板
  • 带自定义画刷的选择高亮

Use Case 5: Website Analytics Hierarchy

用例5：网站分析层级

Scenario: Display website traffic by country, page category, and page.
Solution:
  • 3 hierarchy levels (Country → Category → Page)
  • ValueMemberPath = "PageViews"
  • Animated entry (FadeIn)
  • Tooltips with additional metrics (bounce rate, time on page)
场景： 按国家、页面分类和页面展示网站流量。
解决方案：
  • 3层层级结构（国家→分类→页面）
  • ValueMemberPath = "PageViews"
  • 入场动画（淡入）
  • 显示额外指标（跳出率、页面停留时间）的工具提示

Best Practices

最佳实践

  1. Data Structure: Ensure your data model has distinct properties for each hierarchy level and a numeric property for ValueMemberPath.
  2. Level Count: Limit to 3-5 levels for optimal readability. Too many levels create overcrowded outer rings.
  3. Value Consistency: Ensure ValueMemberPath points to positive numeric values representing size/count/amount.
  4. Label Readability: Use LabelOverflowMode="Trim" or "Hide" to prevent label clutter on smaller segments.
  5. Interactive Features: Combine tooltips with selection for the best user experience. Add zooming for deep hierarchies.
  6. Performance: For large datasets (1000+ items), consider data aggregation or limiting visible levels.
  7. Color Consistency: Use predefined palettes for consistency or create custom palettes matching your application's theme.
  8. MVVM Pattern: Implement INotifyPropertyChanged in your ViewModel for dynamic data updates.
  1. 数据结构： 确保数据模型为每个层级提供独立属性，且为ValueMemberPath提供数值类型属性。
  2. 层级数量： 限制为3-5层以优化可读性。过多层级会导致外层环过于拥挤。
  3. 数值一致性： 确保ValueMemberPath指向代表尺寸/数量/金额的正数值。
  4. 标签可读性： 使用LabelOverflowMode="Trim"或"Hide"以避免小分段上的标签混乱。
  5. 交互功能： 结合工具提示和选择功能以提供最佳用户体验。对于深层层级，添加缩放功能。
  6. 性能： 对于大型数据集（1000+条数据），考虑数据聚合或限制可见层级。
  7. 颜色一致性： 使用预定义调色板以保持一致性，或创建与应用主题匹配的自定义调色板。
  8. MVVM模式： 在ViewModel中实现INotifyPropertyChanged以支持动态数据更新。

Troubleshooting

故障排除

Chart not displaying:
  • Verify ItemsSource binding is correct
  • Check that ValueMemberPath matches a numeric property
  • Ensure at least one SunburstHierarchicalLevel is defined
  • Verify data collection is not empty
Segments not sized correctly:
  • Confirm ValueMemberPath points to a numeric property
  • Check for null or negative values in the data
  • Ensure property name matches exactly (case-sensitive)
Labels overlapping:
  • Set LabelOverflowMode="Hide" or "Trim"
  • Reduce FontSize on DataLabelInfo
  • Consider hiding labels on smaller segments
Legend not showing:
  • Verify Legend property is set (not null)
  • Check that DockPosition is valid
  • Ensure first-level categories exist in data
图表未显示：
  • 验证ItemsSource绑定是否正确
  • 检查ValueMemberPath是否匹配数值类型属性
  • 确保至少定义了一个SunburstHierarchicalLevel
  • 验证数据集合不为空
分段尺寸不正确：
  • 确认ValueMemberPath指向数值类型属性
  • 检查数据中是否存在空值或负值
  • 确保属性名称完全匹配（区分大小写）
标签重叠：
  • 设置LabelOverflowMode="Hide"或"Trim"
  • 减小DataLabelInfo的FontSize
  • 考虑隐藏小分段上的标签
图例未显示：
  • 验证Legend属性已设置（不为null）
  • 检查DockPosition是否有效
  • 确保数据中存在第一级分类

Related Documentation

相关文档

For the parent library and other WPF components:
  • Implementing Syncfusion WPF Components - Main library guide
  • Implementing Charts - Other chart types (if available)
关于父库和其他WPF组件：
  • 实现Syncfusion WPF组件 - 主库指南
  • 实现图表 - 其他图表类型（若可用）