SuperAPI AI 工具集

syncfusion-angular-sparkline

前端与建站

查看项目

更新于 10-15 17:37

技能介绍

Syncfusion Angular Sparkline 是 Syncfusion 提供的 Angular UI 组件,属于 @syncfusion/ej2-angular-charts 包,用于在很小的空间内展示紧凑型数据可视化。它适合把迷你趋势图内联放置到表格、数据网格或仪表盘中,用少量像素呈现一段时间内的数据变化。

用途与适用场景

该组件主要用于在空间受限的场景中展示数据趋势,典型用途包括:仪表盘中的 KPI 迷你图、财务数据(股价、成交量、汇率)走势、系统性能指标(CPU、内存、磁盘、网络)监控、表格/网格行内趋势对比、胜负或成败类二元结果统计、时间序列的浓缩视图、销售业绩趋势、用户活跃度分析、质量指标与资源使用率监控、IoT 传感器读数以及社交媒体数据统计等。火花线特别适合作为表格或仪表盘中的趋势指示器、顺序数据的可视化呈现,以及展示性能或随时间变化的内联指标。

主要能力

组件支持五种图表类型:Line(默认折线)、Column(柱状)、Area(填充面积)、Pie(比例/构成)和 Win-Loss(二元结果)。交互与标注能力包括:工具提示、数据标签、标记点。标记与数据标签均可针对 All、Start、End、High、Low、Negative 等特定点启用,并可自定义填充、边框、大小与不透明度。还支持范围带(Range Band)以在背景中绘制阈值区间,坐标轴配置(minX、maxX、minY、maxY、intervalX、intervalY、valueType 为 Numeric/Category/DateTime)、特殊点着色(高、低、起点、终点、负值)、线宽、不透明度、填充色、主题切换、CSS 类定制、本地化、RTL 布局、WCAG 无障碍支持、键盘导航以及响应式设计。

使用方式

基本用法是从 @syncfusion/ej2-angular-charts 导入 SparklineModule,在独立组件(standalone: true)的 imports 中引入,然后在模板中使用 <ejs-sparkline> 标签,通过 [dataSource] 绑定数据,并用 xName 和 yName 指定对象数据中 X/Y 字段名,用 type 指定图表类型。使用工具提示时,还需在 providers 中注入 SparklineTooltipService,并配置 [tooltipSettings]。

有一个关键注意事项:当同一页面使用多个火花线组件时,必须为每个组件提供唯一的 id 属性,否则可能无法渲染、渲染错误数据、相互重叠冲突或样式不一致。

常见模式包括:将火花线嵌入表格单元格按行展示趋势;用 markerSettings 突出高点和低点;用 tooltipSettings 配合 ${month}、${sales} 等占位符显示格式化后的精确数值;用 rangeBandSettings 设置可接受范围与警戒范围的阴影区(支持单个对象或多个区间数组);通过 (pointRegionMouseClick)、(sparklineMouseClick) 等事件处理用户交互。

API 关键属性

dataSource(数组,默认 [])绑定数据;xName、yName 指定字段名;type 指定类型(默认 Line);markerSettings 配置标记;dataLabelSettings 配置数据标签(含 visible、format、fill、border、textStyle、edgeLabelMode);tooltipSettings 配置工具提示(visible、format、fill、border、textStyle、trackLineSettings);height 默认 '100px'、width 默认 '100%';rangeBandSettings 配置范围带(startRange、endRange、color、opacity);axisSettings 配置坐标轴;highPointColor、lowPointColor、startPointColor、endPointColor、negativePointColor 分别设置特殊点颜色;fill、lineWidth(默认 1,推荐 1-10)、opacity(默认 1,范围 0-1);enableRtl 默认 false;valueType 默认 'Numeric';format 设置数字格式(如 'n2' 保留两位小数、'c' 表示货币);useGroupingSeparator 默认 false 控制千位分隔符;theme 默认 'Material'(另有 Fabric、Bootstrap、HighContrast 等);border、containerArea、padding 用于容器与边框定制。

技能参考文档结构

该技能按主题提供参考文档:getting-started.md 讲解 Angular 19+ 的安装与包设置、基本实现、模块注入与数据绑定,适合首次实现前阅读;sparkline-types.md 对比五种类型及选择标准;markers.md 讲解标记启用与外观定制;data-labels.md 讲解数据标签;advanced-features.md 讲解范围带、坐标轴、交互与响应式尺寸、RTL;appearance-and-accessibility.md 讲解主题、本地化、WCAG 与键盘导航;migration-guide.md 讲解从 EJ1 Sparkline 迁移到 EJ2 的 API 映射、破坏性变更与废弃特性,适合从旧版本升级时阅读。references 文件夹还提供精简的 API 参考(api-reference.md),包含属性锚点、方法链接与事件参数类型。

限制与说明

资料未提供该组件的授权方式、收费模式或价格信息。资料的快速上手示例以 Angular 独立组件与 Angular 19+ 安装为前提;Angular 版本兼容范围、各类型具体行为细节及事件参数的完整定义,请以官方文档和包内实现为准。