syncfusion-winui-polar-charts

在 WinUI 中实现极坐标图表

在 Windows App SDK 应用程序中实现 Syncfusion® WinUI 极坐标图表（SfPolarChart）控件的综合指南。极坐标图表以数值和角度的形式呈现数据，非常适合比较多个维度或展示方向性数据。

何时使用此技能

当用户需要以下功能时，请使用此技能：

• 创建极坐标图表（也称为雷达图、蜘蛛网图、网状图、星形图或蛛网图）
• 可视化多维数据，在中心点周围呈现多个类别
• 在同一径向刻度上比较多个数据系列
• 展示方向性数据（罗盘数据、风向、植物分布）
• 显示周期性模式或季节性变化
• 在极坐标中实现折线或面积系列
• 自定义网格线类型（圆形或多边形／雷达样式）
• 配置坐标轴类型（Category、Numerical、DateTime、Logarithmic）
• 为极坐标图表添加图例、数据标签和标题
• 为极坐标可视化应用自定义样式和主题

组件概览

控件： SfPolarChart
命名空间： Syncfusion.UI.Xaml.Charts
包： Syncfusion.Chart.WinUI
平台： WinUI 3（Windows App SDK）

主要功能

• ✓ 两种系列类型： PolarLineSeries 和 PolarAreaSeries
• ✓ 支持多个系列： 在同一图表上比较不同数据集
• ✓ 网格线类型： 圆形（默认）或多边形（雷达／蜘蛛网样式）
• ✓ 四种坐标轴类型： Category、Numerical、DateTime、Logarithmic
• ✓ 丰富的自定义选项： 图例、数据标签、标题、外观
• ✓ 交互功能： 切换系列可见性、复选框图例
• ✓ 起始角度控制： 将图表旋转到不同的起始位置（0°、90°、180°、270°）
• ✓ 闭合／开放路径： 控制系列是否形成闭合环路
• ✓ 适用于 MVVM： 完整支持数据绑定

典型用例

• 商业分析： 市场分析、竞争对比
• 科学可视化： 实验结果、多参数分析
• 天气数据： 风向模式、按方向统计的降水量
• 质量指标： 跨多个维度的性能表现
• 体育分析： 球员在不同技能方面的数据统计
• 调查结果： 跨类别的意见数据

文档和导航指南

快速入门

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置（Syncfusion.Chart.WinUI）
• 使用 XAML 和 C# 实现基本极坐标图表
• 创建数据模型和视图模型
• 将数据绑定到系列（ItemsSource、XBindingPath、YBindingPath）
• 设置主坐标轴和次坐标轴
• 从头开始的完整示例

系列类型

📄 阅读： references/series-types.md

• PolarLineSeries： 基于折线的极坐标系列
• PolarAreaSeries： 填充区域的极坐标系列
• 网格线类型： 圆形与多边形（雷达／蜘蛛网图）
• 闭合路径： 使用 IsClosed 属性设置开放或闭合系列
• 多个系列： 同时显示多个数据集
• 系列自定义和样式设置

坐标轴配置

📄 阅读： references/axis-configuration.md

• CategoryAxis： 用于分类数据的基于索引的坐标轴
• NumericalAxis： 支持范围自定义的数值
• DateTimeAxis： 基于时间的数据绘图
• LogarithmicAxis： 用于较大数值范围的对数刻度
• 坐标轴范围自定义（Minimum、Maximum、Interval）
• 坐标轴事件（ActualRangeChanged、LabelCreated）

坐标轴自定义

📄 阅读： references/axis-customization.md

• 坐标轴标签： 旋转、格式设置、自定义模板
• 坐标轴标题／表头： 添加和设置坐标轴表头样式
• 标签样式自定义（字体、颜色、边距）
• 用于高级自定义的表头模板
• 适用于不同数据类型的标签格式字符串

标题和图例

📄 阅读： references/title-legend.md

• 图表标题： 标题属性和自定义
• 标题对齐方式（左对齐、居中、右对齐）
• 图例配置： 图标、间距、位置
• 可通过复选框图例切换数据系列
• 交互式切换数据系列的可见性
• 图例模板和背景样式

数据标签

📄 阅读： references/data-labels.md

• 启用数据标签（ShowDataLabels 属性）
• 标签上下文（YValue、XValue、Percentage）
• 自定义（字体、颜色、边框、边距）
• 用于高级布局的数据标签模板
• 格式字符串和旋转
• 使用 UseSeriesPalette 协调颜色
• 连接标签和数据点的连接线

外观和样式

📄 阅读： references/appearance.md

• 默认调色板画刷
• 自定义调色板画刷： 定义自己的配色方案
• 渐变支持： LinearGradientBrush 和 RadialGradientBrush
• 将渐变应用于整个图表或单个数据系列
• 自定义数据系列 Fill 属性
• 主题集成

起始角度和定位

📄 阅读： references/start-angle.md

• StartAngle 属性（Rotate0、Rotate90、Rotate180、Rotate270）
• 更改图表的渲染位置
• 不同起始角度的使用场景
• 按特定方向对齐图表

故障排除

📄 阅读： references/troubleshooting.md

• 常见的设置和安装问题
• 数据绑定问题及解决方案
• 渲染和显示问题
• 性能优化提示
• 最佳实践和常见问题解答

快速入门示例

以下是创建极坐标面积图的最简可运行示例：

1. 数据模型

public class PlantData
{
    public string Direction { get; set; }
    public double Tree { get; set; }
}

2. 视图模型

using System.Collections.ObjectModel;

public class ChartViewModel
{
    public ObservableCollection<PlantData> PlantDetails { get; set; }

    public ChartViewModel()
    {
        PlantDetails = new ObservableCollection<PlantData>()
        {
            new PlantData { Direction = "North", Tree = 80 },
            new PlantData { Direction = "NorthEast", Tree = 87 },
            new PlantData { Direction = "East", Tree = 78 },
            new PlantData { Direction = "SouthEast", Tree = 85 },
            new PlantData { Direction = "South", Tree = 81 },
            new PlantData { Direction = "SouthWest", Tree = 88 },
            new PlantData { Direction = "West", Tree = 80 },
            new PlantData { Direction = "NorthWest", Tree = 85 }
        };
    }
}

3. XAML 实现

<Window
    x:Class="PolarChartDemo.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:PolarChartDemo">

    <chart:SfPolarChart Header="Plant Distribution">
        
        
        <chart:SfPolarChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPolarChart.DataContext>
        
        
        <chart:SfPolarChart.PrimaryAxis>
            <chart:CategoryAxis/>
        </chart:SfPolarChart.PrimaryAxis>
        
        
        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>
        
        
        <chart:SfPolarChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPolarChart.Legend>
        
        
        <chart:SfPolarChart.Series>
            <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"
                                   XBindingPath="Direction"
                                   YBindingPath="Tree"
                                   Label="Tree"
                                   ShowDataLabels="True"/>
        </chart:SfPolarChart.Series>
        
    </chart:SfPolarChart>

</Window>

4. C# 代码隐藏（替代方案）

using Syncfusion.UI.Xaml.Charts;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
        
        // Create chart
        SfPolarChart chart = new SfPolarChart();
        chart.Header = "Plant Distribution";
        
        // Set ViewModel
        ChartViewModel viewModel = new ChartViewModel();
        chart.DataContext = viewModel;
        
        // Configure axes
        chart.PrimaryAxis = new CategoryAxis();
        chart.SecondaryAxis = new NumericalAxis();
        
        // Add legend
        chart.Legend = new ChartLegend();
        
        // Create series
        PolarAreaSeries series = new PolarAreaSeries();
        series.XBindingPath = "Direction";
        series.YBindingPath = "Tree";
        series.Label = "Tree";
        series.ShowDataLabels = true;
        series.SetBinding(
            ChartSeriesBase.ItemsSourceProperty,
            new Binding() { Path = new PropertyPath("PlantDetails") });
        
        chart.Series.Add(series);
        
        // Add chart to window
        this.Content = chart;
    }
}

常见模式

模式 1：雷达图/蜘蛛网图（多边形网格）

创建带有多边形网格线的经典雷达图：

<chart:SfPolarChart GridLineType="Polygon">
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis/>
    </chart:SfPolarChart.PrimaryAxis>
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.SecondaryAxis>
    
    <chart:PolarLineSeries ItemsSource="{Binding Data}"
                           XBindingPath="Category"
                           YBindingPath="Value"
                           IsClosed="True"/>
</chart:SfPolarChart>

模式 2：多数据系列对比

在同一图表上比较多个数据集：

<chart:SfPolarChart Header="Multi-Series Comparison">
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend>
    
    <chart:SfPolarChart.Series>
        <chart:PolarLineSeries ItemsSource="{Binding SeriesA}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product A"/>
        
        <chart:PolarLineSeries ItemsSource="{Binding SeriesB}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product B"/>
        
        <chart:PolarLineSeries ItemsSource="{Binding SeriesC}"
                               XBindingPath="Category"
                               YBindingPath="Value"
                               Label="Product C"/>
    </chart:SfPolarChart.Series>
</chart:SfPolarChart>

模式 3：样式化数据标签

添加具有自定义外观的格式化数据标签：

<chart:PolarAreaSeries ShowDataLabels="True">
    <chart:PolarAreaSeries.DataLabelSettings>
        <chart:PolarDataLabelSettings Context="YValue"
                                      Foreground="White"
                                      Background="#1E88E5"
                                      BorderBrush="White"
                                      BorderThickness="1"
                                      FontSize="12"
                                      FontFamily="Calibri"
                                      Format="#.0"/>
    </chart:PolarAreaSeries.DataLabelSettings>
</chart:PolarAreaSeries>

模式 4：自定义调色板

为图表应用自定义颜色：

<chart:SfPolarChart>
    <chart:SfPolarChart.Resources>
        <BrushCollection x:Key="customBrushes">
            <SolidColorBrush Color="#4dd0e1"/>
            <SolidColorBrush Color="#26c6da"/>
            <SolidColorBrush Color="#00bcd4"/>
        </BrushCollection>
    </chart:SfPolarChart.Resources>
    
    <chart:SfPolarChart PaletteBrushes="{StaticResource customBrushes}">
        
    </chart:SfPolarChart>
</chart:SfPolarChart>

主要属性

SfPolarChart 属性

属性	类型	说明
Header	object	图表标题/页眉
PrimaryAxis	ChartAxis	角轴（沿圆周）
SecondaryAxis	ChartAxis	径向轴（从中心向外）
Series	ChartSeriesCollection	要显示的数据系列集合
Legend	ChartLegend	图例配置
GridLineType	PolarChartGridLineType	圆形或多边形
StartAngle	ChartPolarAngle	起始角度（0°、90°、180°、270°）
PaletteBrushes	IList	自定义调色板

PolarSeries 属性

属性	类型	说明
ItemsSource	IEnumerable	数据系列的数据源
XBindingPath	string	X 值（类别）的属性路径
YBindingPath	string	Y 值（数值）的属性路径
Label	string	用于图例的数据系列标签
ShowDataLabels	bool	显示/隐藏数据标签
IsClosed	bool	闭合路径（连接最后一个点和第一个点）
Fill	Brush	数据系列的填充颜色
Stroke	Brush	折线数据系列的描边颜色
DataLabelSettings	PolarDataLabelSettings	数据标签配置

坐标轴属性

属性	类型	说明
Header	object	坐标轴标题
Minimum	double	坐标轴最小值
Maximum	double	坐标轴最大值
Interval	double	标签间隔
LabelRotation	double	标签旋转角度
LabelStyle	LabelStyle	标签格式和外观

常见使用场景

用例 1：市场分析仪表板

场景： 比较产品在多个指标上的表现
实现： 使用多系列极坐标图和多边形网格
阅读： references/series-types.md，了解多个系列

用例 2：天气数据可视化

场景： 展示风速／风向或降水模式
实现： 使用带方向类别的极区图
阅读： references/getting-started.md，了解数据绑定

用例 3：技能评估

场景： 可视化员工或玩家在不同维度上的技能
实现： 使用带有分数数据标签的雷达图
阅读： references/data-labels.md，了解标签自定义

用例 4：质量指标

场景： 展示产品在多个测试参数上的质量
实现： 使用自定义颜色编码的极坐标折线图
阅读： references/appearance.md，了解样式设置

用例 5：科学数据

场景： 使用对数刻度绘制实验结果
实现： 使用带对数轴的极坐标图
阅读： references/axis-configuration.md，了解轴类型

最佳实践

1. 选择合适的系列类型：

   • 使用 PolarLineSeries 展示趋势和比较结果
   • 使用 PolarAreaSeries 突出显示数值大小和覆盖范围

2. 选择网格线类型：

   • 使用 Circle 展示连续数据，呈现更平滑的外观
   • 使用 Polygon 展示类别数据，呈现经典雷达图样式

3. 轴配置：

   • 使用 CategoryAxis 表示命名类别（方向、标签）
   • 使用 NumericalAxis 表示径向轴上的数值范围
   • 设置合适的 Minimum、Maximum 和 Interval，以提高可读性

4. 数据标签：

   • 对小到中型数据集（< 20 个点）启用数据标签
   • 使用旋转和连接线改善标签位置
   • 根据数据类型设置合适的数值格式

5. 多个系列：

   • 为保证清晰度，将系列数量限制在 3-5 个
   • 使用不同颜色并显示图例
   • 对于重叠数据，可考虑使用折线系列

6. 性能：

   • 使用 ObservableCollection 处理动态数据
   • 避免在单个系列中放入过多数据点
   • 为超大型数据集实现数据虚拟化

7. 无障碍访问：

   • 提供有意义的图表标题和轴标签
   • 使用高对比度颜色
   • 添加图例以便识别系列

相关组件

• 圆形图表： 用于饼图、圆环图和径向条形图
• 笛卡尔图表： 用于传统的 X-Y 坐标图表（折线图、条形图、柱形图）
• 仪表盘： 用于显示单值的径向指示器

资源

• 官方文档
• API 参考 - SfPolarChart
• GitHub 示例
• 知识库

---

后续步骤： 前往上方的特定参考文档，在 WinUI 应用程序中实现极坐标图功能。