syncfusion-blazor-sparkline-charts

实现 Sparkline 图表

NuGet： Syncfusion.Blazor.Charts + Syncfusion.Blazor.Themes（或单独使用 Syncfusion.Blazor.Sparkline 包） 命名空间： Syncfusion.Blazor.Charts

何时使用此技能

当你需要指导用户在其应用程序中实现 Syncfusion Blazor Sparkline 图表时，请使用此技能。Sparkline 是小巧、字宽级别的图表，旨在一目了然地展示数据趋势，非常适合在文本、表格或仪表板中进行内嵌可视化。

在用户有以下需求时使用：

• 希望在仪表板或表格中添加内嵌趋势图
• 需要带有趋势可视化效果的紧凑型 KPI 指标
• 询问小型图表、迷你图表或微型图表
• 希望在不使用完整图表坐标轴或标签的情况下可视化趋势
• 需要在有限空间内展示高密度数据
• 询问 sparkline、折线趋势或内嵌数据可视化
• 希望在电子邮件报告或移动视图中添加视觉指示器

组件概述

Sparkline 图表是针对小空间优化的专用数据可视化图表。与功能齐全的图表不同，Sparkline 图表：

• 无需坐标轴、图例或大量标签即可展示趋势
• 可嵌入文本或表格单元格
• 一目了然地呈现数据模式
• 支持多种图表类型（折线、面积、柱形、WinLoss、饼图）
• 突出显示特殊数据点（最高点、最低点、负值、起始点、结束点）
• 可在悬停时提供详细信息提示框

适用场景： KPI 仪表板、数据表格、财务报告、分析摘要、移动界面、电子邮件报告，以及任何需要紧凑趋势可视化的场景。

文档与导航指南

此技能采用渐进式披露。主文件 SKILL.md（即本文件）提供概述和导航。请根据用户需求阅读相应的参考文件：

API 参考

📄 阅读： references/api-reference.md

• 完整的 SfSparkline 属性、方法和事件列表
• 支持的子组件和嵌套标签
• 枚举和值类型参考
• 用于快速实现的简洁示例

入门指南

📄 阅读： references/getting-started.md

• 安装和 NuGet 包设置
• 基本 Sparkline 实现
• CSS 主题导入
• 第一个可运行示例
• WebAssembly 与 Server 的设置差异

图表类型与可视化

📄 阅读： references/chart-types.md

• 折线 Sparkline（默认类型，用于展示连续趋势）
• 面积 Sparkline（填充式折线图）
• 柱形 Sparkline（竖直条形）
• WinLoss Sparkline（二元胜负指示器）
• 饼图 Sparkline（比例分段）
• 各类型的适用场景
• 特定类型的属性和示例

📄 阅读： references/data-binding.md

• DataSource 属性配置
• 数组和列表数据绑定
• XName 和 YName 字段映射
• 值类型和格式设置
• 动态数据更新
• 数据转换模式

数据呈现

📄 阅读： references/markers-and-data-labels.md

• 标记配置（形状、大小、颜色）
• 数据标签的显示和格式设置
• 边缘标签处理
• 标签模板
• 特定数据点的标记显示

📄 阅读： references/special-points-customization.md

• 突出显示起始点和结束点
• 最高点自定义
• 最低点自定义
• 负值点样式设置
• 特殊数据点的颜色和大小配置

📄 阅读： references/range-bands.md

• 范围带配置（水平阈值区域）
• 范围起始值和结束值
• 颜色和不透明度自定义
• 多个范围带
• 使用场景：目标、阈值、可接受范围

自定义与样式

📄 阅读： references/axis-customization.md

• 轴线可见性与样式
• 最小值和最大值配置
• 数值显示模式
• 轴标签格式设置
• 网格线自定义

📄 阅读： references/dimensions-and-appearance.md

• 宽度和高度配置
• 内边距和外边距
• 边框样式
• 背景色和填充色
• 线宽自定义
• RTL（从右到左）支持
• 容器区域样式

交互与事件

📄 阅读： references/user-interaction-and-events.md

• 工具提示配置和模板
• 工具提示格式设置
• 悬停跟踪线
• 组件事件（OnLoaded、OnPointRendering、OnSeriesRendering、OnMarkerRendering、OnDataLabelRendering、OnPointRegionMouseClick、OnResizing、OnAxisRendering）
• 方法：RefreshAsync()
• 用户交互模式

全球化与无障碍功能

📄 阅读： references/globalization-and-accessibility.md

• 国际化和本地化
• 数字格式自定义
• 货币和日期格式设置
• RTL 支持
• 符合 WCAG 标准
• 键盘导航
• 屏幕阅读器支持

快速入门示例

下面是一个显示销售趋势的极简迷你图：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts

<h3>Monthly Sales Trend</h3>

<SfSparkline DataSource="@SalesData" 
              XName="Month" 
              YName="Sales"
              Type="SparklineType.Line"
              Height="50px" 
              Width="200px"
              Fill="#3366cc"
              LineWidth="2"  TValue="SalesInfo">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.All }" 
                             Size="4" 
                             Fill="#ffffff" 
                             Border="new SparklineMarkerBorder { Color = "#3366cc", Width = 1 }">
    </SparklineMarkerSettings>
    <SparklineTooltipSettings  TValue="SalesInfo" Visible="true" Format="${Month}: ${Sales}"></SparklineTooltipSettings>
</SfSparkline>

@code {
    public class SalesInfo
    {
        public string Month { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesInfo> SalesData = new List<SalesInfo>
    {
        new SalesInfo { Month = "Jan", Sales = 35000 },
        new SalesInfo { Month = "Feb", Sales = 28000 },
        new SalesInfo { Month = "Mar", Sales = 34000 },
        new SalesInfo { Month = "Apr", Sales = 32000 },
        new SalesInfo { Month = "May", Sales = 40000 },
        new SalesInfo { Month = "Jun", Sales = 32000 },
        new SalesInfo { Month = "Jul", Sales = 35000 }
    };
}

结果： 一个紧凑的折线图，显示月度销售趋势，并带有标记和工具提示。

常见模式

模式 1：带迷你图的 KPI 仪表板

当用户需要一个显示多个 KPI 及趋势指标的仪表板时：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<div class="kpi-grid">
    <div class="kpi-card">
        <h4>Revenue</h4>
        <p class="value">$1.2M <span class="change positive">+15%</span></p>
        <SfSparkline DataSource="@RevenueData" Type="SparklineType.Area" Height="40px" Width="150px" Fill="#28a745">
        </SfSparkline>
    </div>
    
    <div class="kpi-card">
        <h4>Orders</h4>
        <p class="value">5,432 <span class="change negative">-3%</span></p>
        <SfSparkline DataSource="@OrdersData" Type="SparklineType.Column" Height="40px" Width="150px" Fill="#dc3545">
        </SfSparkline>
    </div>
</div>

@code {
    public List<double> RevenueData { get; set; } = new()
    {
        820000, 900000, 870000, 960000, 1100000, 1200000
    };

    public List<double> OrdersData { get; set; } = new()
    {
        5200, 5400, 5600, 5300, 5500, 5432
    };
}

引导用户： 累计指标使用 Area 类型，离散计数使用 Column 类型，并配置特殊点以突出显示最高值和最低值。

模式 2：带内嵌趋势图的数据表

当用户想要在表格单元格中添加迷你图时：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<table class="data-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Current</th>
            <th>Trend (7 days)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Products)
        {
            <tr>
                <td>@product.Name</td>
                <td>@product.CurrentValue.ToString("C")</td>
                <td>
                    <SfSparkline DataSource="@product.TrendData" 
                                  Type="SparklineType.Line" 
                                  Height="30px" 
                                  Width="100px"
                                  LineWidth="1">
                    </SfSparkline>
                </td>
            </tr>
        }
    </tbody>
</table>
@code {
    public class ProductInfo
    {
        public string Name { get; set; }
        public decimal CurrentValue { get; set; }
        public List<double> TrendData { get; set; } = new();
    }

    public List<ProductInfo> Products { get; set; } = new()
    {
        new ProductInfo
        {
            Name = "Product A",
            CurrentValue = 1250.75m,
            TrendData = new List<double> { 1200, 1220, 1235, 1240, 1245, 1250, 1251 }
        },
        new ProductInfo
        {
            Name = "Product B",
            CurrentValue = 980.30m,
            TrendData = new List<double> { 950, 955, 960, 970, 975, 980, 980 }
        }
    };
}

引导用户： 让迷你图保持简洁（不显示标记和标签），在各行使用一致的尺寸，并启用工具提示以显示详细信息。

模式 3：胜负指示器

当用户需要可视化二元成功/失败结果时：

@page "/sparkline-demo"
@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@WinLossData" 
              Type="SparklineType.WinLoss"
              Height="50px" 
              Width="300px"
              TiePointColor="#ffc107">
    <SparklineAxisSettings MinY="-1" MaxY="1"></SparklineAxisSettings>
</SfSparkline>

引导用户： 使用 WinLoss 类型，数值分别为 1（胜）、-1（负）和 0（平）。配置 TiePointColor，为平局结果使用中性色。

模式 4：突出显示特殊点

当用户想要强调特定数据点时：

@using Syncfusion.Blazor.Charts
<SfSparkline DataSource="@TemperatureData" 
              Type="SparklineType.Line"
              Height="60px" 
              Width="250px">
    <SparklineMarkerSettings Visible="new List<VisibleType> { VisibleType.High, VisibleType.Low }">
    </SparklineMarkerSettings>
    <SparklineHighPointColor>#28a745</SparklineHighPointColor>
    <SparklineLowPointColor>#dc3545</SparklineLowPointColor>
</SfSparkline>

@code {
    public List<int> WinLossData { get; set; } = new()
    {
        1, 1, -1, 0, 1, -1, 1, 1, 0, -1
    };
}

引导用户： 使用 VisibleType 枚举，仅显示 High/Low/Start/End/Negative 点的标记。配置颜色以突出显示。

API 表面参考

请使用 API 参考文件作为 SfSparkline 表面的权威资料。最重要的成员包括：

组件属性：

• DataSource、EnableGroupingSeparator、EnableRtl、EndPointColor、Fill、Format、Height、HighPointColor、ID、LineWidth、LowPointColor、NegativePointColor、Opacity、Palette、Query、RangePadding、StartPointColor、Theme、TiePointColor、Type、ValueType、Width、XName、YName

方法：

• RefreshAsync()

事件：

• OnAxisRendering、OnDataLabelRendering、OnLoaded、OnMarkerRendering、OnPointRegionMouseClick、OnPointRendering、OnResizing、OnSeriesRendering

子组件：

• SparklineAxisLineSettings、SparklineAxisSettings、SparklineBorder、SparklineContainerArea、SparklineContainerAreaBorder、SparklineDataLabelBorder、SparklineDataLabelOffset、SparklineDataLabelSettings、SparklineEvents、SparklineFont、SparklineMarkerBorder、SparklineMarkerSettings、SparklinePadding、SparklineRangeBand、SparklineRangeBandSettings、SparklineTooltipBorder、SparklineTooltipSettings、SparklineTooltipTextStyle、SparklineTrackLineSettings

枚举：

• SparklineRangePadding、SparklineType、SparklineValueType、VisibleType

常见用例

用例 1：金融仪表板

用户希望以内嵌趋势的方式展示股价、投资组合表现或财务 KPI。指南： 使用折线或面积迷你图，并特别标出高点／低点。

用例 2：分析仪表板

用户需要以紧凑的图表展示页面浏览量、用户参与度或转化率。指南： 离散指标使用柱形迷你图，累积数据使用面积迷你图。

用例 3：报告表格

用户希望为数据表添加趋势可视化，同时避免布局杂乱。指南： 使用简洁的折线迷你图（高度为 30-40px），并启用工具提示。

用例 4：电子邮件报告

用户需要在有尺寸限制的电子邮件客户端中清晰呈现的图表。指南： 使用样式简单、尺寸固定的迷你图。

用例 5：移动仪表板

用户需要针对小屏幕优化的数据可视化。指南： 使用紧凑的迷你图，提供便于触控的工具提示，并设置响应式尺寸。

用例 6：性能监控

用户希望可视化服务器指标、响应时间或系统运行状况。指南： 使用带有阈值区域范围带（绿色／黄色／红色）的折线迷你图。

用例 7：电商分析

用户需要查看产品表现趋势、销售速度或库存指标。指南： 销售数量使用柱形迷你图，库存状态使用胜负迷你图。

实施提示

为用户提供指南时：

1. 从简单开始： 先使用基本的 DataSource 和 Type，再逐步添加功能
2. 根据数据选择类型： 连续趋势使用折线图，离散计数使用柱形图，二元结果使用胜负图
3. 保持简洁： 迷你图采用简洁样式时效果最佳，请避免杂乱
4. 启用工具提示： 迷你图没有坐标轴，因此工具提示可提供必要的详细信息
5. 考虑使用场景： 让迷你图的尺寸与周围内容相匹配（内嵌或独立展示）
6. 使用特殊数据点： 标出有意义的数据点（高点／低点），以便快速获取洞察
7. 统一尺寸： 并排显示多个迷你图时，使用统一的尺寸
8. 测试响应式效果： 确保迷你图在不同屏幕尺寸下均能适当缩放

根据用户需要实现的具体功能，阅读上述相应的参考文件。