syncfusion-aspnetcore-sparkline

实现 Syncfusion Sparkline

何时使用此技能

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

• 创建紧凑的数据可视化 - Sparkline 是非常小型的图表，可在不显示坐标轴或坐标的情况下，以紧凑格式呈现数据
• 与 ASP.NET Core 应用程序集成 - 在 Razor 页面或 MVC 应用程序中设置 Syncfusion Sparkline 控件
• 显示时间数据趋势 - 在有限空间内展示随时间变化的数据模式（非常适合仪表板和网格）
• 突出显示特定数据点 - 使用标记显示最高值、最低值、起始值、结束值或负值
• 支持交互式数据探索 - 添加工具提示和跟踪线，支持用户交互
• 满足无障碍要求 - 确保符合 WCAG 2.2 标准并支持键盘导航

组件概述

Syncfusion Sparkline 是一种轻量级图表组件，可用高度紧凑的格式呈现常见的数据形态。主要特点：

• 占用空间极小 - 非常适合仪表板和网格集成
• 五种图表类型 - 折线图、柱形图、面积图、盈亏图和饼图
• 视觉增强功能 - 标记、数据标签、范围带
• 交互功能 - 工具提示和跟踪线
• 外观可自定义 - 主题、颜色、边框、内边距
• 支持无障碍访问 - 符合 WCAG 2.2 AA 标准并支持键盘快捷键

文档和导航指南

API 参考

📄 阅读： references/api-reference.md

• 完整的 Sparkline 类 API 文档（40 多个属性）
• SparklineAxisSettings、ContainerArea、Padding、Border 配置
• 用于突出显示数据点的 MarkerSettings（All、Start、End、High、Low、Negative）
• 用于配置标签及其位置的 DataLabelSettings
• 支持自定义模板的交互式工具提示设置 TooltipSettings
• 用于突出显示数值范围的 RangeBandSettings
• 用于鼠标跟踪线的 TrackLineSettings
• 五种 SparklineType 选项（Line、Column、Area、Win-Loss、Pie）
• SparklineValueType 选项（Numeric、Category、DateTime）
• 主题支持（Material、Fabric、Bootstrap、HighContrast）
• RangePadding 选项（None、Normal、Additional、Round）
• 全面的事件参考（Load、Loaded、AxisRendering、SeriesRendering 等）
• 用户交互事件（SparklineMouseClick、PointRegionMouseMove 等）
• 数据渲染事件（PointRendering、MarkerRendering、DataLabelRendering、TooltipInitialize）
• 所有 Sparkline 类型的使用模式及代码示例
• Syncfusion 官方 API 参考链接

入门指南

📄 阅读： references/getting-started.md

• ASP.NET Core 项目设置要求
• NuGet 包安装（Syncfusion.EJ2.AspNet.Core）
• TagHelper 配置和脚本管理器注册
• 创建第一个 Sparkline
• 数据源绑定和初始化
• 更改 Sparkline 类型
• 启用工具提示

Sparkline 类型和配置

📄 阅读： references/sparkline-types.md

• 五种图表类型选项（Line、Column、Area、Win-Loss、Pie）
• 不同数据场景下各类型的适用情况
• 各种 Sparkline 类型的实现模式
• 所有类型变体的代码示例

数据功能和自定义

📄 阅读： references/data-features.md

• 数据绑定方式和数据源准备
• 添加标记（All、Start、End、High、Low、Negative）
• 自定义标记外观（填充、边框、大小、不透明度）
• 数据标签配置和数据点选择
• 用于突出显示数值范围的范围带
• 自定义数据标签（填充、边框、文本样式）
• 设置数据标签文本格式

外观与主题

📄 阅读： references/appearance-theming.md

• 容器区域边框和内边距配置
• 自定义背景颜色
• 主题选择（Material、Fabric、Bootstrap、Highcontrast）
• 各主题下的文本颜色和数据标签外观
• 尺寸和间距调整
• CSS 自定义方法

用户交互与工具提示

📄 阅读： references/user-interaction.md

• 工具提示的实现和模块注入
• 自定义工具提示（填充、文本样式、格式、边框）
• 使用自定义 HTML 的工具提示模板
• 跟踪线的配置和行为
• 基于鼠标的点跟踪
• 工具提示格式选项

无障碍访问与部署

📄 阅读： references/accessibility-deployment.md

• 符合 WCAG 2.2 AA 标准并遵循相关规范
• 支持 Section 508 和屏幕阅读器
• 键盘导航快捷键（Ctrl+P 用于打印）
• WAI-ARIA 属性和模式
• 从右到左（RTL）的语言支持
• 色彩对比度和移动设备注意事项
• 无障碍访问验证工具和检查清单

快速入门示例

以下是最简的迷你图实现：

// Controller: Index.cs
public class DataSource
{
    public int x { get; set; }
    public string xval { get; set; }
    public double yval { get; set; }
    
    public static List<DataSource> GetData()
    {
        List<DataSource> data = new List<DataSource>();
        data.Add(new DataSource() { x = 0, xval = "2020", yval = 2000 });
        data.Add(new DataSource() { x = 1, xval = "2021", yval = 3000 });
        data.Add(new DataSource() { x = 2, xval = "2022", yval = 2500 });
        data.Add(new DataSource() { x = 3, xval = "2023", yval = 4000 });
        return data;
    }
}

<ejs-sparkline id="sparkline" 
    type="Line" 
    dataSource="ViewBag.DataPoints">
    <e-sparkline-tooltipsettings visible="true"></e-sparkline-tooltipsettings>
</ejs-sparkline>

常见模式

模式 1：仪表板摘要迷你图

在仪表板摘要卡片中使用紧凑的 Line 迷你图，一目了然地展示关键指标趋势。

模式 2：网格集成

将迷你图嵌入网格列中，以可视化各行数据分布，同时避免占用过多空间。

模式 3：使用 Win-Loss 展示状态指示器

使用 Win-Loss 迷你图展示历史数据中的成功／失败模式或正向／负向结果。

模式 4：金融图表

使用 Column 迷你图比较收入和支出，并使用 Area 迷你图展示累计财务趋势。

模式 5：突出显示数据点

组合使用标记和范围带，突出显示异常值（高／低点）和目标范围。

关键属性

属性	用途	示例
type	设置迷你图表类型	type="Line"
dataSource	将数据绑定到迷你图	dataSource="@ViewBag.Data"
xName	X 轴数据字段	xName="xval"
yName	Y 轴数据字段	yName="yval"
theme	设置颜色主题	theme="Material"
markerSettings.visible	显示数据点标记	visible="All"
dataLabelSettings.visible	显示数据标签	visible="All"
tooltipSettings.visible	启用工具提示	visible="true"
trackLineSettings.visible	悬停时显示跟踪线	visible="true"

常见用例

1. 财务仪表板：在摘要小组件中使用 Area 迷你图展示收入趋势
2. KPI 监控：使用 Line 迷你图和突出显示的范围带展示绩效指标
3. 数据表：在网格列中添加迷你图，展示销售历史或随时间变化的绩效
4. 状态报告：使用 Win-Loss 迷你图可视化项目结果或测试结果
5. 移动仪表板：使用紧凑的 Pie 迷你图展示投资组合分配或类别分布