Back to Details

syncfusion-winforms-sparkline

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Implementing Syncfusion Windows Forms Sparkline

实现Syncfusion Windows Forms Sparkline

The Windows Forms Sparkline control provides compact, high-density data visualization for displaying trends and variations in a condensed graphical format. Sparklines present data without axis scales, offering quick overviews of data patterns over time with minimal space requirements.
Windows Forms Sparkline控件提供紧凑的高密度数据可视化能力，可用于以精简的图形格式展示数据趋势和波动。迷你图（Sparkline）展示数据时不会显示坐标轴刻度，仅占用极少空间即可让用户快速概览随时间变化的数据规律。

When to Use This Skill

何时使用本技能

Use this skill when you need to:
  • Create compact trend visualizations within Windows Forms applications
  • Display high-density data in small spaces (table cells, dashboards, reports)
  • Show data patterns without detailed axis scales
  • Implement line, column, or win/loss sparkline charts
  • Highlight specific data points (high, low, start, end, negative values)
  • Add visual markers to emphasize important data points
  • Bind sparklines to various data sources (DataTable, IEnumerable, ICollection, IList)
  • Customize sparkline appearance and styling
  • Provide quick data range comparisons
  • Build lightweight graphical representations for trends and variations
当你需要实现以下需求时可以使用本技能：
  • 在Windows Forms应用中创建紧凑的趋势可视化效果
  • 在小空间（表格单元格、仪表盘、报表）内展示高密度数据
  • 无需详细坐标轴刻度即可展示数据规律
  • 实现折线、柱状、WinLoss类型的迷你图图表
  • 高亮特定数据点（最高值、最低值、起始点、结束点、负值）
  • 添加视觉标记来突出重要数据点
  • 将迷你图绑定到各类数据源（DataTable、IEnumerable、ICollection、IList）
  • 自定义迷你图的外观和样式
  • 提供快速的数据范围对比功能
  • 为趋势和数据波动构建轻量级图形展示

Component Overview

组件概览

Syncfusion Windows Forms Sparkline is an information graphic control characterized by:
  • Small size: Minimal footprint for compact displays
  • High data density: Maximum information in minimal space
  • Lightweight rendering: Fast performance with efficient graphics
  • Three chart types: Line, Column, and WinLoss
  • Marker support: Visual indicators for key data points
  • Flexible data binding: Multiple data source types supported
Key Capabilities:
  • Three sparkline types (Line, Column, WinLoss)
  • Data point markers with customizable colors
  • High/Low/Start/End/Negative point highlighting
  • Custom styling for lines and columns
  • Background customization
  • Data source binding from multiple formats
  • Designer integration with Visual Studio toolbox
Syncfusion Windows Forms Sparkline是一款信息图形控件，具备以下特点：
  • 体积小巧：占用空间极小，适合紧凑展示场景
  • 高数据密度：在极小空间内展示最多信息
  • 轻量渲染：图形渲染效率高，性能优异
  • 三种图表类型：折线、柱状、WinLoss
  • 支持标记：可为关键数据点添加视觉指示器
  • 灵活数据绑定：支持多种类型的数据源
核心能力：
  • 三种迷你图类型（折线、柱状、WinLoss）
  • 支持自定义颜色的数据点标记
  • 最高/最低/起始/结束/负值点高亮
  • 折线和柱状图的自定义样式
  • 背景自定义
  • 支持多种格式的数据源绑定
  • 与Visual Studio工具箱的设计器集成

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md
  • Assembly deployment and NuGet package installation
  • Adding Sparkline control to Windows Forms via designer
  • Toolbox integration
  • Basic data source binding
  • First sparkline implementation
  • Adding markers to sparklines
  • Highlighting high and low values
📄 阅读： references/getting-started.md
  • 程序集部署与NuGet包安装
  • 通过设计器将Sparkline控件添加到Windows Forms项目
  • 工具箱集成
  • 基础数据源绑定
  • 首个迷你图实现
  • 为迷你图添加标记
  • 高亮最高值和最低值

Sparkline Types

Sparkline类型

📄 Read: references/sparkline-types.md
  • Overview of three sparkline types
  • Line sparkline: connected data points
  • Column sparkline: vertical bars with positive/negative representation
  • WinLoss sparkline: equal-length columns for win/loss patterns
  • Data source support (DataTable, IEnumerable, ICollection, IList)
  • Type selection guidance based on use case
📄 阅读： references/sparkline-types.md
  • 三种迷你图类型概览
  • 折线迷你图：相连的数据点
  • 柱状迷你图：可表示正负值的垂直柱形
  • WinLoss迷你图：用于展示输赢规律的等长柱形
  • 数据源支持（DataTable、IEnumerable、ICollection、IList）
  • 基于使用场景的类型选择指南

Marker Customization

标记自定义

📄 Read: references/marker-customization.md
  • Marker properties and configuration
  • ShowMarker, ShowHighPoint, ShowLowPoint, ShowStartPoint, ShowEndPoint, ShowNegativePoint
  • Marker colors for each point type
  • Line sparkline markers (all data points)
  • Column sparkline markers (high/low/start/end/negative)
  • WinLoss sparkline markers
  • Gradient support with BrushInfo
  • Complete marker customization examples
📄 阅读： references/marker-customization.md
  • 标记属性与配置
  • ShowMarker、ShowHighPoint、ShowLowPoint、ShowStartPoint、ShowEndPoint、ShowNegativePoint配置
  • 各类点的标记颜色配置
  • 折线迷你图标记（所有数据点）
  • 柱状迷你图标记（最高/最低/起始/结束/负值）
  • WinLoss迷你图标记
  • 支持BrushInfo实现渐变效果
  • 完整的标记自定义示例

Appearance Customization

外观自定义

📄 Read: references/appearance-customization.md
  • LineStyle customization (color, appearance)
  • ColumnStyle customization (color, style)
  • BackInterior property (background color)
  • Complete styling examples
📄 阅读： references/appearance-customization.md
  • LineStyle自定义（颜色、外观）
  • ColumnStyle自定义（颜色、样式）
  • BackInterior属性（背景色）
  • 完整的样式示例

Quick Start Example

快速入门示例

csharp
using Syncfusion.Windows.Forms.Chart;

// Create sparkline instance
SparkLine sparkLine1 = new SparkLine();

// Set data source
sparkLine1.Source = new double[] { 30, -20, 80, 20, 40, -50, -30, 70, -40, 50 };

// Set sparkline type (Line, Column, or WinLoss)
sparkLine1.Type = SparkLineType.Line;

// Enable markers for high and low points
sparkLine1.Markers.ShowHighPoint = true;
sparkLine1.Markers.ShowLowPoint = true;
sparkLine1.Markers.HighPointColor = new BrushInfo(Color.Blue);
sparkLine1.Markers.LowPointColor = new BrushInfo(Color.Red);

// Customize line appearance
sparkLine1.LineStyle.LineColor = Color.Maroon;

// Add to form
this.Controls.Add(sparkLine1);
csharp
using Syncfusion.Windows.Forms.Chart;

// Create sparkline instance
SparkLine sparkLine1 = new SparkLine();

// Set data source
sparkLine1.Source = new double[] { 30, -20, 80, 20, 40, -50, -30, 70, -40, 50 };

// Set sparkline type (Line, Column, or WinLoss)
sparkLine1.Type = SparkLineType.Line;

// Enable markers for high and low points
sparkLine1.Markers.ShowHighPoint = true;
sparkLine1.Markers.ShowLowPoint = true;
sparkLine1.Markers.HighPointColor = new BrushInfo(Color.Blue);
sparkLine1.Markers.LowPointColor = new BrushInfo(Color.Red);

// Customize line appearance
sparkLine1.LineStyle.LineColor = Color.Maroon;

// Add to form
this.Controls.Add(sparkLine1);

Common Patterns

常见使用模式

Pattern 1: Dashboard Trend Indicators

模式1：仪表盘趋势指示器

csharp
// Small sparklines for dashboard KPI trends
SparkLine salesTrend = new SparkLine();
salesTrend.Source = salesData; // double[] or DataTable
salesTrend.Type = SparkLineType.Line;
salesTrend.Markers.ShowEndPoint = true;
salesTrend.Markers.EndPointColor = new BrushInfo(Color.Green);
salesTrend.Size = new Size(100, 30); // Compact size
csharp
// Small sparklines for dashboard KPI trends
SparkLine salesTrend = new SparkLine();
salesTrend.Source = salesData; // double[] or DataTable
salesTrend.Type = SparkLineType.Line;
salesTrend.Markers.ShowEndPoint = true;
salesTrend.Markers.EndPointColor = new BrushInfo(Color.Green);
salesTrend.Size = new Size(100, 30); // Compact size

Pattern 2: Win/Loss Visualization

模式2：输赢可视化

csharp
// WinLoss sparkline for binary outcomes
SparkLine winLoss = new SparkLine();
winLoss.Source = new double[] { 1, -1, 1, 1, -1, 1, -1, -1, 1, 1 };
winLoss.Type = SparkLineType.WinLoss;
winLoss.Markers.ShowNegativePoint = true;
winLoss.Markers.NegativePointColor = new BrushInfo(Color.Red);
csharp
// WinLoss sparkline for binary outcomes
SparkLine winLoss = new SparkLine();
winLoss.Source = new double[] { 1, -1, 1, 1, -1, 1, -1, -1, 1, 1 };
winLoss.Type = SparkLineType.WinLoss;
winLoss.Markers.ShowNegativePoint = true;
winLoss.Markers.NegativePointColor = new BrushInfo(Color.Red);

Pattern 3: Column Sparkline with Highlights

模式3：带高亮的柱状迷你图

csharp
// Column sparkline with high/low highlighting
SparkLine columnChart = new SparkLine();
columnChart.Source = monthlyData;
columnChart.Type = SparkLineType.Column;
columnChart.Markers.ShowHighPoint = true;
columnChart.Markers.ShowLowPoint = true;
columnChart.Markers.ShowStartPoint = true;
columnChart.Markers.ShowEndPoint = true;
columnChart.Markers.HighPointColor = new BrushInfo(Color.Green);
columnChart.Markers.LowPointColor = new BrushInfo(Color.Red);
csharp
// Column sparkline with high/low highlighting
SparkLine columnChart = new SparkLine();
columnChart.Source = monthlyData;
columnChart.Type = SparkLineType.Column;
columnChart.Markers.ShowHighPoint = true;
columnChart.Markers.ShowLowPoint = true;
columnChart.Markers.ShowStartPoint = true;
columnChart.Markers.ShowEndPoint = true;
columnChart.Markers.HighPointColor = new BrushInfo(Color.Green);
columnChart.Markers.LowPointColor = new BrushInfo(Color.Red);

Pattern 4: Line Sparkline with All Markers

模式4：带全量标记的折线迷你图

csharp
// Line sparkline showing all data point markers
SparkLine lineWithMarkers = new SparkLine();
lineWithMarkers.Source = dataPoints;
lineWithMarkers.Type = SparkLineType.Line;
lineWithMarkers.Markers.ShowMarker = true; // Show all points
lineWithMarkers.Markers.MarkerColor = new BrushInfo(Color.DarkBlue);
lineWithMarkers.LineStyle.LineColor = Color.Blue;
csharp
// Line sparkline showing all data point markers
SparkLine lineWithMarkers = new SparkLine();
lineWithMarkers.Source = dataPoints;
lineWithMarkers.Type = SparkLineType.Line;
lineWithMarkers.Markers.ShowMarker = true; // Show all points
lineWithMarkers.Markers.MarkerColor = new BrushInfo(Color.DarkBlue);
lineWithMarkers.LineStyle.LineColor = Color.Blue;

Key Properties and Methods

核心属性与方法

Essential Properties

核心属性

Type (SparkLineType)
  • Specifies sparkline type: 
    Line
    , 
    Column
    , or 
    WinLoss
  • Default: 
    Line
  • Use: Determines visual representation style
Source (object)
  • Gets or sets data source for sparkline data points
  • Supports: 
    double[]
    , 
    DataTable
    , 
    IEnumerable
    , 
    ICollection
    , 
    IList
  • Use: Binds data to sparkline visualization
Markers (Markers)
  • Enables marker support for sparklines
  • Properties: 
    ShowMarker
    , 
    ShowHighPoint
    , 
    ShowLowPoint
    , 
    ShowStartPoint
    , 
    ShowEndPoint
    , 
    ShowNegativePoint
  • Color properties: 
    MarkerColor
    , 
    HighPointColor
    , 
    LowPointColor
    , 
    StartPointColor
    , 
    EndPointColor
    , 
    NegativePointColor
  • Use: Highlights specific data points visually
LineStyle (LineStyle)
  • Customizes line sparkline appearance
  • Properties include: 
    LineColor
  • Use: Controls visual styling for line-type sparklines
ColumnStyle (ColumnStyle)
  • Customizes column and WinLoss sparkline appearance
  • Use: Controls visual styling for column-type sparklines
BackInterior (BrushInfo)
  • Customizes background color of control
  • Default: White
  • Use: Sets sparkline background appearance
Type (SparkLineType)
  • 指定迷你图类型：
    Line
    、
    Column
    或 
    WinLoss
  • 默认值：
    Line
  • 用途：决定可视化展示的样式
Source (object)
  • 获取或设置迷你图数据点的数据源
  • 支持：
    double[]
    、
    DataTable
    、
    IEnumerable
    、
    ICollection
    、
    IList
  • 用途：将数据绑定到迷你图可视化组件
Markers (Markers)
  • 启用迷你图的标记支持
  • 包含属性：
    ShowMarker
    、
    ShowHighPoint
    、
    ShowLowPoint
    、
    ShowStartPoint
    、
    ShowEndPoint
    、
    ShowNegativePoint
  • 颜色属性：
    MarkerColor
    、
    HighPointColor
    、
    LowPointColor
    、
    StartPointColor
    、
    EndPointColor
    、
    NegativePointColor
  • 用途：从视觉上高亮特定数据点
LineStyle (LineStyle)
  • 自定义折线迷你图的外观
  • 包含属性：
    LineColor
  • 用途：控制折线类型迷你图的视觉样式
ColumnStyle (ColumnStyle)
  • 自定义柱状和WinLoss迷你图的外观
  • 用途：控制柱状类型迷你图的视觉样式
BackInterior (BrushInfo)
  • 自定义控件的背景色
  • 默认值：白色
  • 用途：设置迷你图的背景外观

Key Methods

核心方法

GetHighPoint() - Retrieves highest point value from sparkline
GetLowPoint() - Retrieves lowest point value from sparkline
GetStartPoint() - Retrieves start point value from sparkline
GetEndPoint() - Retrieves end point value from sparkline
GetHighPoint() - 从迷你图中检索最高数据点的值
GetLowPoint() - 从迷你图中检索最低数据点的值
GetStartPoint() - 从迷你图中检索起始数据点的值
GetEndPoint() - 从迷你图中检索结束数据点的值

Common Use Cases

常见使用场景

Use Case 1: Embedded Table Trends

场景1：嵌入表格的趋势展示

Place sparklines in DataGridView cells to show trends alongside tabular data without expanding table width.
将迷你图放置在DataGridView单元格中，在不增加表格宽度的前提下，在表格数据旁同步展示趋势。

Use Case 2: Dashboard KPIs

场景2：仪表盘KPI展示

Display multiple compact sparklines on dashboards to show key performance indicator trends at a glance.
在仪表盘上放置多个紧凑的迷你图，让用户可一眼查看关键性能指标的趋势变化。

Use Case 3: Financial Data Visualization

场景3：金融数据可视化

Use line sparklines to show stock price movements, column sparklines for volume data, and win/loss for gain/loss patterns.
使用折线迷你图展示股价走势，柱状迷你图展示交易量数据，WinLoss迷你图展示涨跌规律。

Use Case 4: Performance Metrics

场景4：性能指标展示

Show server performance, response times, or system metrics over time in minimal space.
在极小空间内展示服务器性能、响应时间或系统指标的时序变化。

Use Case 5: Comparison Widgets

场景5：对比组件

Create side-by-side sparkline comparisons for A/B testing results, campaign performance, or metric comparisons.
创建并排的迷你图对比，用于A/B测试结果、活动表现或者指标对比场景。