Back to Details

syncfusion-winui-polar-charts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Polar Charts in WinUI

在WinUI中实现极坐标图

Comprehensive guide for implementing the Syncfusion® WinUI Polar Chart (SfPolarChart) control in Windows App SDK applications. Polar charts visualize data in terms of values and angles, making them ideal for comparing multiple dimensions or showing directional data.
这是一份在Windows App SDK应用中实现Syncfusion® WinUI极坐标图（SfPolarChart）控件的全面指南。极坐标图基于数值和角度对数据进行可视化，非常适合用于多维度对比或展示方向性数据。

When to Use This Skill

何时使用本技能

Use this skill when the user needs to:
  • Create polar charts (also known as radar, spider, web, star, or cobweb charts)
  • Visualize multi-dimensional data with multiple categories around a center point
  • Compare multiple data series on the same radial scale
  • Display directional data (compass data, wind direction, plant distribution)
  • Show cyclical patterns or seasonal variations
  • Implement line or area series in polar coordinates
  • Customize grid line types (circular or polygon/radar style)
  • Configure axis types (Category, Numerical, DateTime, Logarithmic)
  • Add legends, data labels, and titles to polar charts
  • Apply custom styling and themes to polar visualizations
当用户需要完成以下需求时可使用本技能：
  • 创建极坐标图（也称为雷达图、蜘蛛图、蛛网图、星图、蜘蛛网图）
  • 可视化围绕中心点的多类别多维数据
  • 在同一径向刻度上对比多个数据系列
  • 展示方向性数据（罗盘数据、风向、植物分布）
  • 展示周期性模式或季节性变化
  • 在极坐标中实现折线或面积系列
  • 自定义网格线类型（圆形或多边形/雷达样式）
  • 配置坐标轴类型（类别轴、数值轴、日期时间轴、对数轴）
  • 为极坐标图添加图例、数据标签和标题
  • 为极坐标可视化效果应用自定义样式和主题

Component Overview

组件概览

Control: 
SfPolarChart

Namespace: 
Syncfusion.UI.Xaml.Charts

Package: 
Syncfusion.Chart.WinUI

Platform: WinUI 3 (Windows App SDK)
控件： 
SfPolarChart

命名空间： 
Syncfusion.UI.Xaml.Charts

包： 
Syncfusion.Chart.WinUI

平台： WinUI 3 (Windows App SDK)

Key Features

核心特性

  • ✓ Two series types: PolarLineSeries and PolarAreaSeries
  • ✓ Multiple series support: Compare different datasets on the same chart
  • ✓ Grid line types: Circle (default) or Polygon (radar/spider style)
  • ✓ Four axis types: Category, Numerical, DateTime, Logarithmic
  • ✓ Rich customization: Legends, data labels, titles, appearance
  • ✓ Interactive features: Toggle series visibility, checkbox legends
  • ✓ Start angle control: Rotate chart to different starting positions (0°, 90°, 180°, 270°)
  • ✓ Closed/Open paths: Control whether series form closed loops
  • ✓ MVVM-friendly: Full data binding support
  • ✓ 两种系列类型： PolarLineSeries和PolarAreaSeries
  • ✓ 支持多系列： 在同一张图表上对比不同数据集
  • ✓ 网格线类型： 圆形（默认）或多边形（雷达/蜘蛛样式）
  • ✓ 四种坐标轴类型： 类别轴、数值轴、日期时间轴、对数轴
  • ✓ 丰富的自定义能力： 图例、数据标签、标题、外观
  • ✓ 交互特性： 切换系列可见性、带复选框的图例
  • ✓ 起始角度控制： 将图表旋转到不同的起始位置（0°, 90°, 180°, 270°）
  • ✓ 闭合/开放路径： 控制系列是否形成闭环
  • ✓ 适配MVVM模式： 支持完整的数据绑定

Typical Use Cases

典型使用场景

  • Business analytics: Market analysis, competitive comparisons
  • Scientific visualization: Experiment results, multi-parameter analysis
  • Weather data: Wind patterns, precipitation by direction
  • Quality metrics: Performance across multiple dimensions
  • Sports analytics: Player statistics across different skills
  • Survey results: Opinion data across categories
  • 商业分析： 市场分析、竞品对比
  • 科学可视化： 实验结果、多参数分析
  • 气象数据： 风场模式、不同方向的降水量
  • 质量指标： 多维度的性能表现
  • 体育分析： 运动员不同技能维度的统计数据
  • 调研结果： 不同类别的意见数据

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Installation and NuGet package setup (
    Syncfusion.Chart.WinUI
    )
  • Basic polar chart implementation in XAML and C#
  • Creating data models and view models
  • Binding data to series (ItemsSource, XBindingPath, YBindingPath)
  • Setting up primary and secondary axes
  • Complete working example from scratch
📄 阅读： references/getting-started.md
  • 安装和NuGet包设置（
    Syncfusion.Chart.WinUI
    ）
  • 使用XAML和C#实现基础极坐标图
  • 创建数据模型和视图模型
  • 为系列绑定数据（ItemsSource、XBindingPath、YBindingPath）
  • 设置主轴和次轴
  • 从零开始的完整可运行示例

Series Types

系列类型

📄 Read: references/series-types.md
  • PolarLineSeries: Line-based polar series
  • PolarAreaSeries: Filled area polar series
  • Grid line types: Circle vs Polygon (radar/spider chart)
  • Closing paths: IsClosed property for open/closed series
  • Multiple series: Displaying multiple datasets together
  • Series customization and styling
📄 阅读： references/series-types.md
  • PolarLineSeries： 基于折线的极坐标系列
  • PolarAreaSeries： 填充面积的极坐标系列
  • 网格线类型： 圆形 vs 多边形（雷达/蜘蛛图）
  • 闭合路径： 控制系列开放/闭合的IsClosed属性
  • 多系列： 同时展示多个数据集
  • 系列自定义和样式设置

Axis Configuration

坐标轴配置

📄 Read: references/axis-configuration.md
  • CategoryAxis: Index-based axis for categorical data
  • NumericalAxis: Numeric values with range customization
  • DateTimeAxis: Time-based data plotting
  • LogarithmicAxis: Logarithmic scale for large value ranges
  • Axis range customization (Minimum, Maximum, Interval)
  • Axis events (ActualRangeChanged, LabelCreated)
📄 阅读： references/axis-configuration.md
  • CategoryAxis： 用于类别数据的基于索引的坐标轴
  • NumericalAxis： 支持范围自定义的数值坐标轴
  • DateTimeAxis： 基于时间的数据绘制
  • LogarithmicAxis： 用于大数值范围的对数刻度
  • 坐标轴范围自定义（最小值、最大值、间隔）
  • 坐标轴事件（ActualRangeChanged、LabelCreated）

Axis Customization

坐标轴自定义

📄 Read: references/axis-customization.md
  • Axis labels: Rotation, formatting, custom templates
  • Axis titles/headers: Adding and styling axis headers
  • Label style customization (fonts, colors, margins)
  • Header templates for advanced customization
  • Label format strings for different data types
📄 阅读： references/axis-customization.md
  • 坐标轴标签： 旋转、格式化、自定义模板
  • 坐标轴标题/头部： 添加和设置坐标轴头部样式
  • 标签样式自定义（字体、颜色、边距）
  • 用于高级自定义的头部模板
  • 适用于不同数据类型的标签格式字符串

Title and Legend

标题与图例

📄 Read: references/title-legend.md
  • Chart title: Header property and customization
  • Title alignment (left, center, right)
  • Legend configuration: Icons, spacing, placement
  • Checkbox legends for toggling series
  • Toggle series visibility interactively
  • Legend templates and background styling
📄 阅读： references/title-legend.md
  • 图表标题： Header属性及自定义
  • 标题对齐方式（左、中、右）
  • 图例配置： 图标、间距、位置
  • 带复选框的图例用于切换系列
  • 交互式切换系列可见性
  • 图例模板和背景样式

Data Labels

数据标签

📄 Read: references/data-labels.md
  • Enabling data labels (ShowDataLabels property)
  • Label context (YValue, XValue, Percentage)
  • Customization (fonts, colors, borders, margins)
  • Data label templates for advanced layouts
  • Format strings and rotation
  • UseSeriesPalette for color coordination
  • Connector lines between labels and data points
📄 阅读： references/data-labels.md
  • 启用数据标签（ShowDataLabels属性）
  • 标签上下文（YValue、XValue、百分比）
  • 自定义（字体、颜色、边框、边距）
  • 用于高级布局的数据标签模板
  • 格式字符串和旋转
  • 使用UseSeriesPalette进行颜色协调
  • 标签和数据点之间的连接线

Appearance and Styling

外观与样式

📄 Read: references/appearance.md
  • Default palette brushes
  • Custom palette brushes: Define your own color schemes
  • Gradient support: LinearGradientBrush and RadialGradientBrush
  • Applying gradients to entire charts or individual series
  • Series Fill property customization
  • Theme integration
📄 阅读： references/appearance.md
  • 默认调色板画笔
  • 自定义调色板画笔： 定义你自己的配色方案
  • 渐变支持： LinearGradientBrush和RadialGradientBrush
  • 为整个图表或单个系列应用渐变
  • 系列Fill属性自定义
  • 主题集成

Start Angle and Positioning

起始角度与定位

📄 Read: references/start-angle.md
  • StartAngle property (Rotate0, Rotate90, Rotate180, Rotate270)
  • Changing rendering position of the chart
  • Use cases for different starting angles
  • Aligning charts with specific orientations
📄 阅读： references/start-angle.md
  • StartAngle属性（Rotate0、Rotate90、Rotate180、Rotate270）
  • 修改图表的渲染位置
  • 不同起始角度的使用场景
  • 让图表对齐特定的方向

Troubleshooting

故障排查

📄 Read: references/troubleshooting.md
  • Common setup and installation issues
  • Data binding problems and solutions
  • Rendering and display issues
  • Performance optimization tips
  • Best practices and FAQ
📄 阅读： references/troubleshooting.md
  • 常见的设置和安装问题
  • 数据绑定问题及解决方案
  • 渲染和显示问题
  • 性能优化技巧
  • 最佳实践和常见问题解答

Quick Start Example

快速入门示例

Here's a minimal working example to create a polar area chart:
以下是创建极坐标面积图的最小可运行示例：

1. Data Model

1. 数据模型

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

2. View Model

2. 视图模型

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

3. XAML实现

xml
<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">
        
        <!-- Set DataContext to ViewModel -->
        <chart:SfPolarChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPolarChart.DataContext>
        
        <!-- Primary Axis (Angular) -->
        <chart:SfPolarChart.PrimaryAxis>
            <chart:CategoryAxis/>
        </chart:SfPolarChart.PrimaryAxis>
        
        <!-- Secondary Axis (Radial) -->
        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>
        
        <!-- Legend -->
        <chart:SfPolarChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPolarChart.Legend>
        
        <!-- Series -->
        <chart:SfPolarChart.Series>
            <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"
                                   XBindingPath="Direction"
                                   YBindingPath="Tree"
                                   Label="Tree"
                                   ShowDataLabels="True"/>
        </chart:SfPolarChart.Series>
        
    </chart:SfPolarChart>

</Window>
xml
<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">
        
        <!-- Set DataContext to ViewModel -->
        <chart:SfPolarChart.DataContext>
            <local:ChartViewModel/>
        </chart:SfPolarChart.DataContext>
        
        <!-- Primary Axis (Angular) -->
        <chart:SfPolarChart.PrimaryAxis>
            <chart:CategoryAxis/>
        </chart:SfPolarChart.PrimaryAxis>
        
        <!-- Secondary Axis (Radial) -->
        <chart:SfPolarChart.SecondaryAxis>
            <chart:NumericalAxis/>
        </chart:SfPolarChart.SecondaryAxis>
        
        <!-- Legend -->
        <chart:SfPolarChart.Legend>
            <chart:ChartLegend/>
        </chart:SfPolarChart.Legend>
        
        <!-- Series -->
        <chart:SfPolarChart.Series>
            <chart:PolarAreaSeries ItemsSource="{Binding PlantDetails}"
                                   XBindingPath="Direction"
                                   YBindingPath="Tree"
                                   Label="Tree"
                                   ShowDataLabels="True"/>
        </chart:SfPolarChart.Series>
        
    </chart:SfPolarChart>

</Window>

4. C# Code-Behind (Alternative)

4. C#代码后置（替代方案）

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

Common Patterns

常用模式

Pattern 1: Radar/Spider Chart (Polygon Grid)

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

Create a classic radar chart with polygon grid lines:
xml
<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>
创建带多边形网格线的经典雷达图：
xml
<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>

Pattern 2: Multiple Series Comparison

模式2：多系列对比

Compare multiple datasets on the same chart:
xml
<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>
在同一张图表上对比多个数据集：
xml
<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>

Pattern 3: Styled Data Labels

模式3：带样式的数据标签

Add formatted data labels with custom appearance:
xml
<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>
添加带自定义外观的格式化数据标签：
xml
<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>

Pattern 4: Custom Color Palette

模式4：自定义调色板

Apply custom colors to the chart:
xml
<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 content -->
    </chart:SfPolarChart>
</chart:SfPolarChart>
为图表应用自定义颜色：
xml
<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 content -->
    </chart:SfPolarChart>
</chart:SfPolarChart>

Key Properties

核心属性

SfPolarChart Properties

SfPolarChart属性

PropertyTypeDescription
Header
objectChart title/header
PrimaryAxis
ChartAxisAngular axis (around the circle)
SecondaryAxis
ChartAxisRadial axis (from center outward)
Series
ChartSeriesCollectionCollection of series to display
Legend
ChartLegendLegend configuration
GridLineType
PolarChartGridLineTypeCircle or Polygon
StartAngle
ChartPolarAngleStarting angle (0°, 90°, 180°, 270°)
PaletteBrushes
IList<Brush>Custom color palette
属性类型描述
Header
object图表标题/头部
PrimaryAxis
ChartAxis角度轴（围绕圆形的轴）
SecondaryAxis
ChartAxis径向轴（从中心向外的轴）
Series
ChartSeriesCollection要展示的系列集合
Legend
ChartLegend图例配置
GridLineType
PolarChartGridLineType圆形或多边形
StartAngle
ChartPolarAngle起始角度 (0°, 90°, 180°, 270°)
PaletteBrushes
IList<Brush>自定义调色板

PolarSeries Properties

PolarSeries属性

PropertyTypeDescription
ItemsSource
IEnumerableData source for the series
XBindingPath
stringProperty path for X values (categories)
YBindingPath
stringProperty path for Y values (numeric)
Label
stringSeries label for legend
ShowDataLabels
boolShow/hide data labels
IsClosed
boolClose the path (connect last to first)
Fill
BrushFill color for the series
Stroke
BrushStroke color for line series
DataLabelSettings
PolarDataLabelSettingsData label configuration
属性类型描述
ItemsSource
IEnumerable系列的数据源
XBindingPath
stringX值（类别）的属性路径
YBindingPath
stringY值（数值）的属性路径
Label
string图例使用的系列标签
ShowDataLabels
bool显示/隐藏数据标签
IsClosed
bool闭合路径（连接最后一个点和第一个点）
Fill
Brush系列的填充颜色
Stroke
Brush折线系列的描边颜色
DataLabelSettings
PolarDataLabelSettings数据标签配置

Axis Properties

坐标轴属性

PropertyTypeDescription
Header
objectAxis title
Minimum
doubleMinimum axis value
Maximum
doubleMaximum axis value
Interval
doubleInterval between labels
LabelRotation
doubleRotation angle for labels
LabelStyle
LabelStyleLabel formatting and appearance
属性类型描述
Header
object坐标轴标题
Minimum
double坐标轴最小值
Maximum
double坐标轴最大值
Interval
double标签之间的间隔
LabelRotation
double标签的旋转角度
LabelStyle
LabelStyle标签格式和外观

Common Use Cases

常见使用场景

Use Case 1: Market Analysis Dashboard

场景1：市场分析仪表盘

Scenario: Compare product performance across multiple metrics
Implementation: Multi-series polar chart with polygon grid
Read: references/series-types.md for multiple series
场景： 对比产品在多个指标下的表现
实现： 带多边形网格的多系列极坐标图
阅读： references/series-types.md 了解多系列相关内容

Use Case 2: Weather Data Visualization

场景2：气象数据可视化

Scenario: Display wind speed/direction or precipitation patterns
Implementation: Polar area chart with directional categories
Read: references/getting-started.md for data binding
场景： 展示风速/风向或降水模式
实现： 带方向类别的极坐标面积图
阅读： references/getting-started.md 了解数据绑定相关内容

Use Case 3: Skills Assessment

场景3：技能评估

Scenario: Visualize employee or player skills across dimensions
Implementation: Radar chart with data labels showing scores
Read: references/data-labels.md for label customization
场景： 可视化员工或运动员多维度技能
实现： 带展示分数的数据标签的雷达图
阅读： references/data-labels.md 了解标签自定义相关内容

Use Case 4: Quality Metrics

场景4：质量指标

Scenario: Show product quality across multiple test parameters
Implementation: Polar line chart with custom color coding
Read: references/appearance.md for styling
场景： 展示产品在多个测试参数下的质量
实现： 带自定义颜色编码的极坐标折线图
阅读： references/appearance.md 了解样式相关内容

Use Case 5: Scientific Data

场景5：科学数据

Scenario: Plot experimental results with logarithmic scale
Implementation: Polar chart with logarithmic axis
Read: references/axis-configuration.md for axis types
场景： 绘制带对数刻度的实验结果
实现： 带对数坐标轴的极坐标图
阅读： references/axis-configuration.md 了解坐标轴类型相关内容

Best Practices

最佳实践

  1. Choose the right series type:
    • Use PolarLineSeries for trends and comparisons
    • Use PolarAreaSeries to emphasize magnitude and coverage
  2. Grid line type selection:
    • Use Circle for continuous data and smoother appearance
    • Use Polygon for categorical data and classic radar chart look
  3. Axis configuration:
    • Use CategoryAxis for named categories (directions, labels)
    • Use NumericalAxis for numeric ranges on radial axis
    • Set appropriate Minimum, Maximum, and Interval for readability
  4. Data labels:
    • Enable for small to medium datasets (< 20 points)
    • Use rotation and connector lines for better positioning
    • Format values appropriately for the data type
  5. Multiple series:
    • Limit to 3-5 series for clarity
    • Use distinct colors and legend
    • Consider line series for overlapping data
  6. Performance:
    • Use ObservableCollection for dynamic data
    • Avoid excessive data points in a single series
    • Implement data virtualization for very large datasets
  7. Accessibility:
    • Provide meaningful chart titles and axis labels
    • Use high-contrast colors
    • Include legend for series identification
  1. 选择合适的系列类型：
    • 使用PolarLineSeries展示趋势和对比
    • 使用PolarAreaSeries强调量级和覆盖范围
  2. 网格线类型选择：
    • 连续数据和更流畅的外观使用圆形网格
    • 类别数据和经典雷达图外观使用多边形网格
  3. 坐标轴配置：
    • 命名类别（方向、标签）使用CategoryAxis
    • 径向轴的数值范围使用NumericalAxis
    • 设置合适的最小值、最大值和间隔以提升可读性
  4. 数据标签：
    • 中小型数据集（<20个数据点）建议启用
    • 使用旋转和连接线获得更好的位置效果
    • 根据数据类型适当格式化数值
  5. 多系列：
    • 为了清晰度限制在3-5个系列以内
    • 使用不同的颜色和图例
    • 重叠数据考虑使用折线系列
  6. 性能：
    • 动态数据使用ObservableCollection
    • 单个系列避免过多数据点
    • 超大数据集实现数据虚拟化
  7. 无障碍：
    • 提供有意义的图表标题和坐标轴标签
    • 使用高对比度颜色
    • 包含图例用于系列识别

Related Components

相关组件

  • Circular Charts: For pie, doughnut, and radial bar charts
  • Cartesian Charts: For traditional X-Y coordinate charts (line, bar, column)
  • Gauges: For single-value radial indicators
  • 环形图： 用于饼图、 doughnut图和径向条形图
  • 笛卡尔图： 用于传统的X-Y坐标图表（折线图、条形图、柱形图）
  • 仪表盘： 用于单值径向指示器

Resources

资源

Next Steps: Navigate to a specific reference document above to implement polar chart features in your WinUI application.
下一步： 导航到上面的特定参考文档，在你的WinUI应用中实现极坐标图功能。