syncfusion-wpf-sparkline

实现 WPF 迷你图

在 Windows Presentation Foundation 应用程序中实现 Syncfusion® WPF Sparkline（SfSparkline）控件的综合指南。迷你图是紧凑、精简的图表，无需坐标轴或坐标即可展示数据趋势，非常适合仪表板和内嵌可视化。

何时使用此技能

在以下情况下使用此技能：

• 创建迷你图，在 WPF 应用程序中进行紧凑的数据可视化
• 展示数据趋势，无需使用复杂的完整图表
• 实现迷你图表，用于仪表板、表格或 KPI 显示
• 选择迷你图类型（Line、Column、Area、WinLoss）
• 添加标记，突出显示特定数据点
• 启用交互功能，例如用于检查数据的跟踪球
• 自定义数据段，突出显示特殊数据点
• 配置范围带，突出显示 Y 轴范围
• 控制坐标轴的可见性和位置
• 绑定数据到迷你图控件
• 应用主题并自定义视觉样式
• 排查迷你图渲染或数据绑定问题

此技能涵盖全部四种迷你图类型及其独特功能，从基本实现到高级自定义。

组件概述

Syncfusion WPF Sparkline（SfSparkline）是一种非常小巧的图表，以简单、精简的格式呈现数据趋势。与传统图表不同，迷你图省略坐标轴、标签和图例，专注于数据的形状和模式。

主要功能：

• **4 种迷你图类型：**Line、Column、Area、WinLoss
• **数据绑定：**支持 ObservableCollection、IEnumerable
• **标记：**突出显示首个、末尾、最高、最低和负值数据点
• **交互功能：**通过鼠标悬停跟踪球检查数据
• **范围带：**突出显示特定的 Y 轴范围
• **数据段自定义：**为特殊数据点设置颜色
• **坐标轴控制：**显示或隐藏坐标轴，并提供位置选项
• **动画：**平滑更新和过渡数据
• **空数据点支持：**妥善处理缺失数据

常见用例：

• 仪表板 KPI 指示器
• 数据网格中的内嵌趋势显示
• 财务数据可视化（股价、胜负）
• 性能指标（销售额、流量、转化率）
• 紧凑型报告界面

文档与导航指南

入门

📄 阅读：references/getting-started.md

首次实现迷你图时，请先阅读此文档：

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

迷你图类型

📄 阅读：references/sparkline-types.md

选择或实现特定迷你图类型时，请阅读此文档：

• 折线迷你图（SfLineSparkline）— 连续趋势线
• 柱形迷你图（SfColumnSparkline）— 离散矩形柱
• 面积迷你图（SfAreaSparkline）— 趋势线下方填充的区域
• 胜负迷你图（SfWinLossSparkline）— 胜、负、平指示器
• 各种迷你图类型的适用场景
• 各类型的数据结构要求
• 完整的 XAML 和 C# 实现示例

标记与自定义

📄 阅读：references/markers.md

添加或自定义迷你图上的标记时，请阅读此文档：

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

交互式跟踪球

📄 阅读： references/track-ball.md

实现交互式数据检查时，请阅读此文档：

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

范围带

📄 阅读： references/range-band.md

需要突出显示特定 Y 轴范围时，请阅读此文档：

• 配置范围带（BandRangeStart、BandRangeEnd）
• 设置范围带画刷颜色（RangeBandBrush）
• 范围高亮的用例（阈值、目标）
• 附带完整代码的可视化示例

段自定义

📄 阅读： references/segment-customization.md

需要自定义段颜色和高亮时，请阅读此文档：

• 启用悬停时的段高亮（HighlightSegment）
• 使用 SegmentTemplateSelector 设置特殊段
• 自定义第一个点、最后一个点、最高点和最低点的画刷
• 高亮负值点
• 柱形图和 WinLoss 段功能
• 线形图和面积图段颜色设置
• 完整的自定义示例

坐标轴控件

📄 阅读： references/axis-controls.md

配置坐标轴的可见性和外观时，请阅读此文档：

• 显示/隐藏坐标轴线（ShowAxis 属性）
• 设置坐标轴位置（AxisOrigin 属性）
• 设置坐标轴外观（AxisStyle）
• 自定义坐标轴线条样式
• 坐标轴适用性（WinLoss 类型不支持）
• 完整的样式设置示例

快速入门

以下是创建折线迷你图的最简示例：

XAML 实现

<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# 实现

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;

数据模型

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

常见模式

模式 1：用于离散值的柱形迷你图

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

模式 2：用于二元结果的 WinLoss 迷你图

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

模式 3：带标记和跟踪球的折线迷你图

<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>

模式 4：带范围带的迷你图

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

关键属性

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

常见用例

用例 1：仪表板 KPI 趋势

在紧凑的仪表板布局中显示多个迷你图，以呈现随时间变化的关键指标（销售额、流量、转化率）。

推荐： 使用折线或面积迷你图，并通过标记突出显示最小值/最大值。

用例 2：与数据网格集成

在数据网格单元格中嵌入迷你图，以便在表格信息旁显示趋势数据。

推荐： 离散数据使用柱形迷你图，连续趋势使用折线迷你图。

用例 3：财务盈亏指标

显示交易结果、游戏结果或二元绩效指标。

推荐： 使用 WinLoss 迷你图，并为胜、负、平局设置自定义段颜色。

用例 4：与目标对比的绩效

通过突出显示目标范围来直观呈现指标（例如，表示可接受绩效的“绿色区域”）。

推荐： 使用面积或折线迷你图，并通过范围带显示目标阈值。

用例 5：交互式数据探索

允许用户将鼠标悬停在迷你图上，以查看精确的数据值，同时保持界面简洁。

**建议：**启用跟踪球并使用自定义标签的任意迷你图类型。

相关组件

如需更全面的数据可视化功能：

• 图表 - 功能齐全的图表，支持坐标轴、图例和多个数据系列
• 其他数据可视化组件（即将推出）

故障排除

常见问题：

• **未显示数据：**确认 ItemsSource 绑定和 YBindingPath 属性名称
• **未显示标记：**确保 MarkerVisibility 设置为 Visible
• **跟踪球无法使用：**确认 ShowTrackBall="True"，且迷你图类型为 Line 或 Area
• **未显示坐标轴：**检查 ShowAxis 属性（WinLoss 类型不支持）

如需详细的故障排除信息，请参阅各项功能对应的参考文档。