syncfusion-winui-cartesian-charts

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WinUI Cartesian Charts

实现Syncfusion WinUI笛卡尔图表

The Syncfusion WinUI Cartesian Chart (SfCartesianChart) provides a powerful way to visualize data with high interactivity, flexibility, and performance. It supports multiple series types, extensive customization options, and interactive features like zooming, panning, tooltips, and selection.

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

When to Use This Skill

何时使用本技能

Use this skill when the user needs to:

Create any cartesian chart in a WinUI application (column, line, area, bar, scatter, bubble, financial, stacked charts)
Configure chart axes (CategoryAxis, NumericalAxis, DateTimeAxis, LogarithmicAxis, multiple axes)
Implement high-performance charts with large datasets (fast series with millions of data points)
Add interactive features (zooming, panning, tooltips, trackball, crosshair, selection)
Customize chart appearance (legends, data labels, colors, themes, styling)
Display financial data (OHLC, candlestick charts)
Compare multiple data series in the same chart area
Create stacked visualizations to show part-to-whole relationships
Handle touch and mouse interactions for data exploration

当用户需要完成以下需求时使用本技能：

在WinUI应用中创建任意笛卡尔图表（柱状图、折线图、面积图、条形图、散点图、气泡图、金融图表、堆叠图）
配置图表坐标轴（CategoryAxis、NumericalAxis、DateTimeAxis、LogarithmicAxis、多轴）
实现适配大型数据集的高性能图表（支持数百万个数据点的快速序列）
添加交互功能（缩放、平移、工具提示、轨迹球、十字准星、选择）
自定义图表外观（图例、数据标签、颜色、主题、样式）
展示金融数据（OHLC、蜡烛图）
在同一图表区域中对比多个数据序列
创建堆叠可视化效果以展示部分与整体的关系
处理触摸和鼠标交互以进行数据探索

Component Overview

组件概述

The SfCartesianChart is Syncfusion's primary charting control for WinUI applications, designed to visualize data using a two-dimensional cartesian coordinate system with horizontal (X) and vertical (Y) axes. It excels at displaying relationships, trends, comparisons, and distributions across various data types.

SfCartesianChart是Syncfusion针对WinUI应用的核心图表控件，设计用于使用带有水平（X）和垂直（Y）轴的二维笛卡尔坐标系来可视化数据。它擅长展示不同数据类型的关系、趋势、对比和分布。

What Makes SfCartesianChart Powerful

SfCartesianChart的优势

Versatile Visualization: Supports 15+ series types ranging from basic (column, line, area, bar) to specialized (scatter, bubble, financial OHLC/Candle) to high-performance (fast series for millions of data points). All series can be mixed within the same chart for rich, multi-dimensional visualizations.

Flexible Axis System: Provides four axis types (Numerical, Category, DateTime, Logarithmic) with support for multiple axes per chart. This enables complex scenarios like displaying stock prices with volume on separate Y-axes, or comparing datasets with different scales side-by-side.

High Performance: Fast series variants use optimized rendering techniques (polyline segments and WriteableBitmap) to handle massive datasets—up to millions of data points—with smooth interactions. Essential for real-time monitoring, IoT telemetry, and scientific applications.

Rich Interactivity: Built-in support for zooming (pinch, mouse wheel), panning, tooltips, trackball (multi-series tracking), crosshair, and selection. Users can explore data naturally through touch and mouse gestures without custom code.

Enterprise-Ready Customization: Every visual aspect is customizable—from axis labels, grid lines, and legends to series colors, data labels, and chart areas. Supports templates for tooltips and legends, enabling branded, professional visualizations that match application themes.

多功能可视化：支持15+种序列类型，从基础的（柱状图、折线图、面积图、条形图）到专业的（散点图、气泡图、金融OHLC/蜡烛图），再到高性能的（支持数百万个数据点的快速序列）。所有序列都可以在同一图表中混合使用，实现丰富的多维可视化效果。

灵活的坐标轴系统：提供四种坐标轴类型（数值轴、分类轴、日期时间轴、对数轴），支持每个图表配置多个坐标轴。这可以实现复杂的场景，比如在独立的Y轴上展示股票价格和成交量，或者并排对比不同量级的数据集。

高性能：快速序列变体使用优化的渲染技术（多段线和WriteableBitmap）来处理海量数据集——最多可达数百万个数据点——同时保持流畅的交互。非常适合实时监控、IoT遥测和科学应用场景。

丰富的交互性：内置支持缩放（捏合、鼠标滚轮）、平移、工具提示、轨迹球（多序列跟踪）、十字准星和选择功能。用户无需编写自定义代码，即可通过触摸和鼠标手势自然地探索数据。

企业级自定义能力：每个视觉元素都可自定义——从坐标轴标签、网格线、图例到序列颜色、数据标签和图表区域。支持工具提示和图例的模板，可实现符合品牌调性的专业可视化效果，匹配应用主题。

Core Architecture

核心架构

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)

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)

Key Capabilities at a Glance

核心能力速览

Data Binding: Direct binding to ObservableCollection, List, or any IEnumerable with automatic updates
Multiple Series: Display unlimited series in one chart with automatic color assignment and legend coordination
Real-Time Updates: Supports dynamic data with efficient rendering for live dashboards and monitoring
Touch & Mouse: Full gesture support for mobile and desktop scenarios (pinch-zoom, pan, hover tooltips)
Accessibility: Built with WinUI standards for keyboard navigation and screen reader support
Responsive: Adapts to container size changes with automatic axis label optimization

数据绑定：可直接绑定到ObservableCollection、List或任意IEnumerable，支持自动更新
多序列支持：在一个图表中展示无限数量的序列，支持自动分配颜色和图例协同
实时更新：支持动态数据，渲染效率高，适合实时看板和监控场景
触摸和鼠标支持：全面支持移动端和桌面端的手势操作（捏合缩放、平移、悬停提示）
可访问性：遵循WinUI标准构建，支持键盘导航和屏幕阅读器
响应式：可自适应容器尺寸变化，自动优化坐标轴标签

When to Choose SfCartesianChart vs. Other Chart Types

何时选择SfCartesianChart vs 其他图表类型

Use SfCartesianChart when: Data has two quantitative dimensions (X and Y), time-series analysis, comparisons across categories, trend analysis, financial data (OHLC), scientific plots, or any scenario requiring rectangular coordinate system.

Consider alternatives when:

Circular relationships → Use SfCircularChart (Pie, Doughnut, Radial Bar)
Hierarchical data → Use SfPyramidChart or SfFunnelChart
Directional data → Use SfPolarChart

适合使用SfCartesianChart的场景：数据具有两个量化维度（X和Y）、时间序列分析、跨类别对比、趋势分析、金融数据（OHLC）、科学绘图，或任何需要直角坐标系的场景。

考虑其他替代方案的场景：

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

Key Features

核心功能

Series Types

序列类型

Basic Series: Column, Bar, Line, Area
Specialized Series: Scatter, Bubble, Candle, OHLC
Stacked Series: Stacked Column/Bar/Line/Area, Stacked100
Fast Series: FastLine, FastLineBitmap, FastColumn, FastScatter, FastStepLine (optimized for millions of points)

基础序列： 柱状图、条形图、折线图、面积图
专业序列： 散点图、气泡图、蜡烛图、OHLC
堆叠序列： 堆叠柱状图/条形图/折线图/面积图、100%堆叠
快速序列： FastLine、FastLineBitmap、FastColumn、FastScatter、FastStepLine（针对数百万个点优化）

Axes

坐标轴

Types: NumericalAxis, CategoryAxis, DateTimeAxis, LogarithmicAxis
Features: Multiple axes, custom intervals, range customization, inversed/opposed positioning
Customization: Labels, headers, grid lines, tick lines, padding, auto-scrolling

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

Interactive Features

交互功能

Zooming and panning (touch/mouse)
Tooltips with custom templates
Trackball for multi-series tracking
Crosshair for precise reading
Segment and series selection

缩放和平移（触摸/鼠标）
支持自定义模板的工具提示
用于多序列跟踪的轨迹球
用于精准读数的十字准星
分段和序列选择

Customization

自定义能力

Legends with positioning and templates
Data labels with positioning and formatting
Chart titles and headers
ChartArea and PlotArea styling
Color palettes and themes

支持位置调整和模板的图例
支持位置调整和格式化的数据标签
图表标题和页眉
图表区域和绘图区域样式
调色板和主题

Documentation and Navigation Guide

文档和导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Installing Syncfusion.Chart.WinUI NuGet package
Namespace imports and control initialization
Creating ViewModel with data binding
Setting up XAxes and YAxes
Adding your first series
Complete working example with ColumnSeries

📄 阅读： references/getting-started.md

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

Axes Configuration

坐标轴配置

Axis Types

坐标轴类型

📄 Read: references/axis-types.md

NumericalAxis - For numeric data with interval and range customization
CategoryAxis - For categorical data with index-based plotting and label placement options
DateTimeAxis - For time-series data with date/time formatting and interval types
LogarithmicAxis - For logarithmic scale with customizable base
When to use each axis type
Interval configuration and range customization

📄 阅读： references/axis-types.md

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

Axis Customization

坐标轴自定义

📄 Read: references/axis-customization.md

Axis labels (rotation, formatting, styling)
Axis headers and titles
Grid lines (major/minor, visibility, styling)
Tick lines (customization and styling)
Axis line styling
Padding and range padding
IsInversed and OpposedPosition properties
Auto-scrolling with AutoScrollingDelta

📄 阅读： references/axis-customization.md

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

Multiple Axes

多轴配置

📄 Read: references/multiple-axes.md

Using XAxes and YAxes collections
Assigning series to specific axes (XAxisName, YAxisName)
Arranging multiple series with different scales
Stacked vs side-by-side axis arrangements
Axis events (ActualRangeChanged, LabelCreated)

📄 阅读： references/multiple-axes.md

使用XAxes和YAxes集合
将序列分配到指定坐标轴（XAxisName、YAxisName）
排列不同量级的多个序列
堆叠 vs 并排坐标轴排列
坐标轴事件（ActualRangeChanged、LabelCreated）

Series Types

序列类型

Basic Series

基础序列

📄 Read: references/basic-series.md

ColumnSeries - Vertical bars for comparing categories
BarSeries - Horizontal bars for ranking or comparison
LineSeries - Connected points showing trends over time
AreaSeries - Filled regions showing magnitude and trends
ItemsSource, XBindingPath, YBindingPath configuration
Common properties and styling

📄 阅读： references/basic-series.md

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

Specialized Series

专业序列

📄 Read: references/specialized-series.md

ScatterSeries - XY plots for correlation analysis
BubbleSeries - Three-dimensional data with size representation
CandleSeries - Financial OHLC data with filled bodies
OHLCSeries - Open-High-Low-Close financial data
Financial data binding patterns
Bubble size configuration

📄 阅读： references/specialized-series.md

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

Stacked Series

堆叠序列

📄 Read: references/stacked-series.md

Stacked series - Column, Bar, Line, Area (show cumulative totals)
Stacked100 series - Percentage-based comparison (100% stacked)
Grouping multiple stacked series
Data requirements and coordination
Use cases for part-to-whole analysis

📄 阅读： references/stacked-series.md

堆叠序列 - 柱状图、条形图、折线图、面积图（展示累计总额）
Stacked100序列 - 基于百分比的对比（100%堆叠）
多个堆叠序列分组
数据要求和协同
部分与整体分析的适用场景

Fast Series (High Performance)

快速序列（高性能）

📄 Read: references/fast-series.md

FastLineSeries - Polyline rendering for large line datasets
FastLineBitmapSeries - WriteableBitmap rendering (millions of points)
FastColumnBitmapSeries - High-performance column rendering
FastScatterBitmapSeries - Large scatter plots
FastStepLineBitmapSeries - Step line charts with performance optimization
EnableAntiAliasing for bitmap-based series
When to use fast series vs standard series
Performance best practices

📄 阅读： references/fast-series.md

FastLineSeries - 适用于大型折线数据集的多段线渲染
FastLineBitmapSeries - WriteableBitmap渲染（支持数百万个点）
FastColumnBitmapSeries - 高性能柱状图渲染
FastScatterBitmapSeries - 大型散点图
FastStepLineBitmapSeries - 性能优化的阶梯折线图
为位图系列启用EnableAntiAliasing
快速序列 vs 标准序列的适用场景
性能最佳实践

Interactive Features

交互功能

Tooltip, Trackball, and Crosshair

工具提示、轨迹球和十字准星

📄 Read: references/tooltip-trackball-crosshair.md

Tooltips - EnableTooltip, custom templates, styling
Trackball - Multi-series tracking with vertical line indicator
Crosshair - Precise reading with horizontal and vertical lines
Touch and mouse interaction patterns
Custom content and positioning

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

工具提示 - EnableTooltip、自定义模板、样式
轨迹球 - 带垂直线指示器的多序列跟踪
十字准星 - 带水平和垂直线的精准读数
触摸和鼠标交互模式
自定义内容和位置

Selection

选择功能

📄 Read: references/selection.md

EnableSegmentSelection and EnableSeriesSelection
Selection modes (Single, Multiple)
SelectedIndex property
SelectionBehavior configuration
Visual feedback customization
Selection events

📄 阅读： references/selection.md

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

Zooming and Panning

缩放和平移

📄 Read: references/zooming-panning.md

EnableZooming property
ZoomMode (X, Y, XY)
EnablePanning for data exploration
Touch gestures (pinch-to-zoom)
Mouse wheel zooming
Programmatic zoom (ZoomPosition, ZoomFactor)
Reset zoom functionality
Zoom toolbar

📄 阅读： references/zooming-panning.md

EnableZooming属性
ZoomMode（X、Y、XY）
用于数据探索的EnablePanning
触摸手势（捏合缩放）
鼠标滚轮缩放
编程式缩放（ZoomPosition、ZoomFactor）
重置缩放功能
缩放工具栏

Customization

自定义能力

Data Labels

数据标签

📄 Read: references/data-labels.md

ShowDataLabels property
DataLabelSettings configuration
Label positioning (Inner, Outer, Auto)
Label templates and formatting
Style customization (fonts, colors)
Rotation and alignment

📄 阅读： references/data-labels.md

ShowDataLabels属性
DataLabelSettings配置
标签位置（内部、外部、自动）
标签模板和格式化
样式自定义（字体、颜色）
旋转和对齐

Legend

图例

📄 Read: references/legend.md

Enabling ChartLegend
Positioning and placement options
Legend template customization
Icon types and styles
Item clicking and toggling series visibility
Label customization

📄 阅读： references/legend.md

启用ChartLegend
位置和放置选项
图例模板自定义
图标类型和样式
项点击和序列可见性切换
标签自定义

Multiple Series Visualization

多序列可视化

📄 Read: references/multiple-series.md

Adding multiple series to Series collection
Comparing different datasets
Series visibility toggling
Color palettes for visual distinction
Legend coordination
Performance considerations
Mixed series types in one chart

📄 阅读： references/multiple-series.md

向Series集合添加多个序列
对比不同数据集
序列可见性切换
用于视觉区分的调色板
图例协同
性能注意事项
同一图表中的混合序列类型

Appearance Customization

外观自定义

📄 Read: references/appearance-customization.md

Chart Header and Title configuration
ChartArea background and borders
PaletteBrushes for series colors
Series-level styling (Fill, Stroke, StrokeThickness)
PlotArea customization
Grid line styling
Theme integration
Responsive design patterns

📄 阅读： references/appearance-customization.md

图表页眉和标题配置
图表区域背景和边框
用于序列颜色的PaletteBrushes
序列级样式（Fill、Stroke、StrokeThickness）
绘图区域自定义
网格线样式
主题集成
响应式设计模式

Quick Start Example

快速入门示例

Here's a minimal example to create a basic cartesian chart with column series:

xaml

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts">
    
    <chart:SfCartesianChart Header="Sales Comparison">
        
        <!-- Define X-Axis (Category) -->
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis Header="Products"/>
        </chart:SfCartesianChart.XAxes>
        
        <!-- Define Y-Axis (Numerical) -->
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis Header="Sales ($)"/>
        </chart:SfCartesianChart.YAxes>
        
        <!-- Add Column Series -->
        <chart:ColumnSeries ItemsSource="{Binding SalesData}"
                           XBindingPath="Product" 
                           YBindingPath="Amount"
                           Label="Q1 Sales"
                           ShowDataLabels="True"/>
        
    </chart:SfCartesianChart>
    
</Window>

csharp

using Syncfusion.UI.Xaml.Charts;

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

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

// Code-behind
SfCartesianChart chart = new SfCartesianChart();
chart.Header = "Sales Comparison";

// Configure axes
CategoryAxis xAxis = new CategoryAxis { Header = "Products" };
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis { Header = "Sales ($)" };
chart.YAxes.Add(yAxis);

// Add series
ColumnSeries series = new ColumnSeries
{
    ItemsSource = new ViewModel().SalesData,
    XBindingPath = "Product",
    YBindingPath = "Amount",
    Label = "Q1 Sales",
    ShowDataLabels = true
};
chart.Series.Add(series);

以下是创建带柱状序列的基础笛卡尔图表的最小示例：

xaml

<Window
    xmlns:chart="using:Syncfusion.UI.Xaml.Charts">
    
    <chart:SfCartesianChart Header="Sales Comparison">
        
        <!-- Define X-Axis (Category) -->
        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis Header="Products"/>
        </chart:SfCartesianChart.XAxes>
        
        <!-- Define Y-Axis (Numerical) -->
        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis Header="Sales ($)"/>
        </chart:SfCartesianChart.YAxes>
        
        <!-- Add Column Series -->
        <chart:ColumnSeries ItemsSource="{Binding SalesData}"
                           XBindingPath="Product" 
                           YBindingPath="Amount"
                           Label="Q1 Sales"
                           ShowDataLabels="True"/>
        
    </chart:SfCartesianChart>
    
</Window>

csharp

using Syncfusion.UI.Xaml.Charts;

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

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

// Code-behind
SfCartesianChart chart = new SfCartesianChart();
chart.Header = "Sales Comparison";

// Configure axes
CategoryAxis xAxis = new CategoryAxis { Header = "Products" };
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis { Header = "Sales ($)" };
chart.YAxes.Add(yAxis);

// Add series
ColumnSeries series = new ColumnSeries
{
    ItemsSource = new ViewModel().SalesData,
    XBindingPath = "Product",
    YBindingPath = "Amount",
    Label = "Q1 Sales",
    ShowDataLabels = true
};
chart.Series.Add(series);

Common Patterns

常用模式

Pattern 1: Multi-Series Comparison

模式1：多序列对比

Compare multiple datasets in the same chart:

xaml

<chart:SfCartesianChart Header="Quarterly Sales Comparison">
    
    <chart:SfCartesianChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCartesianChart.Legend>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <!-- Multiple series -->
    <chart:ColumnSeries Label="Q1" 
                       ItemsSource="{Binding Q1Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
    <chart:ColumnSeries Label="Q2" 
                       ItemsSource="{Binding Q2Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
</chart:SfCartesianChart>

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

xaml

<chart:SfCartesianChart Header="Quarterly Sales Comparison">
    
    <chart:SfCartesianChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCartesianChart.Legend>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <!-- Multiple series -->
    <chart:ColumnSeries Label="Q1" 
                       ItemsSource="{Binding Q1Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
    <chart:ColumnSeries Label="Q2" 
                       ItemsSource="{Binding Q2Data}"
                       XBindingPath="Month" 
                       YBindingPath="Sales"/>
    
</chart:SfCartesianChart>

Pattern 2: Time-Series Line Chart with Zooming

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

Display time-based data with interactive zooming:

xaml

<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"/>
    
    <!-- Enable zooming and panning -->
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnableZooming="True" 
                                   EnablePanning="True"
                                   ZoomMode="XY"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    
</chart:SfCartesianChart>

展示基于时间的数据，支持交互缩放：

xaml

<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"/>
    
    <!-- Enable zooming and panning -->
    <chart:SfCartesianChart.ZoomPanBehavior>
        <chart:ChartZoomPanBehavior EnableZooming="True" 
                                   EnablePanning="True"
                                   ZoomMode="XY"/>
    </chart:SfCartesianChart.ZoomPanBehavior>
    
</chart:SfCartesianChart>

Pattern 3: Stacked Chart for Part-to-Whole Analysis

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

Show contribution of parts to a total:

xaml

<chart:SfCartesianChart Header="Market Share by Region">
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <!-- Stacked Column Series -->
    <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>

展示各部分对总体的贡献：

xaml

<chart:SfCartesianChart Header="Market Share by Region">
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
    
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
    
    <!-- Stacked Column Series -->
    <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>

Pattern 4: High-Performance Chart for Large Datasets

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

Use fast series for millions of data points:

csharp

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xAxis = new DateTimeAxis();
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);

// 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);

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

csharp

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xAxis = new DateTimeAxis();
chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);

// 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);

Pattern 5: Financial Chart with Multiple Axes

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

Display OHLC data with volume on separate axis:

xaml

<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>
    
    <!-- OHLC Series on primary axis -->
    <chart:CandleSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       Open="Open"
                       High="High"
                       Low="Low"
                       Close="Close"/>
    
    <!-- Volume on secondary axis -->
    <chart:ColumnSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       YBindingPath="Volume"
                       YAxisName="VolumeAxis"/>
    
</chart:SfCartesianChart>

在独立坐标轴上展示OHLC数据和成交量：

xaml

<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>
    
    <!-- OHLC Series on primary axis -->
    <chart:CandleSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       Open="Open"
                       High="High"
                       Low="Low"
                       Close="Close"/>
    
    <!-- Volume on secondary axis -->
    <chart:ColumnSeries ItemsSource="{Binding StockData}"
                       XBindingPath="Date"
                       YBindingPath="Volume"
                       YAxisName="VolumeAxis"/>
    
</chart:SfCartesianChart>

Key Properties Overview

核心属性概览

SfCartesianChart

Header - Chart title
XAxes - Collection of horizontal axes
YAxes - Collection of vertical axes
Series - Collection of chart series
Legend - Legend configuration
ZoomPanBehavior - Zooming and panning behavior
PaletteBrushes - Color palette for series

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

ChartSeries (Base)

ChartSeries (基础类)

ItemsSource - Data source
XBindingPath - Property path for X values
YBindingPath - Property path for Y values
Label - Series label for legend
ShowDataLabels - Enable data labels
EnableTooltip - Enable tooltips
EnableAnimation - Enable series animation
XAxisName - Name of X-axis to use
YAxisName - Name of Y-axis to use

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

Axis (Base)

Axis (基础类)

Header - Axis title
Interval - Interval between labels
Minimum - Minimum axis value
Maximum - Maximum axis value
LabelRotation - Label rotation angle
LabelStyle - Label formatting and styling
ShowMajorGridLines - Show/hide grid lines
IsInversed - Invert axis direction
OpposedPosition - Position axis on opposite side

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

Performance Considerations

性能注意事项

When to Use Fast Series

何时使用快速序列

Dataset size > 10,000 points: Consider FastLineSeries or FastLineBitmapSeries
Dataset size > 100,000 points: Use FastLineBitmapSeries, FastColumnBitmapSeries, or FastScatterBitmapSeries
Real-time updates: Fast series provide better performance for streaming data
Trade-offs: Fast series have limited interactivity (no segment selection, limited tooltip customization)

数据集大小 > 10,000个点：考虑使用FastLineSeries或FastLineBitmapSeries
数据集大小 > 100,000个点：使用FastLineBitmapSeries、FastColumnBitmapSeries或FastScatterBitmapSeries
实时更新：快速序列为流数据提供更好的性能
权衡：快速序列的交互性有限（无分段选择、工具提示自定义能力有限）

Optimization Tips

优化建议

Use CategoryAxis for categorical data instead of formatting NumericalAxis
Enable EnableAntiAliasing for FastBitmap series to improve visual quality
Limit ShowDataLabels usage for large datasets
Use data virtualization in ViewModel for very large datasets
Consider sampling or aggregation for datasets over 1 million points
Disable animations for better initial render performance

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

Common Use Cases

常见使用场景

Business Dashboards - Multi-series column/line charts with legends and tooltips
Financial Analysis - Candlestick/OHLC charts with volume overlay on multiple axes
Scientific Data - Scatter plots for correlation, line charts for trends
Time-Series Monitoring - Real-time line charts with zooming/panning
Comparative Analysis - Stacked charts for part-to-whole relationships
IoT/Telemetry - Fast series for high-frequency sensor data (millions of points)
Sales Reports - Bar/column charts with data labels
Market Research - Bubble charts for three-dimensional data analysis

商业看板 - 带图例和工具提示的多序列柱状/折线图
金融分析 - 多轴上带成交量叠加的蜡烛图/OHLC图表
科学数据 - 用于相关性分析的散点图、用于趋势展示的折线图
时间序列监控 - 带缩放/平移功能的实时折线图
对比分析 - 用于部分与整体关系的堆叠图
IoT/遥测 - 用于高频传感器数据的快速序列（数百万个点）
销售报表 - 带数据标签的条形/柱状图
市场调研 - 用于三维数据分析的气泡图

Troubleshooting Tips

故障排查提示

Series not visible: Verify XAxes and YAxes are defined before adding series
Data not binding: Check XBindingPath and YBindingPath match data model property names
Performance issues: Switch to fast series for datasets over 10,000 points
Axis labels overlapping: Use LabelRotation or increase chart width
Multiple axes not working: Ensure XAxisName/YAxisName matches the Name property of the axis
Zooming not working: Add ChartZoomPanBehavior to chart and set EnableZooming=True

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