syncfusion-winui-pyramid-chart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WinUI Pyramid Charts

实现 Syncfusion WinUI 金字塔图表

The Syncfusion WinUI Pyramid Chart (SfPyramidChart) is a specialized control for visualizing proportions of a total in hierarchies. It displays data in a pyramid structure where each segment represents a data point, making it ideal for showing hierarchical relationships and proportional comparisons.

Syncfusion WinUI 金字塔图表（SfPyramidChart）是专门用于可视化层级结构中总量占比的控件。它以金字塔结构展示数据，每个分段代表一个数据点，非常适合展示层级关系和比例对比。

When to Use This Skill

何时使用本技能

Use this skill when the user needs to:

Create pyramid visualizations - Display hierarchical or proportional data in a pyramid structure
Set up WinUI pyramid charts - Install, configure, and initialize SfPyramidChart controls
Bind data to pyramid charts - Configure ItemsSource, XBindingPath, YBindingPath for data binding
Customize appearance - Apply colors, palettes, gradients, or custom styling to pyramid segments
Add interactivity - Enable tooltips, selection, or exploding segments for user interaction
Configure legends - Add and customize chart legends with icons, titles, and placement
Display data labels - Show values or labels on pyramid segments
Advanced customization - Configure titles, segment spacing, rendering modes, or templates

当用户需要实现以下需求时可使用本技能：

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

Component Overview

组件概览

The SfPyramidChart control provides:

Hierarchical visualization - Pyramid-shaped display for proportional data
Rich data binding - XAML and code-behind data binding support
Interactive features - Tooltips, selection, exploding segments
Extensive customization - Palettes, gradients, templates, and styling
Legend support - Configurable legends with multiple placement options
Accessibility - Built-in support for keyboard navigation and screen readers

SfPyramidChart 控件提供以下能力：

分层可视化 - 针对比例数据的金字塔形态展示
丰富的数据绑定能力 - 支持XAML和代码后置的数据绑定
交互特性 - 工具提示、选择、分段爆炸效果
高度可定制 - 调色板、渐变、模板和样式配置
图例支持 - 支持多位置摆放的可配置图例
无障碍支持 - 内置键盘导航和屏幕阅读器支持

Documentation and Navigation Guide

文档和导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

When you need:

Installation and NuGet package setup (Syncfusion.Chart.WinUI)
Namespace imports (Syncfusion.UI.Xaml.Charts)
Basic SfPyramidChart initialization in XAML or C#
Creating view models and data binding patterns
Complete working example with ItemsSource, XBindingPath, YBindingPath
First pyramid chart implementation

📄 阅读： references/getting-started.md

适用于以下场景：

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

Appearance and Styling

外观和样式

📄 Read: references/appearance.md

When you need:

Predefined palette brushes
Custom PaletteBrushes configuration
Applying linear or radial gradients to segments
Color customization and visual styling
Creating attractive color schemes

📄 阅读： references/appearance.md

适用于以下场景：

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

Legend Configuration

图例配置

📄 Read: references/legend.md

When you need:

Enabling and positioning ChartLegend
Adding legend titles (Header property)
Customizing legend icons (size, visibility)
Configuring item spacing and layout
Adding checkboxes to legend items
Implementing toggle series visibility
Customizing legend background and borders
Creating custom legend templates

📄 阅读： references/legend.md

适用于以下场景：

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

Data Labels

数据标签

📄 Read: references/data-labels.md

When you need:

Enabling data labels on pyramid segments
Positioning and formatting labels
Creating custom label templates
Smart label placement strategies
Label visibility and styling

📄 阅读： references/data-labels.md

适用于以下场景：

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

Tooltips

工具提示

📄 Read: references/tooltip.md

When you need:

Enabling tooltips (EnableTooltip property)
Customizing tooltip appearance
Creating custom tooltip templates
Formatting tooltip content
Interactive tooltip behavior

📄 阅读： references/tooltip.md

适用于以下场景：

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

Selection

选择功能

📄 Read: references/selection.md

When you need:

Enabling segment selection
Configuring selection modes
Handling selection events
Visual feedback for selected segments
Multi-selection scenarios

📄 阅读： references/selection.md

适用于以下场景：

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

Exploding Segments

分段爆炸效果

📄 Read: references/exploding-segments.md

When you need:

Exploding segments on touch/click
Programmatic segment explosion
Configuring ExplodeIndex property
Setting ExplodeRadius for explosion distance
Animation and visual effects for exploded segments

📄 阅读： references/exploding-segments.md

适用于以下场景：

触摸/点击时触发分段爆炸
程序化控制分段爆炸
配置ExplodeIndex属性
设置ExplodeRadius指定爆炸距离
爆炸分段的动画和视觉效果

Advanced Features

高级特性

📄 Read: references/advanced-features.md

When you need:

Adding chart titles and headers
Configuring segment spacing (GapRatio)
Setting rendering modes
Adjusting pyramid height and mode properties
Performance optimization
Advanced customization scenarios

📄 阅读： references/advanced-features.md

适用于以下场景：

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

Quick Start Example

快速入门示例

Basic Pyramid Chart Implementation

基础金字塔图表实现

XAML:

xml

<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>

View Model (C#):

csharp

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 }
        };
    }
}

Code-Behind (C#):

csharp

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;
    }
}

XAML：

xml

<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#）：

csharp

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#）：

csharp

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

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        // 替代方案：通过代码创建图表
        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;
    }
}

Common Patterns

常用模式

Pattern 1: Custom Color Palette

模式1：自定义调色板

xml

<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>

xml

<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>

Pattern 2: Interactive Pyramid with Selection

模式2：支持选择的交互金字塔图表

xml

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

xml

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

Pattern 3: Exploding Segment on Click

模式3：点击触发分段爆炸

xml

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

xml

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

Pattern 4: Gradient-Styled Pyramid

模式4：渐变样式金字塔图表

xml

<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>

xml

<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>

Key Properties

核心属性

Property	Type	Description
ItemsSource	object	Data source for the pyramid chart
XBindingPath	string	Property path for X-axis data (labels)
YBindingPath	string	Property path for Y-axis data (values)
Header	object	Chart title or header content
Legend	ChartLegend	Legend configuration object
EnableTooltip	bool	Enable/disable tooltips on hover
ShowDataLabels	bool	Show/hide data labels on segments
Palette	ChartColorPalette	Predefined color palette
PaletteBrushes	IList<Brush>	Custom color collection
ExplodeOnClick	bool	Enable segment explosion on click
ExplodeIndex	int	Index of segment to explode
ExplodeRadius	double	Distance for exploded segment
GapRatio	double	Spacing between segments (0-1)
SelectionBehavior	SelectionBehavior	Selection mode configuration

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

Common Use Cases

常见使用场景

Food/Nutrition Pyramids - Display food groups or nutritional hierarchies
Sales Funnels - Visualize sales pipeline stages from leads to conversions
Population Demographics - Show age or demographic distributions
Market Segmentation - Display market share or customer segments
Cost Breakdowns - Visualize expense categories in hierarchical order
Priority Analysis - Show task or issue priorities in descending order
Resource Allocation - Display resource distribution across categories

食物/营养金字塔 - 展示食物分类或营养层级
销售漏斗 - 可视化从线索到转化的销售 pipeline 阶段
人口统计 - 展示年龄或人口分布
市场细分 - 展示市场份额或客户细分
成本拆分 - 按层级顺序可视化支出分类
优先级分析 - 按降序展示任务或问题优先级
资源分配 - 展示跨分类的资源分布

syncfusion-winui-pyramid-chart

Original

Translation

Implementing Syncfusion WinUI Pyramid Charts

实现 Syncfusion WinUI 金字塔图表

When to Use This Skill

何时使用本技能

Component Overview

组件概览

Documentation and Navigation Guide

文档和导航指南

Getting Started

入门指南

Appearance and Styling

外观和样式

Legend Configuration

图例配置

Data Labels

数据标签

Tooltips

工具提示

Selection

选择功能

Exploding Segments

分段爆炸效果

Advanced Features

高级特性

Quick Start Example

快速入门示例

Basic Pyramid Chart Implementation

基础金字塔图表实现

Common Patterns

常用模式

Pattern 1: Custom Color Palette

模式1：自定义调色板

Pattern 2: Interactive Pyramid with Selection

模式2：支持选择的交互金字塔图表

Pattern 3: Exploding Segment on Click

模式3：点击触发分段爆炸

Pattern 4: Gradient-Styled Pyramid

模式4：渐变样式金字塔图表

Key Properties

核心属性

Common Use Cases

常见使用场景

Related Skills

相关技能