用途
Syncfusion EJ2 Sparkline 是一个轻量级数据可视化组件，用于在紧凑区域内展示数据趋势、对比、占比和结果模式。它适合仪表盘、卡片、表格、网格、报表和 KPI 摘要等场景。
该技能覆盖以下范围：
- EJ2 TypeScript，使用 @syncfusion/ej2-charts
- EJ2 JavaScript，使用 ej.charts.Sparkline
- 基于 npm 和打包工具的 TypeScript 应用
- 基于全局 CDN 的 JavaScript 应用
- Line、Column、Area、Pie 和 WinLoss 五种 Sparkline 类型
- 标记点、数据标签、工具提示、追踪线和范围区间
- 外观、坐标轴范围、无障碍、RTL 和本地化
- 动态属性与数据源更新
使用该技能时，不要生成 Vue、React、Angular、Composition API、指令、provider 或单文件组件示例。
平台支持
TypeScript：适用于需要静态类型检查、IDE IntelliSense、ES module 导入、npm 包管理、Webpack 或其他打包工具、类型化事件参数以及显式可选功能模块注入的项目。从 @syncfusion/ej2-charts 导入组件，并通过 new Sparkline(configuration) 创建、appendTo('#sparkline') 渲染。基础 Sparkline 功能不需要模块注入。以下功能无需可选模块注入即可工作：基础渲染、Line/Column/Area/Pie/WinLoss 类型、坐标轴范围与参考线、标记点、数据标签、范围区间、特殊点颜色、外观定制、渲染事件。工具提示和追踪线功能需要注入 SparklineTooltip；不要调用空的注入方法 Sparkline.Inject()。
JavaScript：适用于需要直接在浏览器中执行、基于 CDN 加载依赖、无需 TypeScript 编译、无需模块打包器、使用全局 EJ2 命名空间的项目。通过 new ej.charts.Sparkline(configuration) 创建组件并 appendTo('#sparkline')。当加载完整的 EJ2 全局 bundle 时，通常不需要显式进行 TypeScript 风格的功能注入。
主要能力
支持的迷你图类型包括：
- Line：用于有序趋势和连续序列
- Column：用于离散数值对比
- Area：当趋势以及与基线的量级关系重要时使用；除非数据源本身包含累计值，否则不要把 Area 描述为累计
- Pie：用于少量有意义的占比
- WinLoss：正值表示成功，负值表示失败，零表示平局或中性结果；用 fill 表示正向结果，negativePointColor 表示负向结果，tiePointColor 表示中性结果；不要用 highPointColor 和 lowPointColor 作为 WinLoss 的主要颜色
数据绑定方式包括：数值数组（不要为其配置字段映射）、带数值 x 值的对象数组、带分类 x 值的对象数组、带 DateTime x 值的对象数组。使用 valueType: 'Numeric' 表示数值 x 值，'Category' 表示字符串 x 值，'DateTime' 表示 JavaScript Date 值；不要使用 valueType: 'Double'。
可选功能与模块对应关系：基础渲染、Sparkline 类型、标记点、数据标签、坐标轴配置、范围区间和外观均无需可选模块；工具提示和追踪线需要 SparklineTooltip。
配置层级：标记点使用 markerSettings，数据标签使用 dataLabelSettings，工具提示使用 tooltipSettings，追踪线使用 tooltipSettings.trackLineSettings.visible，范围区间使用 rangeBandSettings（含 startRange、endRange），水平参考线使用 axisSettings.lineSettings.visible。
还涉及：坐标轴范围（minX、maxX、minY、maxY）、参考线值与外观、固定对比刻度、动态范围计算；特殊点高亮（高、低、起点、终点、负值点）、标记点填充/边框/透明度/大小及渲染事件；数据标签可见性、格式与外观；工具提示可见性、格式与模板；范围区间的单条/多条配置、颜色与透明度、坐标轴对齐及运行时更新；无障碍与本地化，包括文本替代、颜色对比、非颜色视觉线索、数据表替代、动态更新播报、原生键盘操作、RTL 渲染、本地化分类以及按区域设置的数字和日期格式。Sparkline 不提供传统的 x 轴与 y 轴标签、刻度标签、标签旋转或轴标签样式模型。
使用方式
安装 EJ2 Charts 包：npm install @syncfusion/ej2-charts。所需的传递依赖会自动安装；除非包管理器报告具体的解析问题，否则不要单独要求安装 ej2-base、ej2-data 或 ej2-svg-base。主题按需配置，例如 theme: 'Material'。
宿主容器需具备可用宽度与高度，例如 .sparkline-wrapper { width: 100%; max-width: 500px; } 与 #sparkline { width: 100%; height: 140px; }。仅在宿主元素存在后再渲染；若查询不到宿主元素应抛出错误。
验证流程
生成代码前需依次确认：平台（TypeScript、JavaScript 或两者，不要用框架专用包装替代）；Sparkline 类型（Line、Column、Area、Pie、WinLoss，在根级配置 type）；数据源结构（数值数组、数值型 x、分类型 x、DateTime 型 x）；valueType（Numeric、Category、DateTime，不用 Double）；可选功能对应的模块；配置层级正确性；宿主元素存在、选择器与宿主 ID 匹配、父容器宽度可用、Sparkline 高度可用、已加载 EJ2 主题样式表，以及在隐藏父容器中初始化的组件在可见后需要刷新。
适用场景
适用于需要展示紧凑数据趋势、在仪表盘卡片中加入 Sparkline、在表格或网格单元格中加入 Sparkline、渲染 Line/Column/Area/Pie/WinLoss 迷你图、绑定数值数组或通过 xName/yName 绑定对象数据、配置 Numeric/Category/DateTime 的 x 值、高亮高/低/起点/终点/负值点、为选定点添加标记、显示数据标签、启用工具提示、启用追踪线、配置一个或多个范围区间、设置固定 x 轴或 y 轴范围、自定义水平参考线、应用颜色/边框/透明度/内边距/主题、动态更新数据源、运行时切换 Sparkline 类型、通过事件自定义渲染点、实现无障碍文本与数据替代、启用从右到左渲染，以及对周边标签、摘要、数字或日期进行本地化。
限制
Sparkline 不提供传统的 x 轴与 y 轴标签、刻度标签、标签旋转或轴标签样式模型。使用该技能时不应生成 Vue、React、Angular、Composition API、指令、provider 或单文件组件示例。工具提示和追踪线依赖 SparklineTooltip 模块注入。组件在隐藏父容器中初始化后，需在变为可见后刷新。
导航参考
获取开始参考 getting-started.md（包安装、TypeScript/JavaScript/CDN 设置、容器设置、初始渲染、Numeric/Category/DateTime 绑定、动态数据源更新）；类型参考 sparkline-types.md；外观与样式参考 appearance-styling.md；标记点与特殊点参考 markers-and-points.md；数据标签与工具提示参考 data-labels-and-tooltips.md；范围区间参考 range-bands.md；坐标轴定制参考 axis-customization.md；用户交互参考 user-interaction.md；无障碍与本地化参考 accessibility-localization.md。