syncfusion-winui-pyramid-chart

用途

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

主要能力

层级可视化：以金字塔形状展示比例数据。
数据绑定：支持 XAML 与代码隐藏（code-behind）两种数据绑定方式，通过 ItemsSource、XBindingPath、YBindingPath 配置。
交互功能：工具提示、选择、分段爆炸。
外观定制：调色板、渐变、模板与样式。
图例支持：可配置图例，支持多种放置选项。
无障碍：内置键盘导航与屏幕阅读器支持。

使用方式

快速开始

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	选择模式配置

文档导航

入门：安装与 NuGet 包设置（Syncfusion.Chart.WinUI）、命名空间导入（Syncfusion.UI.Xaml.Charts）、基本初始化、视图模型与数据绑定模式。
外观与样式：预定义调色板画刷、自定义 PaletteBrushes、线性或径向渐变、颜色定制。
图例配置：启用与定位 ChartLegend、图例标题（Header 属性）、自定义图例图标、项间距与布局、复选框、切换系列可见性、背景与边框、自定义模板。
数据标签：启用数据标签、定位与格式化、自定义标签模板、智能放置策略、可见性与样式。
工具提示：启用工具提示（EnableTooltip 属性）、自定义外观与模板、格式化内容、交互行为。
选择：启用分段选择、配置选择模式、处理选择事件、选中分段的视觉反馈、多选场景。
爆炸分段：触摸/点击爆炸、编程方式爆炸、配置 ExplodeIndex、设置 ExplodeRadius、动画与视觉效果。
高级功能：图表标题与头部、分段间距（GapRatio）、渲染模式、金字塔高度与模式属性、性能优化、高级定制场景。

适用场景

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

限制

资料中未提供关于收费、价格、平台限制或具体性能指标的信息，暂未提供。