syncfusion-winui-pyramid-chart

实现 Syncfusion WinUI 金字塔图表

Syncfusion WinUI 金字塔图表（SfPyramidChart）是一种专用控件，用于以层级结构展示整体中的各项占比。它以金字塔结构显示数据，每个分段代表一个数据点，因此非常适合展示层级关系和占比比较。

何时使用此技能

在用户需要执行以下操作时使用此技能：

• 创建金字塔可视化效果 - 以金字塔结构展示层级数据或占比数据
• 设置 WinUI 金字塔图表 - 安装、配置并初始化 SfPyramidChart 控件
• 将数据绑定到金字塔图表 - 配置 ItemsSource、XBindingPath、YBindingPath 以进行数据绑定
• 自定义外观 - 为金字塔分段应用颜色、调色板、渐变或自定义样式
• 添加交互功能 - 启用工具提示、选择或分段分离功能，供用户交互
• 配置图例 - 添加图表图例，并自定义其图标、标题和位置
• 显示数据标签 - 在金字塔分段上显示值或标签
• 高级自定义 - 配置标题、分段间距、渲染模式或模板

组件概览

SfPyramidChart 控件提供：

• 层级可视化 - 以金字塔形状展示占比数据
• 丰富的数据绑定功能 - 支持 XAML 和代码隐藏中的数据绑定
• 交互功能 - 工具提示、选择和分段分离
• 丰富的自定义选项 - 调色板、渐变、模板和样式
• 图例支持 - 提供多种位置选项的可配置图例
• 无障碍功能 - 内置键盘导航和屏幕阅读器支持

文档与导航指南

入门

📄 阅读： references/getting-started.md

适用于以下需求：

• 安装和设置 NuGet 包（Syncfusion.Chart.WinUI）
• 导入命名空间（Syncfusion.UI.Xaml.Charts）
• 在 XAML 或 C# 中初始化基本的 SfPyramidChart
• 创建视图模型并设置数据绑定模式
• 使用 ItemsSource、XBindingPath、YBindingPath 的完整可运行示例
• 首次实现一个金字塔图表

外观与样式

📄 阅读： references/appearance.md

适用于以下需求：

• 预定义调色板画刷
• 配置自定义 PaletteBrushes
• 为分段应用线性或径向渐变
• 自定义颜色和视觉样式
• 创建美观的配色方案

图例配置

📄 阅读： references/legend.md

适用于以下需求：

• 启用并定位 ChartLegend
• 添加图例标题（Header 属性）
• 自定义图例图标（大小、可见性）
• 配置项目间距和布局
• 为图例项目添加复选框
• 实现系列可见性切换
• 自定义图例背景和边框
• 创建自定义图例模板

数据标签

📄 阅读： references/data-labels.md

适用于以下需求：

• 启用金字塔分段上的数据标签
• 定位和设置标签格式
• 创建自定义标签模板
• 智能标签定位策略
• 标签可见性和样式

工具提示

📄 阅读： references/tooltip.md

适用于以下需求：

• 启用工具提示（EnableTooltip 属性）
• 自定义工具提示外观
• 创建自定义工具提示模板
• 设置工具提示内容格式
• 交互式工具提示行为

选择

📄 阅读： references/selection.md

适用于以下需求：

• 启用分段选择
• 配置选择模式
• 处理选择事件
• 为选中的分段提供视觉反馈
• 多选场景

爆炸分段

📄 阅读： references/exploding-segments.md

适用于以下需求：

• 在触摸/点击时爆炸分段
• 以编程方式爆炸分段
• 配置 ExplodeIndex 属性
• 设置 ExplodeRadius 以指定爆炸距离
• 为爆炸分段添加动画和视觉效果

高级功能

📄 阅读： references/advanced-features.md

适用于以下需求：

• 添加图表标题和表头
• 配置分段间距（GapRatio）
• 设置渲染模式
• 调整金字塔高度和模式属性
• 优化性能
• 高级自定义场景

快速入门示例

基本金字塔图表实现

XAML：

<Window
    x:Class="PyramidChartApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
    xmlns:local="using:PyramidChartApp">
    
    <chart:SfPyramidChart x:Name="chart"
                          Header="Food Nutrition Pyramid"
                          ItemsSource="{Binding Data}"
                          XBindingPath="FoodName"
                          YBindingPath="Calories"
                          EnableTooltip="True"
                          ShowDataLabels="True">
        
        <chart:SfPyramidChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPyramidChart.DataContext>
        
        <chart:SfPyramidChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPyramidChart.Legend>
        
    </chart:SfPyramidChart>
</Window>

视图模型（C#）：

public class Model
{
    public string FoodName { get; set; }
    public double Calories { get; set; }
}

public class ChartViewModel
{
    public List<Model> Data { get; set; }
    
    public ChartViewModel()
    {
        Data = new List<Model>()
        {
            new Model { FoodName = "Sweet treats", Calories = 250 },
            new Model { FoodName = "Cheese", Calories = 402 },
            new Model { FoodName = "Vegetables", Calories = 65 },
            new Model { FoodName = "Fish", Calories = 206 },
            new Model { FoodName = "Fruits", Calories = 52 },
            new Model { FoodName = "Rice", Calories = 130 }
        };
    }
}

代码隐藏（C#）：

using Syncfusion.UI.Xaml.Charts;
using Microsoft.UI.Xaml;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        // Alternative: Create chart programmatically
        SfPyramidChart chart = new SfPyramidChart();
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        chart.SetBinding(SfPyramidChart.ItemsSourceProperty, 
            new Binding() { Path = new PropertyPath("Data") });
        chart.XBindingPath = "FoodName";
        chart.YBindingPath = "Calories";
        chart.Header = "Food Nutrition Pyramid";
        chart.Legend = new ChartLegend();
        chart.EnableTooltip = true;
        chart.ShowDataLabels = true;
        
        this.Content = chart;
    }
}

常见模式

模式 1：自定义调色板

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="customColors">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
            <SolidColorBrush Color="#00acc1"/>
            <SolidColorBrush Color="#0097a7"/>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfPyramidChart Palette="Custom"
                          PaletteBrushes="{StaticResource customColors}"
                          ItemsSource="{Binding Data}"
                          XBindingPath="Category"
                          YBindingPath="Value"/>
</Grid>

模式 2：带选择功能的交互式金字塔

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                      XBindingPath="Category"
                      YBindingPath="Value"
                      SelectionBehavior="SelectSingle">
    
    <chart:SfPyramidChart.SelectionBrush>
        <SolidColorBrush Color="#FF6B6B"/>
    </chart:SfPyramidChart.SelectionBrush>
    
</chart:SfPyramidChart>

模式 3：点击时爆炸分段

<chart:SfPyramidChart ItemsSource="{Binding Data}"
                      XBindingPath="Category"
                      YBindingPath="Value"
                      ExplodeOnClick="True"
                      ExplodeRadius="10"/>

模式 4：渐变样式的金字塔

<Grid>
    <Grid.Resources>
        <BrushCollection x:Key="gradientColors">
            <LinearGradientBrush>
                <GradientStop Offset="1" Color="#FFE7C7"/>
                <GradientStop Offset="0" Color="#FCB69F"/>
            </LinearGradientBrush>
            <LinearGradientBrush>
                <GradientStop Offset="1" Color="#fadd7d"/>
                <GradientStop Offset="0" Color="#fccc2d"/>
            </LinearGradientBrush>
        </BrushCollection>
    </Grid.Resources>
    
    <chart:SfPyramidChart Palette="Custom"
                          PaletteBrushes="{StaticResource gradientColors}"
                          ItemsSource="{Binding Data}"
                          XBindingPath="Category"
                          YBindingPath="Value"/>
</Grid>

关键属性

属性	类型	描述
ItemsSource	object	金字塔图表的数据源
XBindingPath	string	X 轴数据（标签）的属性路径
YBindingPath	string	Y 轴数据（值）的属性路径
Header	object	图表标题或表头内容
Legend	ChartLegend	图例配置对象
EnableTooltip	bool	启用/禁用悬停时的工具提示
ShowDataLabels	bool	显示/隐藏分段上的数据标签
Palette	ChartColorPalette	预定义调色板
PaletteBrushes	IList	自定义颜色集合
ExplodeOnClick	bool	启用点击时爆炸分段
ExplodeIndex	int	要爆炸的分段索引
ExplodeRadius	double	爆炸分段的距离
GapRatio	double	分段间距（0-1）
SelectionBehavior	SelectionBehavior	选择模式配置

常见用例

1. 食物/营养金字塔 - 展示食物类别或营养层级
2. 销售漏斗 - 将销售流程从潜在客户到转化阶段可视化
3. 人口统计 - 展示年龄或人口统计分布
4. 市场细分 - 展示市场份额或客户群体
5. 成本明细 - 按层级顺序可视化费用类别
6. 优先级分析 - 按降序展示任务或问题的优先级
7. 资源分配 - 展示各类别的资源分布

相关技能

• 实现 Syncfusion WinUI 组件 - 主要的 WinUI 组件库
• 如需了解其他图表类型，请浏览数据可视化类别

---

后续步骤： 根据具体需求阅读相应的参考文件。初次设置请从 getting-started.md 开始，也可以直接查看特定功能指南，快速实现目标功能。