syncfusion-wpf-charts

实现 Syncfusion WPF 图表（SfChart）

在 Windows Presentation Foundation 应用程序中实现 Syncfusion® WPF 图表（SfChart）控件的综合指南。本技能涵盖从基本图表设置到技术指标、交互行为和性能优化等高级功能的所有内容。

何时使用此技能

在需要以下操作时使用此技能：

• 使用图表创建数据可视化，用于 WPF 应用程序
• 实现 38 种以上的系列类型（Line、Column、Bar、Area、Pie、Financial 等）
• 配置图表坐标轴（Category、Numeric、DateTime、Logarithmic、TimeSpan、DateTimeCategory）
• 使用 ItemsSource 和绑定路径将数据绑定到图表
• 添加交互功能（缩放、平移、工具提示、十字准线、轨迹球）
• 自定义图表外观（颜色、主题、样式、模板）
• 使用技术指标实现金融图表
• 优化大型数据集的图表性能
• 从 WPF 应用程序导出或打印图表
• 排查 WPF 中与图表相关的问题

组件概述

SfChart 是功能强大的数据可视化控件，提供以下功能：

• **38 种以上的图表类型：**Line、Column、Bar、Area、Bubble、Scatter、Pie、Doughnut、Funnel、Pyramid、Financial（Candle、OHLC）、Radar、Polar、Range、Spline 等
• **高性能：**在毫秒内渲染大型数据集（数百万个数据点）
• **交互功能：**缩放、平移、工具提示、十字准线、轨迹球、选择、可视化数据编辑
• **灵活的数据绑定：**支持 MVVM、复杂数据结构和动态更新
• **多个坐标轴：**堆叠并跨越多个坐标轴，以实现复杂的可视化效果
• **技术指标：**用于金融分析的 10 多种指标（SMA、EMA、RSI、MACD 等）
• **丰富的自定义选项：**主题、样式、模板、颜色、字体和布局
• **高级功能：**注释、条带线、图例、数据标签、标记
• **导出和打印：**将图表另存为图像、打印、序列化/反序列化状态

命名空间： Syncfusion.UI.Xaml.Charts
程序集： Syncfusion.SfChart.WPF

文档和导航指南

入门

📄 阅读： references/getting-started.md

从这里开始了解基本图表实现：

• 添加图表引用和 NuGet 包
• 使用坐标轴初始化基本图表
• 添加第一个系列
• 设置简单的数据绑定
• 运行第一个图表应用程序
• 最小可运行示例

系列类型和数据可视化

📄 阅读： references/series-types.md

了解所有 38 种以上的可用系列类型：

• Line、Column、Bar 和 Area 系列
• Bubble 和 Scatter 图表
• Financial 图表（Candle、OHLC、HiLo、HiLoOpenClose）
• Pie 和 Doughnut 图表
• Funnel 和 Pyramid 图表
• Radar 和 Polar 图表
• Range 系列（RangeArea、RangeColumn）
• Spline 变体（Spline、SplineArea）
• 堆叠系列（StackingColumn、StackingArea 等）
• 各系列类型的适用场景
• 组合多个系列

坐标轴配置

📄 阅读： references/axes-configuration.md

配置图表坐标轴，正确呈现数据：

• 坐标轴类型（CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis）
• 主坐标轴和次坐标轴
• 多坐标轴支持和定位
• 坐标轴标签、格式设置和旋转
• 坐标轴范围、间隔和自动范围
• 自定义坐标轴线
• 坐标轴交叉和反向
• 坐标轴上的条带线

数据绑定

📄 阅读： references/data-binding.md

将数据绑定到图表系列：

• 配置 ItemsSource 属性
• 设置 XBindingPath 和 YBindingPath
• 绑定到集合和列表
• 复杂属性绑定
• 动态数据更新
• 实现 MVVM 模式
• 支持 ObservableCollection
• 多系列数据绑定

图例

📄 阅读： references/legends.md

配置图表图例：

• 图例位置和停靠方式
• 图例显示与切换
• 图例图标和自定义
• 图例项模板
• 自定义图例项
• 图例方向

交互功能

📄 阅读： references/interactive-features.md

添加用户交互功能：

• 工具提示的配置和自定义
• 十字准线行为和样式
• 追踪球功能
• 缩放和平移（捏合、选择、鼠标滚轮）
• 选择模式（单选、多选、系列）
• 可视化数据编辑
• 可调整大小的滚动条
• 触控支持

装饰元素（数据标签和标记）

📄 阅读： references/adornments.md

显示数据点的其他信息：

• 数据标签配置
• 标签内容和格式
• 智能标签定位
• 数据标记（符号）
• 标记自定义
• 标签旋转和对齐
• 自定义装饰元素模板

外观和样式

📄 阅读： references/appearance-styling.md

自定义图表外观：

• 图表区域样式（背景、边框）
• 系列颜色和调色板
• 图表标题自定义
• 绘图区配置
• 主题和视觉样式
• 字体自定义
• 水印支持
• 渐变和纯色填充

注释

📄 阅读： references/annotations.md

向图表添加自定义注释：

• 文本注释
• 形状注释（线条、矩形、椭圆）
• 图像注释
• 自定义注释模板
• 位置和对齐
• 注释交互
• 动态注释

条带线

📄 阅读： references/striplines.md

使用条带线突出显示坐标轴区域：

• 向坐标轴添加条带线
• 条带线样式和颜色
• 多条条带线
• 条带线标签
• 循环条带线
• 条带线定位

技术指标

📄 阅读： references/technical-indicators.md

实现财务分析指标：

• 10+ 种技术指标（SMA、EMA、RSI、MACD、布林带等）
• 指标配置和参数
• 将指标与金融系列结合
• 在同一图表上显示多个指标
• 自定义指标样式
• 指标信号

性能优化

📄 阅读： references/performance-optimization.md

针对大型数据集优化图表：

• 快速系列类型（FastLine、FastColumn、FastBar 等）
• 性能最佳实践
• 渲染优化
• 内存管理
• 数据采样技术
• 分段渲染
• 动画性能

打印和导出

📄 阅读： references/printing-exporting.md

导出和打印图表：

• 打印功能
• 导出为图像格式（PNG、JPEG、BMP）
• 导出配置选项
• 图表序列化
• 保存和加载图表状态
• 导出质量设置

快速入门示例

以下是创建基本柱状图的最简示例：

<Window x:Class="ChartDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        Title="Sales Chart" Height="450" Width="800">
    
    <syncfusion:SfChart>
        
        <syncfusion:SfChart.PrimaryAxis>
            <syncfusion:CategoryAxis Header="Month"/>
        </syncfusion:SfChart.PrimaryAxis>
        
        
        <syncfusion:SfChart.SecondaryAxis>
            <syncfusion:NumericalAxis Header="Sales ($)"/>
        </syncfusion:SfChart.SecondaryAxis>
        
        
        <syncfusion:ColumnSeries ItemsSource="{Binding SalesData}"
                                 XBindingPath="Month"
                                 YBindingPath="Sales"
                                 Label="Monthly Sales">
            <syncfusion:ColumnSeries.AdornmentsInfo>
                <syncfusion:ChartAdornmentInfo ShowLabel="True"/>
            </syncfusion:ColumnSeries.AdornmentsInfo>
        </syncfusion:ColumnSeries>
    </syncfusion:SfChart>
</Window>

using Syncfusion.UI.Xaml.Charts;
using System.Collections.ObjectModel;

namespace ChartDemo
{
    public class SalesData
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    public class ViewModel
    {
        public ObservableCollection<SalesData> SalesData { get; set; }

        public ViewModel()
        {
            SalesData = new ObservableCollection<SalesData>
            {
                new SalesData { Month = "Jan", Sales = 35000 },
                new SalesData { Month = "Feb", Sales = 48000 },
                new SalesData { Month = "Mar", Sales = 42000 },
                new SalesData { Month = "Apr", Sales = 56000 },
                new SalesData { Month = "May", Sales = 67000 },
                new SalesData { Month = "Jun", Sales = 72000 }
            };
        }
    }
}

常见模式

模式 1：多系列图表

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:CategoryAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data2023}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2023"/>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data2024}"
                           XBindingPath="Month"
                           YBindingPath="Value"
                           Label="2024"/>
</syncfusion:SfChart>

模式 2：带工具提示和缩放功能的图表

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:LineSeries ItemsSource="{Binding Data}"
                           XBindingPath="Date"
                           YBindingPath="Value"
                           ShowTooltip="True"/>
    
    
    <syncfusion:SfChart.Behaviors>
        <syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"
                                          EnablePanning="True"
                                          EnableSelectionZooming="True"/>
    </syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>

模式 3：带技术指标的金融图表

<syncfusion:SfChart>
    <syncfusion:SfChart.PrimaryAxis>
        <syncfusion:DateTimeAxis/>
    </syncfusion:SfChart.PrimaryAxis>
    
    <syncfusion:SfChart.SecondaryAxis>
        <syncfusion:NumericalAxis/>
    </syncfusion:SfChart.SecondaryAxis>
    
    
    <syncfusion:CandleSeries ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"/>
    
    
    <syncfusion:SimpleAverageIndicator ItemsSource="{Binding StockData}"
                             XBindingPath="Date"
                             High="High"
                             Low="Low"
                             Open="Open"
                             Close="Close"
                             Period="14"/>
</syncfusion:SfChart>

关键属性和类

SfChart 类

• PrimaryAxis - 水平（X）坐标轴
• SecondaryAxis - 垂直（Y）坐标轴
• Series - 图表系列集合
• Legend - 图表图例配置
• Header - 图表标题
• Behaviors - 交互行为集合

ChartSeries 基类属性

• ItemsSource - 系列的数据源
• XBindingPath - X 值的属性路径
• YBindingPath - Y 值的属性路径
• Label - 系列名称（显示在图例中）
• ShowTooltip - 启用/禁用工具提示
• Palette - 系列的调色板

通用坐标轴属性

• Header - 坐标轴标题
• Interval - 坐标轴标签之间的间隔
• Minimum/Maximum - 坐标轴范围限制
• LabelFormat - 坐标轴标签的格式字符串
• ShowGridLines - 显示/隐藏网格线

常见用例

用例 1：销售仪表板

通过多个年份的对比、工具提示和数据标签，展示月度销售趋势。

适用场景：

• 业务报告仪表板
• 财务业绩跟踪
• 趋势分析

推荐系列： 带图例和工具提示的 Line、Column 或 Area 系列。

用例 2：股票市场分析

使用蜡烛图和技术指标（移动平均线、RSI、MACD）展示股价。

适用场景：

• 金融应用
• 交易平台
• 投资分析工具

推荐系列： 带技术指标的 CandleSeries、HiLoOpenCloseSeries。

用例 3：数据分布可视化

使用饼图或圆环图展示数据分布和比例。

适用场景：

• 市场份额分析
• 预算分配展示
• 调查结果可视化

推荐系列： 带数据标签的 PieSeries、DoughnutSeries。

用例 4：科学数据绘图

使用高性能系列和缩放功能绘制大型数据集。

适用场景：

• 科学应用
• 工程数据可视化
• 实时监控

推荐系列： 带缩放和平移功能的 FastLineSeries、ScatterSeries。

用例 5：对比图表

通过分组或堆叠柱形图并排比较多个数据集。

适用场景：

• 产品比较
• 同比或环比分析
• 类别比较

推荐系列： ColumnSeries、StackingColumnSeries、GroupedColumnSeries。

提示和最佳实践

1. 选择合适的系列类型： 根据数据和可视化目标选择系列类型。趋势使用 Line，对比使用 Column，比例使用 Pie，股票数据使用 Financial。

2. 大数据量使用快速系列： 处理数千个数据点时，使用快速系列类型（FastLineSeries、FastColumnSeries）以获得更好的性能。

3. 启用交互功能： 添加工具提示、缩放和跟踪球，以改善用户体验并便于探索数据。

4. 使用 MVVM 进行数据绑定： 使用 ObservableCollection 和 INotifyPropertyChanged 实现动态数据更新。

5. 自定义外观： 应用主题和自定义样式，使其符合应用程序的设计语言。

6. 优化性能： 对于非常大的数据集，可禁用动画、使用分段渲染并实现数据采样。

7. 为不同刻度使用多个坐标轴： 显示值范围或单位不同的数据时，使用多个坐标轴。

8. 使用注释补充背景信息： 使用注释和条带线突出显示重要值、阈值或区域。

相关组件

• 范围选择器： ../implementing-range-selectors/ - 选择日期/值范围以筛选图表数据

故障排除

图表未显示：

• 验证 Syncfusion.SfChart.WPF 程序集引用
• 检查数据绑定和 ItemsSource
• 确保坐标轴配置正确
• 验证已授权应用程序的许可证密钥

性能问题：

• 大型数据集使用快速系列类型
• 不需要时禁用动画
• 使用数据采样或聚合
• 启用分段渲染

数据未更新：

• 将 ObservableCollection 用于 ItemsSource
• 在数据模型中实现 INotifyPropertyChanged
• 检查绑定路径（XBindingPath、YBindingPath）

后续步骤

1. 阅读入门指南，设置你的第一个图表
2. 探索系列类型，找到合适的可视化方式
3. 配置数据绑定，连接你的数据
4. 添加交互功能，提升用户体验
5. 自定义外观，使其与你的应用设计相匹配

如需了解任何主题的详细信息，请导航至上方“文档与导航指南”部分中列出的相应参考文件。