syncfusion-react-sparkline

用途

Syncfusion React Sparkline 是一个高度精简的图表组件，用于在最小空间内呈现数据趋势，不显示坐标轴或坐标刻度。它适合在仪表盘、数据网格单元格或小型容器中以内联方式展示紧凑的数据可视化，例如趋势指示器、迷你图表或数据模式。

主要能力

5 种 Sparkline 类型：Line（折线，连续趋势）、Column（柱状，离散值对比）、Area（面积，填充趋势）、Win-Loss（胜负，二元结果）、Pie（饼图，比例数据）。
交互功能：可自定义的工具提示与模板、鼠标跟踪线（track line）。
视觉标记：可高亮起点、终点、最高点、最低点和负值点。
数据标签：在指定点显示数值，支持格式化。
范围带（Range Bands）：沿 y 轴高亮特定数值区间。
坐标轴定制：支持 Numeric、Category、DateTime 三种值类型，可设置 min/max 及轴线样式。
主题：Material、Fabric、Bootstrap、Highcontrast。
无障碍：符合 WCAG 2.2、Section 508，支持 WAI-ARIA。
网格集成：设计上可无缝嵌入网格单元格。
本地化：支持国际化。

使用方式

安装依赖：

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

基础用法（折线）：

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'));

带工具提示（需注入 SparklineTooltip 服务）：

import { SparklineComponent, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';

<SparklineComponent
  dataSource={data}
  type="Area"
  height="150px"
  width="300px"
  tooltipSettings={{ visible: true, format: '${x} : ${y}' }}
>
  <Inject services={[SparklineTooltip]} />
</SparklineComponent>

带标记点的柱状图：

<SparklineComponent
  dataSource={data}
  type="Column"
  height="150px"
  width="300px"
  markerSettings={{ visible: ['High', 'Low'] }}
  highPointColor="green"
  lowPointColor="red"
/>

胜负图（Win-Loss）：

<SparklineComponent
  dataSource={[12, 15, -10, 13, 15, 6, -12, 17, 13, 0, 8, -10]}
  type="WinLoss"
  height="150px"
  width="300px"
  tiePointColor="blue"
/>

带数据标签：

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

带范围带：

<SparklineComponent
  dataSource={data}
  type="Area"
  height="150px"
  width="300px"
  rangeBandSettings={[
    { startRange: 1, endRange: 3, color: '#bfd4fc', opacity: 0.4 }
  ]}
/>

关键属性

dataSource（object[]）：图表数据。
type（string）：'Line'、'Column'、'Area'、'WinLoss'、'Pie'。
xName / yName（string）：从 dataSource 中取 x/y 轴的属性名。
height / width（string）：尺寸。
fill（string）：颜色。
valueType（string）：'Numeric'、'Category'、'DateTime'。
markerSettings、dataLabelSettings、tooltipSettings、axisSettings（object）：标记、数据标签、工具提示、坐标轴配置。
rangeBandSettings（object[]）：范围带配置。
theme（string）：'Material'、'Fabric'、'Bootstrap'、'Highcontrast'。
padding（object）：四周内边距（left、right、top、bottom）。
containerArea（object）：图表区域的边框与背景。

适用场景

仪表盘趋势指示：与指标并排展示 KPI 趋势。
网格集成：在表格单元格中显示迷你图。
金融数据：用 Win-Loss 图展示股市涨跌。
性能监控：快速可视化服务器指标或响应时间。
对比视图：多个 Sparkline 并排比较数据。
移动端仪表盘：适配小屏幕的紧凑可视化。
邮件报告：渲染快速的轻量图表。
实时监控：简单、快速更新的可视化。

限制

资料未提供关于收费、价格、平台兼容性、性能上限或具体效果保证的说明，相关内容暂未提供。

技能介绍

用途

主要能力

使用方式

关键属性

适用场景

限制