syncfusion-wpf-sparkline

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WPF Sparklines

实现WPF Sparkline控件

Comprehensive guide for implementing Syncfusion® WPF Sparkline (SfSparkline) controls in Windows Presentation Foundation applications. Sparklines are compact, highly condensed charts that display data trends without axes or coordinates, perfect for dashboards and inline visualizations.

本文是在Windows Presentation Foundation（WPF）应用中实现Syncfusion® WPF Sparkline（SfSparkline）控件的综合指南。Sparkline是一种紧凑、高度浓缩的图表，无需坐标轴或坐标即可显示数据趋势，非常适合仪表板和嵌入式可视化场景。

When to Use This Skill

适用场景

Use this skill when you need to:

Create sparklines for compact data visualization in WPF applications
Display data trends without full chart complexity
Implement mini charts for dashboards, tables, or KPI displays
Choose sparkline types (Line, Column, Area, WinLoss)
Add markers to highlight specific data points
Enable interactive features like track ball for data inspection
Customize segments with special point highlighting
Configure range bands to highlight Y-axis ranges
Control axis visibility and positioning
Bind data to sparkline controls
Apply themes and visual customization
Troubleshoot sparkline rendering or data binding issues

This skill covers all four sparkline types and their unique features, from basic implementation to advanced customization.

当你需要以下功能时，可使用本指南：

在WPF应用中创建Sparkline以实现紧凑的数据可视化
无需完整图表的复杂度即可展示数据趋势
为仪表板、表格或KPI展示实现迷你图表
选择Sparkline类型（折线、柱状、面积、盈亏）
添加标记以突出特定数据点
启用交互功能（如轨迹球）以检查数据
自定义分段，突出特殊数据点
配置范围带以高亮Y轴特定区间
控制轴的可见性与位置
为Sparkline控件绑定数据
应用主题与视觉自定义
排查Sparkline渲染或数据绑定问题

本内容涵盖了四种Sparkline类型及其独特功能，从基础实现到高级自定义均有涉及。

Component Overview

组件概述

The Syncfusion WPF Sparkline (SfSparkline) is a very small chart that presents data trends in a simple, highly condensed format. Unlike traditional charts, sparklines omit axes, labels, and legends to focus purely on the data's shape and pattern.

Key Capabilities:

4 Sparkline Types: Line, Column, Area, WinLoss
Data Binding: ObservableCollection, IEnumerable support
Markers: Highlight first, last, high, low, negative points
Interactive: Track ball for mouse hover data inspection
Range Bands: Highlight specific Y-axis ranges
Segment Customization: Color-code special data points
Axis Controls: Show/hide axis with positioning options
Animation: Smooth data updates and transitions
Empty Point Support: Handle missing data gracefully

Common Use Cases:

Dashboard KPI indicators
Inline trend displays in data grids
Financial data visualization (stock prices, wins/losses)
Performance metrics (sales, traffic, conversions)
Compact reporting interfaces

Syncfusion WPF Sparkline（SfSparkline）是一种小型图表，以简洁、高度浓缩的形式呈现数据趋势。与传统图表不同，Sparkline省略了坐标轴、标签和图例，专注于展示数据的形状和模式。

核心功能：

4种Sparkline类型：折线、柱状、面积、盈亏
数据绑定：支持ObservableCollection、IEnumerable
标记：突出首个、最后一个、最高、最低、负值数据点
交互性：轨迹球功能支持鼠标悬停查看数据
范围带：高亮Y轴特定区间
分段自定义：为特殊数据点设置颜色编码
轴控件：显示/隐藏轴并支持位置配置
动画：平滑的数据更新与过渡效果
空值支持：优雅处理缺失数据

常见应用场景：

仪表板KPI指标
数据网格中的嵌入式趋势展示
金融数据可视化（股票价格、盈亏情况）
性能指标（销售额、流量、转化量）
紧凑的报告界面

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

Read this first when implementing sparklines for the first time:

Installing Syncfusion.SfChart.WPF package
Adding assembly references to your project
Importing namespaces in XAML and C#
Creating basic sparkline controls
Setting up data models with ObservableCollection
Binding data with ItemsSource and YBindingPath

📄 阅读： references/getting-started.md

首次实现Sparkline时，请先阅读本部分：

安装Syncfusion.SfChart.WPF包
为项目添加程序集引用
在XAML和C#中导入命名空间
创建基础Sparkline控件
使用ObservableCollection设置数据模型
通过ItemsSource和YBindingPath绑定数据

Sparkline Types

Sparkline类型

📄 Read: references/sparkline-types.md

Read this when choosing or implementing specific sparkline types:

Line Sparkline (SfLineSparkline) - Continuous trend lines
Column Sparkline (SfColumnSparkline) - Discrete rectangular bars
Area Sparkline (SfAreaSparkline) - Filled area under trend line
WinLoss Sparkline (SfWinLossSparkline) - Win/loss/draw indicators
When to use each sparkline type
Data structure requirements for each type
Complete XAML and C# implementation examples

📄 阅读： references/sparkline-types.md

当你需要选择或实现特定Sparkline类型时阅读本部分：

折线Sparkline（SfLineSparkline）：连续趋势线
柱状Sparkline（SfColumnSparkline）：离散矩形条
面积Sparkline（SfAreaSparkline）：趋势线下方的填充区域
盈亏Sparkline（SfWinLossSparkline）：胜负/平局指示器
各类型的适用场景
各类型的数据结构要求
完整的XAML和C#实现示例

Markers and Customization

标记与自定义

📄 Read: references/markers.md

Read this when adding or customizing markers on sparklines:

Enabling marker visibility (MarkerVisibility property)
Using MarkerTemplateSelector for special points
Highlighting first, last, high, low, and negative points
Custom marker templates (MarkerTemplate)
Sizing markers (MarkerHeight, MarkerWidth)
Customizing markers for specific data points
Advanced marker styling techniques

📄 阅读： references/markers.md

当你需要为Sparkline添加或自定义标记时阅读本部分：

启用标记可见性（MarkerVisibility属性）
使用MarkerTemplateSelector处理特殊数据点
突出首个、最后一个、最高、最低和负值数据点
自定义标记模板（MarkerTemplate）
设置标记大小（MarkerHeight、MarkerWidth）
为特定数据点自定义标记
高级标记样式技巧

Interactive Track Ball

交互式轨迹球

📄 Read: references/track-ball.md

Read this when implementing interactive data inspection:

Enabling track ball feature (ShowTrackBall property)
Customizing track ball appearance (TrackBallStyle, LineStyle)
Adding labels to track ball display
Handling OnSparklineMouseMove event
Displaying data values on mouse hover
Styling track ball markers and lines
Creating custom track ball interactions

📄 阅读： references/track-ball.md

当你需要实现交互式数据检查时阅读本部分：

启用轨迹球功能（ShowTrackBall属性）
自定义轨迹球外观（TrackBallStyle、LineStyle）
为轨迹球显示添加标签
处理OnSparklineMouseMove事件
鼠标悬停时显示数据值
为轨迹球标记和线条设置样式
创建自定义轨迹球交互

Range Bands

范围带

📄 Read: references/range-band.md

Read this when highlighting specific Y-axis ranges:

Configuring range bands (BandRangeStart, BandRangeEnd)
Setting range band brush colors (RangeBandBrush)
Use cases for range highlighting (thresholds, targets)
Visual examples with complete code

📄 阅读： references/range-band.md

当你需要高亮Y轴特定区间时阅读本部分：

配置范围带（BandRangeStart、BandRangeEnd）
设置范围带画笔颜色（RangeBandBrush）
范围高亮的适用场景（阈值、目标值）
带完整代码的视觉示例

Segment Customization

分段自定义

📄 Read: references/segment-customization.md

Read this when customizing segment colors and highlighting:

Enabling segment highlighting on hover (HighlightSegment)
Using SegmentTemplateSelector for special segments
Customizing first, last, high, low point brushes
Negative point highlighting
Column and WinLoss segment features
Line and Area segment coloring
Complete customization examples

📄 阅读： references/segment-customization.md

当你需要自定义分段颜色和高亮效果时阅读本部分：

启用悬停时的分段高亮（HighlightSegment）
使用SegmentTemplateSelector处理特殊分段
自定义首个、最后一个、最高、最低数据点的画笔
负值数据点高亮
柱状和盈亏类型的分段特性
折线和面积类型的分段着色
完整的自定义示例

Axis Controls

轴控件

📄 Read: references/axis-controls.md

Read this when configuring axis visibility and appearance:

Showing/hiding axis lines (ShowAxis property)
Positioning axis (AxisOrigin property)
Styling axis appearance (AxisStyle)
Custom line styles for axes
Axis applicability (not available for WinLoss type)
Complete styling examples

📄 阅读： references/axis-controls.md

当你需要配置轴的可见性和外观时阅读本部分：

显示/隐藏轴线（ShowAxis属性）
设置轴的位置（AxisOrigin属性）
为轴设置样式（AxisStyle）
自定义轴的线条样式
轴的适用性（盈亏类型不支持）
完整的样式示例

Quick Start

快速入门

Here's a minimal example to create a line sparkline:

以下是创建折线Sparkline的最简示例：

XAML Implementation

XAML实现

xml

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    
    <Window.DataContext>
        <local:SparklineViewModel/>
    </Window.DataContext>
    
    <syncfusion:SfLineSparkline 
        ItemsSource="{Binding UsersList}" 
        YBindingPath="NoOfUsers"
        Interior="#4a4a4a"/>
        
</Window>

xml

<Window xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF">
    
    <Window.DataContext>
        <local:SparklineViewModel/>
    </Window.DataContext>
    
    <syncfusion:SfLineSparkline 
        ItemsSource="{Binding UsersList}" 
        YBindingPath="NoOfUsers"
        Interior="#4a4a4a"/>
        
</Window>

C# Implementation

C#实现

csharp

using Syncfusion.UI.Xaml.Charts;

// Create sparkline
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparklineViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
};

// Add to container
this.Content = sparkline;

csharp

using Syncfusion.UI.Xaml.Charts;

// Create sparkline
SfLineSparkline sparkline = new SfLineSparkline()
{
    ItemsSource = new SparklineViewModel().UsersList,
    YBindingPath = "NoOfUsers",
    Interior = new SolidColorBrush(Color.FromRgb(0x4a, 0x4a, 0x4a)),
};

// Add to container
this.Content = sparkline;

Data Model

数据模型

csharp

public class UserProfile
{
    public DateTime TimeStamp { get; set; }
    public double NoOfUsers { get; set; }
}

public class SparklineViewModel
{
    public ObservableCollection<UserProfile> UsersList { get; set; }
    
    public SparklineViewModel()
    {
        UsersList = new ObservableCollection<UserProfile>();
        DateTime date = DateTime.Today;
        
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 5000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = -3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(4), NoOfUsers = -4000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(5), NoOfUsers = 2000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(6), NoOfUsers = 3000 });
    }
}

csharp

public class UserProfile
{
    public DateTime TimeStamp { get; set; }
    public double NoOfUsers { get; set; }
}

public class SparklineViewModel
{
    public ObservableCollection<UserProfile> UsersList { get; set; }
    
    public SparklineViewModel()
    {
        UsersList = new ObservableCollection<UserProfile>();
        DateTime date = DateTime.Today;
        
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(1), NoOfUsers = 3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(2), NoOfUsers = 5000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(3), NoOfUsers = -3000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(4), NoOfUsers = -4000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(5), NoOfUsers = 2000 });
        UsersList.Add(new UserProfile { TimeStamp = date.AddHours(6), NoOfUsers = 3000 });
    }
}

Common Patterns

常见实现模式

Pattern 1: Column Sparkline for Discrete Values

模式1：离散值的柱状Sparkline

xml

<syncfusion:SfColumnSparkline 
    ItemsSource="{Binding SalesData}" 
    YBindingPath="Amount"
    HighlightSegment="True"/>

xml

<syncfusion:SfColumnSparkline 
    ItemsSource="{Binding SalesData}" 
    YBindingPath="Amount"
    HighlightSegment="True"/>

Pattern 2: WinLoss Sparkline for Binary Outcomes

模式2：二元结果的盈亏Sparkline

xml

<syncfusion:SfWinLossSparkline 
    ItemsSource="{Binding MatchResults}" 
    YBindingPath="Result"/>

xml

<syncfusion:SfWinLossSparkline 
    ItemsSource="{Binding MatchResults}" 
    YBindingPath="Result"/>

Pattern 3: Line Sparkline with Markers and Track Ball

模式3：带标记和轨迹球的折线Sparkline

xml

<syncfusion:SfLineSparkline 
    ItemsSource="{Binding TrendData}" 
    YBindingPath="Value"
    MarkerVisibility="Visible"
    ShowTrackBall="True">
    
    <syncfusion:SfLineSparkline.MarkerTemplateSelector>
        <syncfusion:MarkerTemplateSelector 
            FirstPointBrush="Yellow" 
            LastPointBrush="Yellow"
            HighPointBrush="Red"
            LowPointBrush="Blue"
            MarkerHeight="10" 
            MarkerWidth="10"/>
    </syncfusion:SfLineSparkline.MarkerTemplateSelector>
    
</syncfusion:SfLineSparkline>

xml

<syncfusion:SfLineSparkline 
    ItemsSource="{Binding TrendData}" 
    YBindingPath="Value"
    MarkerVisibility="Visible"
    ShowTrackBall="True">
    
    <syncfusion:SfLineSparkline.MarkerTemplateSelector>
        <syncfusion:MarkerTemplateSelector 
            FirstPointBrush="Yellow" 
            LastPointBrush="Yellow"
            HighPointBrush="Red"
            LowPointBrush="Blue"
            MarkerHeight="10" 
            MarkerWidth="10"/>
    </syncfusion:SfLineSparkline.MarkerTemplateSelector>
    
</syncfusion:SfLineSparkline>

Pattern 4: Sparkline with Range Band

模式4：带范围带的面积Sparkline

xml

<syncfusion:SfAreaSparkline 
    ItemsSource="{Binding PerformanceData}" 
    YBindingPath="Score"
    BandRangeStart="80"
    BandRangeEnd="100"
    RangeBandBrush="LightGreen"/>

xml

<syncfusion:SfAreaSparkline 
    ItemsSource="{Binding PerformanceData}" 
    YBindingPath="Score"
    BandRangeStart="80"
    BandRangeEnd="100"
    RangeBandBrush="LightGreen"/>

Key Properties

核心属性

Property	Type	Description
ItemsSource	IEnumerable	Data collection to bind
YBindingPath	string	Property path for Y-axis values
XBindingPath	string	Property path for X-axis values (optional)
Interior	Brush	Fill color for sparkline
BorderBrush	Brush	Border color
BorderThickness	Thickness	Border thickness
MarkerVisibility	Visibility	Show/hide markers
ShowTrackBall	bool	Enable track ball feature
ShowAxis	bool	Display axis line
AxisOrigin	double	Axis position on Y-axis
HighlightSegment	bool	Highlight segment on hover (Column/WinLoss)
BandRangeStart	double	Range band start value
BandRangeEnd	double	Range band end value
RangeBandBrush	Brush	Range band fill color

属性	类型	说明
ItemsSource	IEnumerable	要绑定的数据集合
YBindingPath	string	Y轴值的属性路径
XBindingPath	string	X轴值的属性路径（可选）
Interior	Brush	Sparkline的填充颜色
BorderBrush	Brush	边框颜色
BorderThickness	Thickness	边框厚度
MarkerVisibility	Visibility	显示/隐藏标记
ShowTrackBall	bool	启用轨迹球功能
ShowAxis	bool	显示轴线
AxisOrigin	double	Y轴上的轴位置
HighlightSegment	bool	悬停时高亮分段（柱状/盈亏类型）
BandRangeStart	double	范围带起始值
BandRangeEnd	double	范围带结束值
RangeBandBrush	Brush	范围带填充颜色

Common Use Cases

常见应用场景

Use Case 1: Dashboard KPI Trends

场景1：仪表板KPI趋势

Display multiple sparklines showing key metrics over time (sales, traffic, conversions) in a compact dashboard layout.

Recommended: Line or Area sparklines with markers highlighting min/max values.

在紧凑的仪表板布局中展示多个Sparkline，显示关键指标随时间的变化（销售额、流量、转化量）。

推荐类型： 折线或面积Sparkline，搭配标记突出最大/最小值。

Use Case 2: Data Grid Integration

场景2：数据网格集成

Embed sparklines within data grid cells to show trend data alongside tabular information.

Recommended: Column sparklines for discrete data, Line sparklines for continuous trends.

在数据网格单元格中嵌入Sparkline，在表格信息旁展示趋势数据。

推荐类型： 离散数据使用柱状Sparkline，连续趋势使用折线Sparkline。

Use Case 3: Financial Win/Loss Indicators

场景3：金融盈亏指标

Show trading results, game outcomes, or binary performance metrics.

Recommended: WinLoss sparklines with custom segment colors for wins, losses, and draws.

展示交易结果、比赛胜负或二元性能指标。

推荐类型： 盈亏Sparkline，为胜负平设置自定义分段颜色。

Use Case 4: Performance Against Targets

场景4：目标达成情况可视化

Visualize metrics with target ranges highlighted (e.g., "green zone" for acceptable performance).

Recommended: Area or Line sparklines with range bands showing target thresholds.

可视化指标并高亮目标区间（如“绿色区域”代表达标性能）。

推荐类型： 面积或折线Sparkline，搭配范围带展示目标阈值。

Use Case 5: Interactive Data Exploration

场景5：交互式数据探索

Allow users to hover over sparklines to inspect exact data values without cluttering the interface.

Recommended: Any sparkline type with track ball enabled and custom labels.

允许用户悬停在Sparkline上查看精确数据值，避免界面杂乱。

推荐类型： 任意Sparkline类型，启用轨迹球功能并配置自定义标签。

Related Components

Troubleshooting

故障排查

Common issues:

Data not displaying: Verify ItemsSource binding and YBindingPath property name
Markers not showing: Ensure MarkerVisibility is set to Visible
Track ball not working: Confirm ShowTrackBall="True" and sparkline type is Line or Area
Axis not visible: Check ShowAxis property (not supported in WinLoss type)

For detailed troubleshooting, refer to the specific reference documentation for each feature.

常见问题：

数据未显示： 验证ItemsSource绑定和YBindingPath属性名称是否正确
标记未显示： 确保MarkerVisibility设置为Visible
轨迹球不工作： 确认ShowTrackBall="True"且Sparkline类型为折线或面积
轴不可见： 检查ShowAxis属性（盈亏类型不支持轴）

如需详细故障排查，请参考各功能对应的参考文档。

syncfusion-wpf-sparkline

Original

Translation

Implementing WPF Sparklines

实现WPF Sparkline控件

When to Use This Skill

适用场景

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Sparkline Types

Sparkline类型

Markers and Customization

标记与自定义

Interactive Track Ball

交互式轨迹球

Range Bands

范围带

Segment Customization

分段自定义

Axis Controls

轴控件

Quick Start

快速入门

XAML Implementation

XAML实现

C# Implementation

C#实现

Data Model

数据模型

Common Patterns

常见实现模式

Pattern 1: Column Sparkline for Discrete Values

模式1：离散值的柱状Sparkline

Pattern 2: WinLoss Sparkline for Binary Outcomes

模式2：二元结果的盈亏Sparkline

Pattern 3: Line Sparkline with Markers and Track Ball

模式3：带标记和轨迹球的折线Sparkline

Pattern 4: Sparkline with Range Band

模式4：带范围带的面积Sparkline

Key Properties

核心属性

Common Use Cases

常见应用场景

Use Case 1: Dashboard KPI Trends

场景1：仪表板KPI趋势

Use Case 2: Data Grid Integration

场景2：数据网格集成

Use Case 3: Financial Win/Loss Indicators

场景3：金融盈亏指标

Use Case 4: Performance Against Targets

场景4：目标达成情况可视化

Use Case 5: Interactive Data Exploration

场景5：交互式数据探索

Related Components

相关组件

Troubleshooting

故障排查