syncfusion-winui-cartesian-charts

实现 Syncfusion WinUI 笛卡尔图表

Syncfusion WinUI 笛卡尔图表（SfCartesianChart）提供了一种强大的数据可视化方式，兼具高度交互性、灵活性和性能。它支持多种系列类型、丰富的自定义选项，以及缩放、平移、工具提示和选择等交互功能。

何时使用此技能

在用户需要以下功能时使用此技能：

• 创建任意笛卡尔图表：在 WinUI 应用程序中创建柱形图、折线图、面积图、条形图、散点图、气泡图、金融图表或堆积图
• 配置图表轴：配置 CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis 或多个轴
• 实现高性能图表：使用大型数据集（快速系列可处理数百万个数据点）
• 添加交互功能：添加缩放、平移、工具提示、轨迹球、十字准线或选择功能
• 自定义图表外观：自定义图例、数据标签、颜色、主题和样式
• 显示金融数据：显示 OHLC 数据或蜡烛图
• 比较同一图表区域中的多个数据系列
• 处理触摸和鼠标交互以探索数据

组件概览

SfCartesianChart 是 Syncfusion 面向 WinUI 应用程序的主要图表控件，采用二维坐标系。它支持 15 种以上的系列类型（基本、专用、堆积和快速系列）、四种轴类型（Numerical、Category、DateTime、Logarithmic），并通过优化的快速系列处理数百万个数据点。它还提供缩放、平移、工具提示、轨迹球、十字准线以及完整的自定义选项。

核心架构

SfCartesianChart
├── XAxes Collection (1+ horizontal axes)
├── YAxes Collection (1+ vertical axes)
├── Series Collection (1+ data series)
│   ├── Basic: ColumnSeries, BarSeries, LineSeries, AreaSeries
│   ├── Specialized: ScatterSeries, BubbleSeries, CandleSeries, OHLCSeries
│   ├── Stacked: StackedColumnSeries, StackedAreaSeries, Stacked100Series
│   └── Fast: FastLineBitmapSeries, FastColumnBitmapSeries, FastScatterBitmapSeries
├── Legend (optional)
├── ZoomPanBehavior (optional)
└── Visual Elements (Header, ChartArea, PlotArea, PaletteBrushes)

核心功能一览

• 数据绑定：直接绑定到 ObservableCollection、List 或任何 IEnumerable，并自动更新
• 多个系列：在一个图表中显示不限数量的系列，自动分配颜色并协调图例
• 实时更新：支持动态数据，可高效渲染实时仪表板和监控界面
• 触摸和鼠标：全面支持移动端和桌面场景中的手势（捏合缩放、平移、悬停工具提示）
• 无障碍功能：遵循 WinUI 标准，支持键盘导航和屏幕阅读器
• 响应式：适应容器大小变化，并自动优化轴标签

何时选择 SfCartesianChart 而非其他图表类型

适用于以下场景：数据包含两个定量维度（X 和 Y），需要进行时间序列分析、类别比较、趋势分析、金融数据（OHLC）或科学绘图，或者任何需要矩形坐标系的场景。

以下场景可考虑其他图表类型：

• 循环关系 → 使用 SfCircularChart（饼图、圆环图、径向条形图）
• 分层数据 → 使用 SfPyramidChart 或 SfFunnelChart
• 方向性数据 → 使用 SfPolarChart

主要功能

系列类型

• **基本系列：**柱形图、条形图、折线图、面积图
• **专用系列：**散点图、气泡图、蜡烛图、OHLC
• **堆积系列：**堆积柱形图／条形图／折线图／面积图、Stacked100
• **快速系列：**FastLine、FastLineBitmap、FastColumn、FastScatter、FastStepLine（针对数百万个数据点进行了优化）

坐标轴

• **类型：**NumericalAxis、CategoryAxis、DateTimeAxis、LogarithmicAxis
• **功能：**多个轴、自定义间隔、范围自定义、反向／对置定位
• **自定义：**标签、标题、网格线、刻度线、边距、自动滚动

交互功能

• 缩放和平移（触摸／鼠标）
• 支持自定义模板的工具提示
• 用于跟踪多个系列的轨迹球
• 用于精确读取数据的十字准线
• 数据段和系列选择

自定义

• 支持定位和模板的图例
• 支持定位和格式设置的数据标签
• 图表标题和页眉
• ChartArea、PlotArea 样式、颜色调色板和主题

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 安装 Syncfusion.Chart.WinUI NuGet 包
• 命名空间导入和控件初始化
• 使用数据绑定创建 ViewModel
• 设置 XAxes 和 YAxes
• 添加第一个系列
• 使用 ColumnSeries 的完整可运行示例

坐标轴配置

坐标轴类型

📄 阅读： references/axis-types.md

• NumericalAxis - 用于数值数据，支持自定义间隔和范围
• CategoryAxis - 用于分类数据，支持基于索引的绘图和标签放置选项
• DateTimeAxis - 用于时间序列数据，支持日期/时间格式和间隔类型
• LogarithmicAxis - 用于对数刻度，支持自定义底数
• 各种坐标轴类型的适用场景
• 间隔配置和范围自定义

坐标轴自定义

📄 阅读： references/axis-customization.md

• 坐标轴标签（旋转、格式化、样式）
• 坐标轴页眉和标题
• 网格线（主/次、可见性、样式）
• 刻度线（自定义和样式）以及坐标轴线样式
• 内边距和范围内边距
• IsInversed 和 OpposedPosition 属性
• 使用 AutoScrollingDelta 自动滚动

多坐标轴

📄 阅读： references/multiple-axes.md

• 使用 XAxes 和 YAxes 集合
• 将系列分配到特定坐标轴（XAxisName、YAxisName）
• 使用不同刻度排列多个系列
• 堆叠式与并排式坐标轴布局
• 坐标轴事件（ActualRangeChanged、LabelCreated）

系列类型

基本系列

📄 阅读： references/basic-series.md

• ColumnSeries - 用于比较类别的垂直柱形
• BarSeries - 用于排名或比较的水平条形
• LineSeries - 通过连接数据点展示随时间变化的趋势
• AreaSeries - 通过填充区域展示数值和趋势
• ItemsSource、XBindingPath、YBindingPath 配置
• 常用属性和样式

专用系列

📄 阅读： references/specialized-series.md

• ScatterSeries - 用于相关性分析的 XY 图
• BubbleSeries - 用大小表示三维数据
• CandleSeries - 使用填充实体展示金融 OHLC 数据
• OHLCSeries - 开盘价-最高价-最低价-收盘价金融数据
• 金融数据绑定模式
• 气泡大小配置

堆叠系列

📄 阅读： references/stacked-series.md

• 堆叠系列 - Column、Bar、Line、Area（展示累计总量）
• Stacked100 系列 - 基于百分比的比较（100% 堆叠）
• 对多个堆叠系列进行分组
• 数据要求和协调
• 用于整体与部分分析的场景

快速系列（高性能）

📄 阅读： references/fast-series.md

• FastLineSeries - 使用折线渲染大型线形数据集
• FastLineBitmapSeries - 使用 WriteableBitmap 渲染（数百万个数据点）
• FastColumnBitmapSeries - 高性能柱形渲染
• FastScatterBitmapSeries - 大型散点图
• FastStepLineBitmapSeries - 经过性能优化的阶梯折线图
• 为基于位图的系列启用 EnableAntiAliasing
• 快速系列与标准系列的适用场景
• 性能最佳实践

交互功能

工具提示、轨迹球和十字线

📄 阅读： references/tooltip-trackball-crosshair.md

• 工具提示 - 启用 EnableTooltip、自定义模板和样式
• 轨迹球 - 使用垂直线指示器跟踪多个系列
• 十字线 - 使用水平线和垂直线精确读取数据
• 触控和鼠标交互模式
• 自定义内容和位置

选择

📄 阅读： references/selection.md

• EnableSegmentSelection 和 EnableSeriesSelection
• 选择模式（Single、Multiple）
• SelectedIndex 属性
• SelectionBehavior 配置
• 自定义视觉反馈
• 选择事件

缩放和平移

📄 阅读： references/zooming-panning.md

• EnableZooming 属性
• ZoomMode（X、Y、XY）
• 使用 EnablePanning 浏览数据
• 触控手势（双指缩放）
• 鼠标滚轮缩放
• 程序化缩放（ZoomPosition、ZoomFactor）
• 重置缩放功能和 Zoom 工具栏

自定义

数据标签

📄 阅读： references/data-labels.md

• ShowDataLabels 属性
• DataLabelSettings 配置
• 标签位置（Inner、Outer、Auto）
• 标签模板和格式设置
• 样式自定义（字体、颜色）
• 旋转和对齐

图例

📄 阅读： references/legend.md

• 启用 ChartLegend
• 位置和布局选项
• 自定义图例模板
• 图标类型和样式
• 单击图例项以切换系列可见性
• 标签自定义

多系列可视化

📄 阅读： references/multiple-series.md

• 向 Series 集合添加多个系列
• 比较不同的数据集
• 切换系列可见性
• 使用调色板区分系列
• 图例协调
• 性能注意事项
• 在一个图表中混合多种系列类型

外观自定义

📄 阅读： references/appearance-customization.md

• 配置图表标题和标题文本
• ChartArea 背景和边框
• 用于系列颜色的 PaletteBrushes
• 系列级样式（Fill、Stroke、StrokeThickness）
• PlotArea 自定义
• 网格线样式和主题集成
• 响应式设计模式

快速入门示例

下面是一个用于创建基本笛卡尔图表和柱状系列的最简示例：

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts">
    
    <chart:SfCartesianChart Header="Sales Comparison">
        
        
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis Header="Products"/>
        </chart:SfCartesianChart.XAxes>
        
        
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis Header="Sales ($)"/>
        </chart:SfCartesianChart.YAxes>
        
        
        <chart:ColumnSeries ItemsSource="{Binding SalesData}"
                            XBindingPath="Product" YBindingPath="Amount"
                            Label="Q1 Sales" ShowDataLabels="True"/>
    </chart:SfCartesianChart>
</Window>

// Data Model
public class SalesData
{
    public string Product { get; set; }
    public double Amount { get; set; }
}

// ViewModel with sample data
public class ViewModel
{
    public List<SalesData> SalesData { get; set; } = new()
    {
        new() { Product = "Product A", Amount = 25000 },
        new() { Product = "Product B", Amount = 38000 },
        new() { Product = "Product C", Amount = 17000 }
    };
}

常见模式

模式 1：多系列比较

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

<chart:SfCartesianChart Header="Quarterly Sales Comparison">
    
    

    
    <chart:ColumnSeries Label="Q1" 
                       ItemsSource="{Binding Q1Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
    <chart:ColumnSeries Label="Q2" 
                       ItemsSource="{Binding Q2Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
</chart:SfCartesianChart>

模式 2：带缩放功能的时间序列折线图

显示基于时间的数据并支持交互式缩放：

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis>
            <chart:DateTimeAxis.LabelStyle>
                <chart:LabelStyle LabelFormat="MMM-dd"/>
            </chart:DateTimeAxis.LabelStyle>
        </chart:DateTimeAxis>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <chart:LineSeries ItemsSource="{Binding TimeSeriesData}"
                     XBindingPath="Date" 
                     YBindingPath="Value"
                     EnableTooltip="True"/>
    
    
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnableZooming="True" 
                                   EnablePanning="True"
                                   ZoomMode="XY"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    
</chart:SfCartesianChart>

模式 3：用于整体与部分分析的堆积图表

显示各部分对总量的贡献：

<chart:SfCartesianChart Header="Market Share by Region">
    
    
    
    
    <chart:StackedColumnSeries Label="Region A" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionA"/>
    
    <chart:StackedColumnSeries Label="Region B" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionB"/>
    
    <chart:StackedColumnSeries Label="Region C" 
                              ItemsSource="{Binding Data}"
                              XBindingPath="Year" 
                              YBindingPath="RegionC"/>
    
</chart:SfCartesianChart>

模式 4：适用于大型数据集的高性能图表

使用快速系列处理数百万个数据点：

SfCartesianChart chart = new SfCartesianChart();

//Define X and Y Axis   -->

// Use FastLineBitmapSeries for performance
FastLineBitmapSeries series = new FastLineBitmapSeries
{
    ItemsSource = GenerateLargeDataset(1000000), // 1 million points
    XBindingPath = "Time",
    YBindingPath = "Value",
    EnableAntiAliasing = true // Smooth rendering
};

chart.Series.Add(series);

模式 5：带多个坐标轴的金融图表

在单独的坐标轴上显示 OHLC 数据和成交量：

<chart:SfCartesianChart>
    
    <chart:SfCartesianChart.XAxes>
        <chart:DateTimeAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis Header="Price"/>
        <chart:NumericalAxis Name="VolumeAxis" 
                           Header="Volume"
                           OpposedPosition="True"/>
    </chart:SfCartesianChart.YAxes>
    
    
    <chart:CandleSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       Open="Open"
                       High="High"
                       Low="Low"
                       Close="Close"/>
    
    
    <chart:ColumnSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       YBindingPath="Volume"
                       YAxisName="VolumeAxis"/>
    
</chart:SfCartesianChart>

关键属性概览

SfCartesianChart

• Header - 图表标题
• XAxes - 水平坐标轴集合
• YAxes - 垂直坐标轴集合
• Series - 图表系列集合
• Legend - 图例配置
• ZoomPanBehavior - 缩放和平移行为
• PaletteBrushes - 系列调色板

ChartSeries（基类）

• ItemsSource - 数据源
• XBindingPath - X 值的属性路径
• YBindingPath - Y 值的属性路径
• Label - 图例中的系列标签
• ShowDataLabels - 启用数据标签
• EnableTooltip - 启用工具提示
• EnableAnimation - 启用系列动画
• XAxisName - 要使用的 X 轴名称
• YAxisName - 要使用的 Y 轴名称

Axis（基类）

• Header - 坐标轴标题
• Interval - 标签间隔
• Minimum - 坐标轴最小值
• Maximum - 坐标轴最大值
• LabelRotation - 标签旋转角度
• LabelStyle - 标签格式和样式
• ShowMajorGridLines - 显示/隐藏网格线
• IsInversed - 反转坐标轴方向
• OpposedPosition - 将坐标轴置于另一侧

性能注意事项

何时使用 Fast 系列

• 数据集大小 > 10,000 个点：考虑使用 FastLineSeries 或 FastLineBitmapSeries
• 数据集大小 > 100,000 个点：使用 FastLineBitmapSeries、FastColumnBitmapSeries 或 FastScatterBitmapSeries
• 实时更新：Fast 系列在流式数据场景下性能更佳
• 权衡：Fast 系列的交互功能有限（不支持选择数据段，提示框自定义选项有限）

优化技巧

• 对于分类数据，使用 CategoryAxis，而不是格式化 NumericalAxis
• 为 FastBitmap 系列启用 EnableAntiAliasing，以提升视觉质量
• 对于大型数据集，尽量少用 ShowDataLabels
• 对于超大型数据集，在 ViewModel 中使用 数据虚拟化
• 对于超过 100 万个点的数据集，考虑 采样或聚合
• 禁用 动画，以提升首次渲染性能

常见用例

1. 业务仪表板 - 带有图例和提示框的多系列柱状图/折线图
2. 金融分析 - 在多个坐标轴上叠加成交量的蜡烛图/OHLC 图
3. 时间序列监控 - 支持缩放/平移的实时折线图
4. 对比分析 - 用于展示部分与整体关系的堆叠图表

故障排除技巧

• 系列不可见：添加系列前，确认已定义 XAxes 和 YAxes
• 数据未绑定：检查 XBindingPath 和 YBindingPath 是否与数据模型属性名称匹配
• 性能问题：对于超过 10,000 个点的数据集，切换到 Fast 系列
• 坐标轴标签重叠：使用 LabelRotation 或增加图表宽度
• 多个坐标轴无法正常工作：确保 XAxisName/YAxisName 与坐标轴的 Name 属性匹配
• 缩放无法正常工作：向图表添加 ChartZoomPanBehavior，并设置 EnableZooming=True

相关技能

使用 Syncfusion WinUI 组件时，你可能还需要：

• 圆形图表 - 用于饼图、圆环图和径向图表
• 极坐标图表 - 用于极坐标和雷达可视化
• 3D 图表 - 用于三维数据表示
• 漏斗图/金字塔图 - 用于层级数据可视化