Loading...
Loading...
Compare original and translation side by side
<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>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 }
};
}
}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;
}
}<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>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 }
};
}
}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;
}
}<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><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><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
SelectionBehavior="SelectSingle">
<chart:SfPyramidChart.SelectionBrush>
<SolidColorBrush Color="#FF6B6B"/>
</chart:SfPyramidChart.SelectionBrush>
</chart:SfPyramidChart><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
SelectionBehavior="SelectSingle">
<chart:SfPyramidChart.SelectionBrush>
<SolidColorBrush Color="#FF6B6B"/>
</chart:SfPyramidChart.SelectionBrush>
</chart:SfPyramidChart><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
ExplodeOnClick="True"
ExplodeRadius="10"/><chart:SfPyramidChart ItemsSource="{Binding Data}"
XBindingPath="Category"
YBindingPath="Value"
ExplodeOnClick="True"
ExplodeRadius="10"/><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><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>| 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 | 选择模式配置 |
getting-started.mdgetting-started.md