syncfusion-aspnetcore-sparkline

用途

该技能用于在 ASP.NET Core 应用中实现 Syncfusion Sparkline 组件。Sparkline 是一种非常小的图表，以高度压缩的格式可视化数据，不含坐标轴或坐标，适合在有限空间内展示时间序列趋势，常用于仪表盘和表格中。

主要能力

五种图表类型：折线图（Line）、柱状图（Column）、面积图（Area）、胜负图（Win-Loss）和饼图（Pie）。
视觉增强：标记（全部、起点、终点、高、低、负值）、数据标签、范围带。
交互功能：工具提示和跟踪线。
外观可定制：主题、颜色、边框、内边距。
无障碍支持：符合 WCAG 2.2 AA，支持键盘导航（如 Ctrl+P 打印）。
数据绑定：支持数值、类别和日期时间类型的值类型。
主题支持：Material、Fabric、Bootstrap、HighContrast。

使用方式

在 ASP.NET Core 项目中安装 NuGet 包 Syncfusion.EJ2.AspNet.Core。
配置 TagHelper 并注册脚本管理器。
在 Razor 页面或 MVC 视图中使用 <ejs-sparkline> 标签，设置 id、type、dataSource、xName、yName 等属性，并可添加工具提示、标记、数据标签等子配置。
通过 ViewBag 或模型绑定数据源。

示例代码：

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

<!-- View: Index.cshtml -->
<ejs-sparkline id="sparkline" 
    type="Line" 
    dataSource="ViewBag.DataPoints">
    <e-sparkline-tooltipsettings visible="true"></e-sparkline-tooltipsettings>
</ejs-sparkline>

适用场景

财务仪表盘：使用面积图迷你图在摘要小组件中展示收入趋势。
KPI 监控：使用折线图迷你图并高亮范围带，显示性能指标。
数据表格：在表格列中嵌入迷你图，展示销售历史或随时间变化的表现。
状态报告：使用胜负图迷你图可视化项目结果或测试结果。
移动端仪表盘：使用紧凑的饼图迷你图展示投资组合分配或类别分布。

限制

资料仅涉及与 ASP.NET Core 的集成，未提供其他平台支持、授权收费或性能数据。

技能介绍

用途

主要能力

使用方式

适用场景

限制