syncfusion-winforms-sparkline

实现 Syncfusion Windows Forms Sparkline

Windows Forms Sparkline 控件可在紧凑的图形格式中显示趋势和变化，提供简洁、高密度的数据可视化。Sparkline 不显示坐标轴刻度，能以极小的空间快速概览数据随时间变化的模式。

何时使用此技能

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

• 在 Windows Forms 应用程序中创建紧凑的趋势可视化
• 在小空间（表格单元格、仪表板、报告）中显示高密度数据
• 显示数据模式，而无需详细的坐标轴刻度
• 实现折线、柱形或盈亏 Sparkline 图表
• 突出显示特定数据点（最高值、最低值、起始值、结束值、负值）
• 添加可视标记以强调重要数据点
• 将 Sparkline 绑定到各种数据源（DataTable、IEnumerable、ICollection、IList）
• 自定义 Sparkline 的外观和样式
• 快速比较数据范围
• 构建用于显示趋势和变化的轻量级图形表示

组件概述

Syncfusion Windows Forms Sparkline 是一种信息图形控件，具有以下特点：

• 体积小巧：占用空间极小，适合紧凑显示
• 高数据密度：以极小空间呈现最多信息
• 轻量级渲染：图形效率高，性能出色
• 三种图表类型：折线、柱形和盈亏
• 支持标记：为关键数据点提供可视指示
• 灵活的数据绑定：支持多种数据源类型

主要功能：

• 三种 Sparkline 类型（折线、柱形、盈亏）
• 可自定义颜色的数据点标记
• 突出显示最高值、最低值、起始值、结束值和负值数据点
• 自定义折线和柱形样式
• 自定义背景
• 支持从多种格式绑定数据源
• 与 Visual Studio 工具箱集成的设计器

文档与导航指南

入门

📄 阅读： references/getting-started.md

• 程序集部署和 NuGet 包安装
• 通过设计器向 Windows Forms 添加 Sparkline 控件
• 工具箱集成
• 基本数据源绑定
• 首个 Sparkline 实现
• 向 Sparkline 添加标记
• 突出显示最高值和最低值

Sparkline 类型

📄 阅读： references/sparkline-types.md

• 三种 Sparkline 类型概述
• 折线 Sparkline：连接各个数据点
• 柱形 Sparkline：以竖条表示正值和负值
• 盈亏 Sparkline：以等长柱形表示盈亏模式
• 数据源支持（DataTable、IEnumerable、ICollection、IList）
• 根据使用场景选择类型的指南

标记自定义

📄 阅读： references/marker-customization.md

• 标记属性和配置
• ShowMarker、ShowHighPoint、ShowLowPoint、ShowStartPoint、ShowEndPoint、ShowNegativePoint
• 各类数据点对应的标记颜色
• 折线 Sparkline 标记（所有数据点）
• 柱形 Sparkline 标记（最高值、最低值、起始值、结束值、负值）
• 盈亏 Sparkline 标记
• 使用 BrushInfo 支持渐变
• 完整的标记自定义示例

外观自定义

📄 阅读： references/appearance-customization.md

• 自定义 LineStyle（颜色、外观）
• 自定义 ColumnStyle（颜色、样式）
• BackInterior 属性（背景颜色）
• 完整的样式设置示例

快速入门示例

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

常见模式

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

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

模式 2：盈亏可视化

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

模式 3：带突出显示的柱形 Sparkline

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

模式 4：带所有标记的折线 Sparkline

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

关键属性和方法

基本属性

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）

• 自定义控件的背景颜色
• 默认值：白色
• 用途：设置迷你图的背景外观

关键方法

GetHighPoint() - 获取迷你图中的最高点值

GetLowPoint() - 获取迷你图中的最低点值

GetStartPoint() - 获取迷你图中的起始点值

GetEndPoint() - 获取迷你图中的结束点值

常见用例

用例 1：嵌入式表格趋势

将迷你图放入 DataGridView 单元格，在不增加表格宽度的情况下展示表格数据旁的趋势。

用例 2：仪表板 KPI

在仪表板中显示多个紧凑型迷你图，一目了然地展示关键绩效指标趋势。

用例 3：财务数据可视化

使用折线迷你图展示股价走势，使用柱形迷你图展示成交量数据，并使用 WinLoss 迷你图展示盈亏模式。

用例 4：性能指标

在有限的空间内展示服务器性能、响应时间或系统指标随时间的变化。

用例 5：对比组件

创建并排的迷你图对比，展示 A/B 测试结果、营销活动效果或指标对比。