syncfusion-wpf-charts
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseImplementing Syncfusion WPF Charts (SfChart)
实现Syncfusion WPF Charts (SfChart)
Comprehensive guide for implementing the Syncfusion® WPF Charts (SfChart) control in Windows Presentation Foundation applications. This skill covers everything from basic chart setup to advanced features like technical indicators, interactive behaviors, and performance optimization.
本指南详细介绍如何在Windows Presentation Foundation应用中实现Syncfusion® WPF Charts (SfChart)控件，内容涵盖从基础图表设置到技术指标、交互行为、性能优化等高级功能的所有方面。
When to Use This Skill
何时使用本技能
Use this skill when you need to:
- Create data visualizations with charts in WPF applications
- Implement any of 38+ series types (Line, Column, Bar, Area, Pie, Financial, etc.)
- Configure chart axes (Category, Numeric, DateTime, Logarithmic, TimeSpan,DateTimeCategory)
- Bind data to charts using ItemsSource and binding paths
- Add interactive features (zooming, panning, tooltips, crosshair, trackball)
- Customize chart appearance (colors, themes, styles, templates)
- Implement financial charts with technical indicators
- Optimize chart performance for large datasets
- Export or print charts from WPF applications
- Troubleshoot chart-related issues in WPF
当你需要以下功能时，可使用本技能：
- 在WPF应用中通过图表创建数据可视化效果
- 实现38种以上的系列类型（折线图、柱状图、条形图、面积图、饼图、金融图等）
- 配置图表轴（分类轴、数值轴、日期时间轴、对数轴、时间跨度轴、日期时间分类轴）
- 使用ItemsSource和绑定路径为图表绑定数据
- 添加交互式功能（缩放、平移、工具提示、十字线、轨迹球）
- 自定义图表外观（颜色、主题、样式、模板）
- 结合技术指标实现金融图表
- 针对大型数据集优化图表性能
- 从WPF应用中导出或打印图表
- 排查WPF中图表相关问题
Component Overview
组件概述
SfChart is a powerful data visualization control that provides:
- 38+ Chart Types: Line, Column, Bar, Area, Bubble, Scatter, Pie, Doughnut, Funnel, Pyramid, Financial (Candle, OHLC), Radar, Polar, Range, Spline, and more
- High Performance: Render large datasets (millions of points) in milliseconds
- Interactive Features: Zooming, panning, tooltips, crosshair, trackball, selection, visual data editing
- Flexible Data Binding: MVVM support, complex data structures, dynamic updates
- Multiple Axes: Stack and span multiple axes for complex visualizations
- Technical Indicators: 10+ indicators for financial analysis (SMA, EMA, RSI, MACD, etc.)
- Rich Customization: Themes, styles, templates, colors, fonts, and layouts
- Advanced Features: Annotations, striplines, legends, data labels, markers
- Export & Print: Save charts as images, print, serialize/deserialize state
Namespace:
Assembly:
Syncfusion.UI.Xaml.ChartsAssembly:
Syncfusion.SfChart.WPFSfChart是一款功能强大的数据可视化控件，提供以下特性：
- 38种以上图表类型：折线图、柱状图、条形图、面积图、气泡图、散点图、饼图、环形图、漏斗图、金字塔图、金融图（K线图、OHLC图）、雷达图、极坐标图、范围图、样条图等
- 高性能：毫秒级渲染百万级数据点
- 交互式功能：缩放、平移、工具提示、十字线、轨迹球、选择、可视化数据编辑
- 灵活的数据绑定：支持MVVM模式、复杂数据结构、动态更新
- 多轴支持：可堆叠和跨越多轴实现复杂可视化
- 技术指标：10种以上用于金融分析的指标（SMA、EMA、RSI、MACD等）
- 丰富的自定义选项：主题、样式、模板、颜色、字体和布局
- 高级功能：注释、带状线、图例、数据标签、标记点
- 导出与打印：将图表保存为图片、打印、序列化/反序列化状态
命名空间：
程序集：
Syncfusion.UI.Xaml.Charts程序集：
Syncfusion.SfChart.WPFDocumentation and Navigation Guide
文档与导航指南
Getting Started
快速入门
📄 Read: references/getting-started.md
Start here for basic chart implementation:
- Adding chart references and NuGet packages
- Basic chart initialization with axes
- Adding your first series
- Simple data binding setup
- Running your first chart application
- Minimal working example
📄 阅读： references/getting-started.md
从这里开始学习基础图表实现：
- 添加图表引用和NuGet包
- 带轴的基础图表初始化
- 添加你的第一个图表系列
- 简单数据绑定设置
- 运行你的第一个图表应用
- 最简可用示例
Series Types and Data Visualization
系列类型与数据可视化
📄 Read: references/series-types.md
Learn about all 38+ available series types:
- Line, Column, Bar, and Area series
- Bubble and Scatter charts
- Financial charts (Candle, OHLC, HiLo, HiLoOpenClose)
- Pie and Doughnut charts
- Funnel and Pyramid charts
- Radar and Polar charts
- Range series (RangeArea, RangeColumn)
- Spline variations (Spline, SplineArea)
- Stacking series (StackingColumn, StackingArea, etc.)
- When to use each series type
- Combining multiple series
📄 阅读： references/series-types.md
了解所有38种以上可用的系列类型：
- 折线、柱状、条形和面积系列
- 气泡图和散点图
- 金融图表（K线图、OHLC图、高低图、高低开收盘图）
- 饼图和环形图
- 漏斗图和金字塔图
- 雷达图和极坐标图
- 范围系列（范围面积图、范围柱状图）
- 样条变体（样条图、样条面积图）
- 堆叠系列（堆叠柱状图、堆叠面积图等）
- 各系列类型的适用场景
- 多系列组合使用
Axes Configuration
轴配置
📄 Read: references/axes-configuration.md
Configure chart axes for proper data representation:
- Axis types (CategoryAxis, NumericalAxis, DateTimeAxis, LogarithmicAxis)
- Primary and Secondary axes
- Multiple axes support and positioning
- Axis labels, formatting, and rotation
- Axis range, intervals, and auto-range
- Axis line customization
- Axis crossing and inversing
- Strip lines on axes
📄 阅读： references/axes-configuration.md
配置图表轴以正确展示数据：
- 轴类型（CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis）
- 主轴和次轴
- 多轴支持与定位
- 轴标签、格式化与旋转
- 轴范围、间隔与自动范围
- 轴线自定义
- 轴交叉与反转
- 轴上的带状线
Data Binding
数据绑定
📄 Read: references/data-binding.md
Bind data to chart series:
- ItemsSource property configuration
- XBindingPath and YBindingPath setup
- Binding to collections and lists
- Complex property binding
- Dynamic data updates
- MVVM pattern implementation
- ObservableCollection support
- Multiple series data binding
📄 阅读： references/data-binding.md
为图表系列绑定数据：
- ItemsSource属性配置
- XBindingPath和YBindingPath设置
- 绑定到集合与列表
- 复杂属性绑定
- 动态数据更新
- MVVM模式实现
- ObservableCollection支持
- 多系列数据绑定
Legends
图例
📄 Read: references/legends.md
Configure chart legends:
- Legend positioning and docking
- Legend visibility and toggling
- Legend icons and customization
- Legend item templates
- Custom legend items
- Legend orientation
📄 阅读： references/legends.md
配置图表图例：
- 图例定位与停靠
- 图例可见性与切换
- 图例图标与自定义
- 图例项模板
- 自定义图例项
- 图例方向
Interactive Features
交互式功能
📄 Read: references/interactive-features.md
Add user interaction capabilities:
- Tooltip configuration and customization
- Crosshair behavior and styling
- Trackball functionality
- Zooming and panning (pinch, selection, mouse wheel)
- Selection modes (single, multiple, series)
- Visual data editing
- Resizable scrollbar
- Touch support
📄 阅读： references/interactive-features.md
添加用户交互能力：
- 工具提示配置与自定义
- 十字线行为与样式
- 轨迹球功能
- 缩放与平移（捏合、选择、鼠标滚轮）
- 选择模式（单选、多选、系列选择）
- 可视化数据编辑
- 可调整大小的滚动条
- 触摸支持
Adornments (Data Labels and Markers)
装饰元素（数据标签与标记点）
📄 Read: references/adornments.md
Display additional information on data points:
- Data labels configuration
- Label content and formatting
- Smart label positioning
- Data markers (symbols)
- Marker customization
- Label rotation and alignment
- Custom adornment templates
📄 阅读： references/adornments.md
在数据点上显示额外信息：
- 数据标签配置
- 标签内容与格式化
- 智能标签定位
- 数据标记点（符号）
- 标记点自定义
- 标签旋转与对齐
- 自定义装饰元素模板
Appearance and Styling
外观与样式
📄 Read: references/appearance-styling.md
Customize chart visual appearance:
- Chart area styling (background, border)
- Series colors and palettes
- Chart header customization
- Plot area configuration
- Themes and visual styles
- Font customization
- Watermark support
- Gradient and solid color fills
📄 阅读： references/appearance-styling.md
自定义图表视觉外观：
- 图表区域样式（背景、边框）
- 系列颜色与调色板
- 图表标题自定义
- 绘图区域配置
- 主题与视觉样式
- 字体自定义
- 水印支持
- 渐变与纯色填充
Annotations
注释
📄 Read: references/annotations.md
Add custom annotations to charts:
- Text annotations
- Shape annotations (line, rectangle, ellipse)
- Image annotations
- Custom annotation templates
- Positioning and alignment
- Annotation interaction
- Dynamic annotations
📄 阅读： references/annotations.md
为图表添加自定义注释：
- 文本注释
- 形状注释（线条、矩形、椭圆）
- 图片注释
- 自定义注释模板
- 定位与对齐
- 注释交互
- 动态注释
Striplines
带状线
📄 Read: references/striplines.md
Highlight axis regions with striplines:
- Adding striplines to axes
- Stripline styling and colors
- Multiple striplines
- Stripline labels
- Recurring striplines
- Stripline positioning
📄 阅读： references/striplines.md
使用带状线突出显示轴区域：
- 为轴添加带状线
- 带状线样式与颜色
- 多带状线
- 带状线标签
- 重复带状线
- 带状线定位
Technical Indicators
技术指标
📄 Read: references/technical-indicators.md
Implement financial analysis indicators:
- 10+ technical indicators (SMA, EMA, RSI, MACD, Bollinger Bands, etc.)
- Indicator configuration and parameters
- Combining indicators with financial series
- Multiple indicators on same chart
- Custom indicator styling
- Indicator signals
📄 阅读： references/technical-indicators.md
实现金融分析指标：
- 10种以上技术指标（SMA、EMA、RSI、MACD、布林带等）
- 指标配置与参数
- 指标与金融系列的结合
- 同一图表上的多指标
- 自定义指标样式
- 指标信号
Performance Optimization
性能优化
📄 Read: references/performance-optimization.md
Optimize charts for large datasets:
- Fast series types (FastLine, FastColumn, FastBar, etc.)
- Performance best practices
- Rendering optimization
- Memory management
- Data sampling techniques
- Segment rendering
- Animation performance
📄 阅读： references/performance-optimization.md
针对大型数据集优化图表：
- 快速系列类型（FastLine、FastColumn、FastBar等）
- 性能最佳实践
- 渲染优化
- 内存管理
- 数据采样技术
- 分段渲染
- 动画性能
Printing and Exporting
打印与导出
📄 Read: references/printing-exporting.md
Export and print charts:
- Print functionality
- Export to image formats (PNG, JPEG, BMP)
- Export configuration options
- Chart serialization
- Saving and loading chart state
- Export quality settings
📄 阅读： references/printing-exporting.md
导出与打印图表：
- 打印功能
- 导出为图片格式（PNG、JPEG、BMP）
- 导出配置选项
- 图表序列化
- 保存与加载图表状态
- 导出质量设置
Quick Start Example
快速入门示例
Here's a minimal example to create a basic column chart:
xml
<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>
<!-- Primary Axis (X-Axis) -->
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis Header="Month"/>
</syncfusion:SfChart.PrimaryAxis>
<!-- Secondary Axis (Y-Axis) -->
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis Header="Sales ($)"/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Column Series -->
<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>csharp
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 }
};
}
}
}以下是创建基础柱状图的最简示例：
xml
<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>
<!-- Primary Axis (X-Axis) -->
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis Header="Month"/>
</syncfusion:SfChart.PrimaryAxis>
<!-- Secondary Axis (Y-Axis) -->
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis Header="Sales ($)"/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Column Series -->
<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>csharp
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 }
};
}
}
}Common Patterns
常见模式
Pattern 1: Multiple Series Chart
模式1：多系列图表
xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- First Series -->
<syncfusion:LineSeries ItemsSource="{Binding Data2023}"
XBindingPath="Month"
YBindingPath="Value"
Label="2023"/>
<!-- Second Series -->
<syncfusion:LineSeries ItemsSource="{Binding Data2024}"
XBindingPath="Month"
YBindingPath="Value"
Label="2024"/>
</syncfusion:SfChart>xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- First Series -->
<syncfusion:LineSeries ItemsSource="{Binding Data2023}"
XBindingPath="Month"
YBindingPath="Value"
Label="2023"/>
<!-- Second Series -->
<syncfusion:LineSeries ItemsSource="{Binding Data2024}"
XBindingPath="Month"
YBindingPath="Value"
Label="2024"/>
</syncfusion:SfChart>Pattern 2: Chart with Tooltip and Zooming
模式2：带工具提示和缩放的图表
xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:DateTimeAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Enable Tooltip -->
<syncfusion:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Date"
YBindingPath="Value"
ShowTooltip="True"/>
<!-- Enable Zooming and Panning -->
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"
EnablePanning="True"
EnableSelectionZooming="True"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:DateTimeAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Enable Tooltip -->
<syncfusion:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Date"
YBindingPath="Value"
ShowTooltip="True"/>
<!-- Enable Zooming and Panning -->
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior EnableMouseWheelZooming="True"
EnablePanning="True"
EnableSelectionZooming="True"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>Pattern 3: Financial Chart with Technical Indicator
模式3：带技术指标的金融图表
xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:DateTimeAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Candlestick Series -->
<syncfusion:CandleSeries ItemsSource="{Binding StockData}"
XBindingPath="Date"
High="High"
Low="Low"
Open="Open"
Close="Close"/>
<!-- Simple Moving Average Indicator -->
<syncfusion:SimpleAverageIndicator ItemsSource="{Binding StockData}"
XBindingPath="Date"
High="High"
Low="Low"
Open="Open"
Close="Close"
Period="14"/>
</syncfusion:SfChart>xml
<syncfusion:SfChart>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:DateTimeAxis/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis/>
</syncfusion:SfChart.SecondaryAxis>
<!-- Candlestick Series -->
<syncfusion:CandleSeries ItemsSource="{Binding StockData}"
XBindingPath="Date"
High="High"
Low="Low"
Open="Open"
Close="Close"/>
<!-- Simple Moving Average Indicator -->
<syncfusion:SimpleAverageIndicator ItemsSource="{Binding StockData}"
XBindingPath="Date"
High="High"
Low="Low"
Open="Open"
Close="Close"
Period="14"/>
</syncfusion:SfChart>Key Properties and Classes
关键属性与类
SfChart Class
SfChart类
- PrimaryAxis - The horizontal (X) axis
- SecondaryAxis - The vertical (Y) axis
- Series - Collection of chart series
- Legend - Chart legend configuration
- Header - Chart title
- Behaviors - Interactive behaviors collection
- PrimaryAxis - 水平（X）轴
- SecondaryAxis - 垂直（Y）轴
- Series - 图表系列集合
- Legend - 图表图例配置
- Header - 图表标题
- Behaviors - 交互行为集合
ChartSeries Base Properties
ChartSeries基类属性
- ItemsSource - Data source for the series
- XBindingPath - Property path for X values
- YBindingPath - Property path for Y values
- Label - Series name (shown in legend)
- ShowTooltip - Enable/disable tooltips
- Palette - Color palette for the series
- ItemsSource - 系列的数据源
- XBindingPath - X值的属性路径
- YBindingPath - Y值的属性路径
- Label - 系列名称（显示在图例中）
- ShowTooltip - 启用/禁用工具提示
- Palette - 系列的颜色调色板
Common Axis Properties
通用轴属性
- Header - Axis title
- Interval - Space between axis labels
- Minimum/Maximum - Axis range limits
- LabelFormat - Format string for axis labels
- ShowGridLines - Show/hide gridlines
- Header - 轴标题
- Interval - 轴标签之间的间隔
- Minimum/Maximum - 轴范围限制
- LabelFormat - 轴标签的格式字符串
- ShowGridLines - 显示/隐藏网格线
Common Use Cases
常见用例
Use Case 1: Sales Dashboard
用例1：销售仪表盘
Display monthly sales trends with multiple years comparison, tooltips, and data labels.
When to use:
- Business reporting dashboards
- Financial performance tracking
- Trend analysis over time
Recommended series: Line, Column, or Area series with legends and tooltips.
显示多年月度销售趋势对比，包含工具提示和数据标签。
适用场景：
- 业务报表仪表盘
- 财务绩效跟踪
- 跨时间趋势分析
推荐系列： 带图例和工具提示的折线图、柱状图或面积图系列。
Use Case 2: Stock Market Analysis
用例2：股票市场分析
Show stock prices with candlestick charts and technical indicators (moving averages, RSI, MACD).
When to use:
- Financial applications
- Trading platforms
- Investment analysis tools
Recommended series: CandleSeries, HiLoOpenCloseSeries with technical indicators.
使用K线图和技术指标（移动平均线、RSI、MACD）展示股票价格。
适用场景：
- 金融应用
- 交易平台
- 投资分析工具
推荐系列： CandleSeries、HiLoOpenCloseSeries结合技术指标。
Use Case 3: Data Distribution Visualization
用例3：数据分布可视化
Display data distribution and proportions using pie or doughnut charts.
When to use:
- Market share analysis
- Budget allocation display
- Survey result visualization
Recommended series: PieSeries, DoughnutSeries with data labels.
使用饼图或环形图展示数据分布和占比。
适用场景：
- 市场份额分析
- 预算分配展示
- 调查结果可视化
推荐系列： 带数据标签的PieSeries、DoughnutSeries。
Use Case 4: Scientific Data Plotting
用例4：科学数据绘图
Plot large datasets with high-performance series and zooming capabilities.
When to use:
- Scientific applications
- Engineering data visualization
- Real-time monitoring
Recommended series: FastLineSeries, ScatterSeries with zooming and panning.
使用高性能系列和缩放功能绘制大型数据集。
适用场景：
- 科学应用
- 工程数据可视化
- 实时监控
推荐系列： 带缩放和平移的FastLineSeries、ScatterSeries。
Use Case 5: Comparison Charts
用例5：对比图表
Compare multiple datasets side-by-side with grouped or stacked columns.
When to use:
- Product comparisons
- Period-over-period analysis
- Category comparisons
Recommended series: ColumnSeries, StackingColumnSeries, GroupedColumnSeries.
使用分组或堆叠柱状图并排比较多个数据集。
适用场景：
- 产品对比
- 同期对比分析
- 分类对比
推荐系列： ColumnSeries、StackingColumnSeries、GroupedColumnSeries。
Tips and Best Practices
技巧与最佳实践
-
Choose the Right Series Type: Select series types based on your data and visualization goals. Line for trends, Column for comparisons, Pie for proportions, Financial for stock data.
-
Use Fast Series for Large Data: When dealing with thousands of data points, use Fast series types (FastLineSeries, FastColumnSeries) for better performance.
-
Enable Interactive Features: Add tooltips, zooming, and trackball to enhance user experience and data exploration.
-
Data Binding with MVVM: Use ObservableCollection and INotifyPropertyChanged for dynamic data updates.
-
Customize Appearance: Apply themes and custom styles to match your application's design language.
-
Optimize Performance: Disable animations, use segment rendering, and implement data sampling for very large datasets.
-
Multiple Axes for Different Scales: Use multiple axes when displaying data with different value ranges or units.
-
Add Context with Annotations: Use annotations and striplines to highlight important values, thresholds, or regions.
-
选择合适的系列类型： 根据数据和可视化目标选择系列类型。折线图用于趋势、柱状图用于对比、饼图用于占比、金融图用于股票数据。
-
针对大数据使用快速系列： 处理数千个数据点时，使用快速系列类型（FastLineSeries、FastColumnSeries）以获得更好的性能。
-
启用交互式功能： 添加工具提示、缩放和轨迹球以提升用户体验和数据探索能力。
-
使用MVVM进行数据绑定： 使用ObservableCollection和INotifyPropertyChanged实现动态数据更新。
-
自定义外观： 应用主题和自定义样式以匹配应用的设计语言。
-
优化性能： 对于超大型数据集，禁用动画、使用分段渲染并实现数据采样。
-
多轴适配不同刻度： 当显示具有不同值范围或单位的数据时，使用多轴。
-
使用注释添加上下文： 使用注释和带状线突出显示重要值、阈值或区域。
Related Components
相关组件
- Range Selector: ../implementing-range-selectors/ - Select date/value ranges for chart data filtering
- 范围选择器： ../implementing-range-selectors/ - 选择日期/值范围以过滤图表数据
Troubleshooting
故障排除
Chart not displaying:
- Verify Syncfusion.SfChart.WPF assembly reference
- Check data binding and ItemsSource
- Ensure axes are properly configured
- Verify license key for licensed applications
Performance issues:
- Switch to Fast series types for large datasets
- Disable animations if not needed
- Use data sampling or aggregation
- Enable segment rendering
Data not updating:
- Use ObservableCollection for ItemsSource
- Implement INotifyPropertyChanged in data models
- Check binding paths (XBindingPath, YBindingPath)
图表未显示：
- 验证Syncfusion.SfChart.WPF程序集引用
- 检查数据绑定和ItemsSource
- 确保轴配置正确
- 针对授权应用验证许可证密钥
性能问题：
- 针对大型数据集切换到快速系列类型
- 如不需要则禁用动画
- 使用数据采样或聚合
- 启用分段渲染
数据未更新：
- 为ItemsSource使用ObservableCollection
- 在数据模型中实现INotifyPropertyChanged
- 检查绑定路径（XBindingPath、YBindingPath）
Next Steps
后续步骤
- Read Getting Started to set up your first chart
- Explore Series Types to find the right visualization
- Configure Data Binding to connect your data
- Add Interactive Features for better user experience
- Customize Appearance to match your application design
For detailed information on any topic, navigate to the appropriate reference file listed in the Documentation and Navigation Guide section above.
- 阅读快速入门以设置你的第一个图表
- 探索系列类型以找到合适的可视化方式
- 配置数据绑定以连接你的数据
- 添加交互式功能以提升用户体验
- 自定义外观以匹配应用设计
如需了解任何主题的详细信息，请导航至上述文档与导航指南部分列出的对应参考文件。