syncfusion-react-sparkline

实现 Syncfusion React 迷你图

全面介绍如何实现 Syncfusion React Sparkline 组件——轻量、紧凑的图表，可在有限空间内直观呈现数据趋势，无需坐标轴或坐标。

何时使用此技能

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

• 在仪表板或网格中创建紧凑的数据可视化
• 在数据旁以内嵌方式显示趋势指标
• 实现占用空间极小的迷你图表
• 在表格单元格或小型容器中显示数据模式
• 创建 5 种迷你图类型中的任意一种：Line、Column、Area、Win-Loss 或 Pie
• 为迷你图添加工具提示、标记或数据标签
• 使用主题和颜色自定义迷你图的外观
• 实现无障碍且响应式的迷你图可视化
• 将迷你图集成到网格或其他组件中
• 使用范围带突出显示特定数据范围

组件概览

Syncfusion React Sparkline 是一种高度精简的图表组件，能够以简单、紧凑的格式呈现数据。主要功能包括：

• 5 种迷你图类型： Line、Column、Area、Win-Loss 和 Pie
• 交互功能： 支持自定义和模板的工具提示、跟踪线
• 视觉标记： 突出显示起点、终点、最高点、最低点和负值点
• 数据标签： 使用格式设置在特定点显示数值
• 范围带： 沿 y 轴突出显示特定数值范围
• 坐标轴自定义： 支持 Numeric、Category 和 DateTime 值类型
• 主题： Material、Fabric、Bootstrap 和 Highcontrast 主题
• 无障碍： 符合 WCAG 2.2 和 Section 508 标准，并支持 WAI-ARIA
• 网格集成： 专为在网格单元格中无缝使用而设计
• 本地化： 支持国际化

文档与导航指南

快速入门

📄 阅读： references/getting-started.md

• 依赖项和软件包安装（@syncfusion/ej2-react-charts）
• 使用 Vite 创建 React 应用
• 将 SparklineComponent 添加到项目中
• 为工具提示功能注入模块
• 使用 dataSource 属性绑定数据源
• 更改迷你图类型（Line、Column、Area、Win-Loss、Pie）
• 基本工具提示配置
• 首个可运行示例

迷你图类型

📄 阅读： references/sparkline-types.md

• 所有 5 种迷你图类型概览
• Line 类型：连续趋势可视化
• Column 类型：离散值比较
• Area 类型：填充式趋势可视化
• Win-Loss 类型：二元结果表示
• Pie 类型：比例数据展示
• 根据数据和使用场景选择类型的指南
• 每种类型的完整示例

外观自定义

📄 阅读： references/appearance-customization.md

• 使用 containerArea 配置迷你图边框
• 自定义内边距（左、右、上、下）
• 容器背景颜色
• 主题选择（Material、Fabric、Bootstrap、Highcontrast）
• 颜色与样式最佳实践
• 视觉设计指南

数据标签

📄 阅读： references/data-labels.md

• 为特定数据点启用数据标签
• 可见性选项：All、Start、End、High、Low、Negative
• 自定义填充颜色、边框、不透明度和文本样式
• 使用 format 属性设置数据标签文本的格式
• 同时显示 x 值和 y 值
• 数据标签的位置与可读性

标记

📄 阅读： references/markers.md

• 为迷你图数据点添加标记
• 标记可见性选项：All、Start、End、High、Low、Negative
• 特殊数据点标记配置
• 自定义标记填充、边框、大小和不透明度
• 将标记与其他功能结合使用
• 标记使用最佳实践

用户交互

📄 阅读： references/user-interaction.md

• Tooltip 配置和 SparklineTooltip 注入
• Tooltip 自定义（填充、文本样式、格式、边框）
• 使用 HTML 创建自定义 Tooltip 模板
• 用于鼠标跟踪的跟踪线功能
• 跟踪线颜色和样式
• 交互功能最佳实践

高级功能

📄 阅读： references/advanced-features.md

• 使用 valueType（Numeric、Category、DateTime）自定义坐标轴
• 设置最小值和最大值（minX、maxX、minY、maxY）
• 坐标轴线自定义（颜色、宽度、不透明度、dashArray）
• 用于突出显示数值范围的范围带
• 多个范围带配置
• 特殊点自定义（起点、终点、正值、负值、低值）
• Win-Loss Sparkline 的平局点颜色
• Sparkline 尺寸（容器、像素、百分比尺寸）
• 本地化和区域设置支持

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• WAI-ARIA 属性（img 角色、aria-label、aria-hidden）
• 键盘交互（Ctrl + P 打印）
• 屏幕阅读器支持
• 从右向左（RTL）支持
• 颜色对比度指南
• 移动设备支持
• 无障碍测试工具

API 参考

📄 阅读： references/api-reference.md

• SparklineComponent 的完整 API 参考：props、事件、方法、子指令和用法示例（基于官方 Syncfusion React Sparkline API）。

快速入门

安装

npm install @syncfusion/ej2-react-charts --save

基本 Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
    />
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

带 Tooltip 的 Sparkline

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function App() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
    >
      <Inject services={[SparklineTooltip]} />
    </SparklineComponent>
  );
}

export default App;
ReactDOM.render(<App />, document.getElementById('charts'));

常见模式

带标记的柱形 Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function ColumnSparkline() {
  const data = [3, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Column"
      height="150px"
      width="300px"
      markerSettings={{ visible: ['High', 'Low'] }}
      highPointColor="green"
      lowPointColor="red"
    />
  );
}

export default ColumnSparkline;
ReactDOM.render(<ColumnSparkline />, document.getElementById('charts'));

Win-Loss Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function WinLossSparkline() {
  const data = [12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="WinLoss"
      height="150px"
      width="300px"
      tiePointColor="blue"
    />
  );
}

export default WinLossSparkline;
ReactDOM.render(<WinLossSparkline />, document.getElementById('charts'));

带数据标签的 Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithLabels() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Line"
      height="150px"
      width="300px"
      dataLabelSettings={{
        visible: ['Start', 'End'],
        border: { color: 'blue', width: 1 },
        fill: 'blue',
        opacity: 0.4,
        textStyle: { color: 'white' }
      }}
    />
  );
}

export default SparklineWithLabels;
ReactDOM.render(<SparklineWithLabels />, document.getElementById('charts'));

带范围带的 Sparkline

import { SparklineComponent } from '@syncfusion/ej2-react-charts';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

function SparklineWithRangeBand() {
  const data = [0, 6, 4, 1, 3, 2, 5];
  
  return (
    <SparklineComponent
      dataSource={data}
      type="Area"
      height="150px"
      width="300px"
      rangeBandSettings={[
        { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
      ]}
    />
  );
}

export default SparklineWithRangeBand;
ReactDOM.render(<SparklineWithRangeBand />, document.getElementById('charts'));

关键 Props 参考

属性	类型	说明
dataSource	object[]	Sparkline 的数据
type	string	Sparkline 类型：'Line'、'Column'、'Area'、'WinLoss'、'Pie'
xName	string	dataSource 中表示 x 轴的属性名称
yName	string	dataSource 中表示 y 轴的属性名称
height	string	Sparkline 的高度
width	string	Sparkline 的宽度
fill	string	Sparkline 的颜色
valueType	string	轴值类型：'Numeric'、'Category'、'DateTime'
markerSettings	object	标记配置
dataLabelSettings	object	数据标签配置
tooltipSettings	object	Tooltip 配置
axisSettings	object	坐标轴最小值/最大值和线条自定义
rangeBandSettings	object[]	范围带配置
theme	string	主题：'Material'、'Fabric'、'Bootstrap'、'Highcontrast'
padding	object	Sparkline 周围的内边距（左、右、上、下）
containerArea	object	Sparkline 区域的边框和背景

常见用例

1. 仪表板趋势指标： 在指标旁内联显示 KPI 趋势
2. 网格集成： 在表格单元格中显示迷你图表
3. 金融数据： 使用 Win-Loss Sparkline 显示股市涨跌
4. 性能监控： 快速可视化服务器指标或响应时间
5. 对比视图： 并排显示多个 Sparkline 以比较数据
6. 移动仪表板： 为小屏幕提供紧凑的可视化图表
7. 电子邮件报告： 可快速渲染的轻量级图表
8. 实时监控： 简单、快速更新的可视化图表

后续步骤

1. 从入门指南开始： 阅读 references/getting-started.md，了解安装和基本设置
2. 选择类型： 阅读 references/sparkline-types.md，选择合适的迷你图类型
3. 自定义外观： 阅读 references/appearance-customization.md，了解样式设置
4. 添加交互功能： 阅读 references/user-interaction.md，了解工具提示和跟踪线
5. 高级配置： 阅读 references/advanced-features.md，了解坐标轴、范围带等内容