# @data-ui/sparkline 中文文档

规范地址：https://npmcn.com/package/%40data-ui/sparkline/

版本：0\.0\.84
npm 元数据更新时间：2022-06-12T16:52:55.503Z
中文译文更新时间：2026-11-11T12:59:20.199Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40data-ui/sparkline
原文对照：https://npmcn.com/package/%40data-ui/sparkline/?lang=original
项目主页：https://github.com/williaster/data-ui#readme
源码仓库：https://github.com/williaster/data-ui

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：116 kB，31 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：15 个
- peer 依赖：react ^15\.0\.0-0 \|\| ^16\.0\.0-0，react-dom ^15\.0\.0-0 \|\| ^16\.0\.0-0
- 首次发布：2017-08-20T23:47:34.393Z
- 最新版本发布：2019-11-19T23:44:31.497Z
- 近 30 天下载量：13062（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 0 个）

## 中文简介

反应 + d3 创建火花库

## 安装

```sh
npm install @data-ui/sparkline
```

也可以使用：`pnpm add @data-ui/sparkline`、`yarn add @data-ui/sparkline`、`bun add @data-ui/sparkline`

## README

# @ data- ui/ sparkline (中文(简体) )

用于创建花花线的 React + d3 库 [ưμ㼯a](https://npmcn.com/package/%40data-ui/sparkline/vx-demo.now.sh)。 。 。 .

`npm install --save @data-ui/sparkline`

[![](https://img.shields.io/npm/v/@data-ui/sparkline.svg?style=flat-square)](https://img.shields.io/npm/v/@data-ui/sparkline.svg?style=flat-square "package version")

![](https://user-images.githubusercontent.com/4496521/29400148-001a942c-82e1-11e7-85e5-a77b0db97b79.png)

拆解它住在这里 [(原始内容存档于2017-10-21). williaster.github.io/data-ui](https://williaster.github.io/data-ui)。 。 。 .

## 示例用途

火花线可以使用容器来堆肥 `<Sparkline />` 儿童,包括一名或多名儿童 `<*Series />` 组件和参考行或带。 此外,您还可以使用导出的自定义美学 `<PatternLines />` 财务报告和审定财务报表 `<LinearGradient/>` 组件.

请注意,儿童的顺序是: `<Sparkline />` 确定它们的渲染顺序, 例如 a `<HorizontalReferenceLine />` 在一个之后通过 `<BarSeries />` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我会在栏杆上铺线.

```javascript
import {
  Sparkline,
  LineSeries,
  HorizontalReferenceLine,
  BandLine,
  PatternLines,
  PointSeries } from '@data-ui/sparkline';
import { allColors } from '@data-ui/theme'; // open-color colors

const data = Array(25).fill().map(Math.random);

<Sparkline
      ariaLabel="A line graph of randomly-generated data"
      margin={{ top: 24, right: 64, bottom: 24, left: 64,}}
      width={500}
      height={100}
      data={data}
      valueAccessor={datum => datum}
    >
      {/* this creates a <defs> referenced for fill */}
      <PatternLines
        id="unique_pattern_id"
        height={6}
        width={6}
        stroke={allColors.grape[6]}
        strokeWidth={1}
        orientation={['diagonal']}
      />
      {/* display innerquartiles of the data */}
      <BandLine
        band="innerquartiles"
        fill="url(#unique_pattern_id)"
      />
      {/* display the median */}
      <HorizontalReferenceLine
        stroke={allColors.grape[8]}
        strokeWidth={1}
        strokeDasharray="4 4"
        reference="median"
      />
      {/* Series children are passed the data from the parent Sparkline */}
      <LineSeries
        showArea={false}
        stroke={allColors.grape[7]}
      />
      <PointSeries
        points={['min', 'max']}
        fill={allColors.grape[3]}
        size={5}
        stroke="#fff"
        renderLabel={val => val.toFixed(2)}
      />
    </Sparkline>
```

## 构成部分

检查故事本中的示例源代码和PropTable标签 [(原始内容存档于2017-10-21). williaster.github.io/data-ui](https://williaster.github.io/data-ui) 为了更多!

#### `<Sparkline />`

这个 `Sparkline` 组件生成 `<svg />` 并协调所有的儿童系列和参考线的尺度。 它需要下列道具: It道具:

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 线形标签 | PropTypes.string. is required 互联网档案馆的存檔,存档日期2013-10-02 | \- 说吧 | Svg 的无障碍标签 |
| 儿童 | ProjectTypes.node.is 必需 | \- 说吧 | 儿童系列、参考线、数据或其他有效的svg儿童 |
| 类Name | PropTypes.string (英语) | \- 说吧 | 可选类Name 要添加到 svg |
| 数据 | PropTypes.array (英语) | \[ | 共享的数据,项目可以是形状或数字 |
| 高度 | PropTypes.number.is 必需 | \- 说吧 | Svg 的高度,包括上下边 |
| 边距 | PropTypes.shape ({上:PropTypes. number,右:PropTypes. number,下:PropTypes. number,左:PropTypes. number }) | {上:16,右:16,下:16,左:16}} | 图表边距,留点地方给标签! 注 0 可剪接线条和点线。 部分 {上/右/下/左} 对象被其他默认值填充 |
| 最大数 | PropTypes. 数 | \- 说吧 | 可选地设定图表的最大y值( 例如, 用于协调多条 Sparklines 的轴) |
| 分钟 | PropTypes. 数 | \- 说吧 | 可选设定图表的最低y-值( 例如, 用于协调多条 Sparklines 的轴) |
| 移动 | PropTypes.func | \- 说吧 | `func({ data, datum, event, index, color })`,传递给隐形人 `BarSeries` 以截取所有鼠标事件( 可传递到单个序列以获得更多的控制) |
| 移动 | PropTypes.func | \- 说吧 | `func()`,传递给隐形人 `BarSeries` 拦截所有鼠标事件 |
| 样式 | PropTypes.object 主题 | \- 说吧 | 适用于 svg 的可选样式 |
| 宽度 | PropTypes.number.is 必需 | \- 说吧 | Svg 的宽度,包括左/右边距 |
| 参数 | PropTypes.func | (单位:千美元) | 可选存取器函数,它从数据数组中取出一个项目作为输入并返回基准的y值。 此值在例如:, `renderLabel` 函数. |

### 系列

下列系列组件可供使用,它们从母公司传递数据和尺度 `Sparkline` 组件,您可以组成多个来创建您想要的闪光线 :

-   `<LineSeries />`
-   `<PointSeries />`
-   `<BarSeries />`

`<PointSeries />` 财务报告和审定财务报表 `<BarSeries />` 支持特定数据点的标签.

#### `<LineSeries />`

此组件可用于创建线条和或区域有各种闪光线 `curve` 类型,并选择以下道具:

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 填满 | PropTypes.string (英语) | `@data-ui/theme`s 颜色. 默认 | 若为 `showArea=true`此设置 `fill` 区域路径. |
| 填充时间 | PropTypes. 数 | 0.3 (韩语) | 若为 `showArea=true`此设置 `fillOpacity` 会 议 日 程 和 议 程 `area` 形状. |
| 曲线 | PropTypes.one of(\['线','心",'基','monooneX'\]) : | 心脏 | 要使用的曲线插座类型 . |
| 移动 | PropTypes.func | \- 说吧 | `func({ data, datum, event, index, color })` 调用行鼠标移动以获取最近的数据 |
| 移动 | PropTypes.func | \- 说吧 | `func()` 调用到线条鼠标请假 |
| 显示区域 | PropTypes.bool (英语) | 虚假 | 布尔表示是否要绘制区域路径 . |
| 显示行 | PropTypes.bool (英语) | 真实 | 布尔表示是否要绘制行路径 . |
| 中风 | PropTypes.string (英语) | `@data-ui/theme`s 颜色. 默认 | 若为 `showLine=true`此设置 `stroke` 线条路径. |
| 中风 Dasharray | PropTypes.string (英语) | \- 说吧 | 若为 `showLine=true`此设置 `strokeDasharray` 线条路径属性. |
| 中风线盖 | PropTypes.one of (\['but','square','round','in herit'\]) (中文(简体) ) | "圆" | 若为 `showLine=true`此设置 `strokeLinecap` 线条路径属性. |
| 中风 | PropTypes. 数 | 2个 | 若为 `showLine=true`此设置 `strokeWidth` 线条路径属性. |

#### `<BarSeries />`

此组件可用于条形图火花并取出以下道具:

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 填满 | PropTypes.one of Type (\[PropTypes.func, propTypes.string\]) (英语) | `@data-ui/theme`s 颜色. 默认 | 单人 `fill` 用于所有人 `Bar`s 或带有以下签名的函数 `(yVal, i) => fill` 调用每个数据点。 如果数据对象有 `fill` 属性,它优先于此值. |
| 填充时间 | PropTypes.one of Type (\[PropTypes.func, propTypes.number\]) (英语) | `0.7` | 单人 `fillOpacity` 值 (0 - 1) 用于所有人 `Bar`s 或带有以下签名的函数 `(yVal, i) => opacity` 调用每个数据点。 如果数据对象有 `fillOpacity` 属性,它优先于此值. |
| 标签组件 | PropTypes.elements (英语) | `@data-ui/sparkline`是因为 `<Label />` 组件 | 如果相关,用于标签的组件。 此组件被克隆为适当的x,y,dx,以及用于定位的dy值. |
| 标签 | PropTypes. 数 | `8` | (绝对)像素相抵以用于定位相对一个标签 `Bar`。 。 。 . `labelPosition` 用于确定方向. |
| 标签选项 | PropTypes.one of Type (\[PropTypes.func, propTypes.one.of (\['top',"右","从下","左"\]))," | "顶" | 一个单一的字符串,说明如何相对于栏的顶点定位标签,或带有以下签名的函数 `(yVal, i) => position` 调用每个数据点。 如果返回值不是上、右、下、左的值,则在 `LabelComponent` 直接(例如, `{ dx: -100, dy: 100 }`(中文(简体) ) |
| 移动 | PropTypes.func | \- 说吧 | `func({ data, datum, event, index, color })` 调用条鼠标移动 |
| 移动 | PropTypes.func | \- 说吧 | `func()` 调用鼠标请假 |
| 渲染标签 | PropTypes.func | \- 说吧 | 调用每个基准的可选函数, 签名如下: `(yVal, i) => node`。如果将它传递给系列并返回一个值,则会为通过点提供标签。 这是作为孩子使用的 `LabelComponent` 因此,任何 svg 的有效孩子 `<text>` 元素可以返回. |
| 中风 | PropTypes.one of Type (\[PropTypes.func, propTypes.string\]) (英语) | `white` | 单人 `stroke` 用于所有人 `Bar`s 或带有以下签名的函数 `(yVal, i) => stroke`如果数据对象有 `stroke` 属性,它优先于此值. |
| 中风 | PropTypes.one of Type (\[PropTypes.func, propTypes.number\]) (英语) | `1` | 单人 `strokeWidth` 用于所有人 `Bar`s 或带有以下签名的函数 `(yVal, i) => stroke`如果数据对象有 `strokeWidth` 属性,它优先于此值. |

#### `<PointSeries />`

此组件可用于制取所有或子集点来取出火花并取出以下道具:

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 填满 | PropTypes.one of Type (\[PropTypes.func, propTypes.string\]) (英语) | `@data-ui/theme`s 颜色. 默认 | 单人 `fill` 用于所有人 `Point`s 或带有以下签名的函数 `(yVal, i) => fill` 调用每个数据点。 如果数据对象有 `fill` 属性,它优先于此值. |
| 填充时间 | PropTypes.one of Type (\[PropTypes.func, propTypes.number\]) (英语) | `1` | 单人 `fillOpacity` 值 (0 - 1) 用于所有人 `Point`s 或带有以下签名的函数 `(yVal, i) => opacity` 调用每个数据点。 如果数据对象有 `fillOpacity` 属性,它优先于此值. |
| 标签组件 | PropTypes.elements (英语) | `@data-ui/sparkline`是因为 `<Label />` 组件 | 如果相关,用于标签的组件。 此组件被克隆为适当的x,y,dx,以及用于定位的dy值. |
| 标签 | PropTypes. 数 | `12` | (绝对)像素相抵以用于定位相对一个标签 `Point`。 。 。 . `labelPosition` 用于确定方向. |
| 标签选项 | ProptTypes.one of Type (\[PropTypes.func, propTypes.one.of (\['auto','top',' right','bottin','left'\])), (\["PropTypes.fun克","PropTypes.one.of"), (\['auto','top',' right','bottin','left'\]) | "自动" | 一个单一字符串,说明如何将标签相对于点的中心位置,或带有以下签名的函数 `(yVal, i) => position` 调用每个数据点。 “ 自动” 试图根据周围的数据点将标签放置在一个点上下。 如果返回值不是自动值, 上, 右,下, 左, 则在 `LabelComponent` 直接(例如, `{ dx: -100, dy: 100 }`(中文(简体) ) |
| 移动 | PropTypes.func | \- 说吧 | `func({ data, datum, event, index, color })` 调用鼠标点移动 |
| 移动 | PropTypes.func | \- 说吧 | `func()` 调用鼠标点值符 |
| 点 | PropTypes.arrayOf(PropTypes.one OfType (\[Proptypes. number, propTypes.oneOf (\['all','min','max','first','last'\]))) | `['min', 'max']` | 字符串或索引,表示要渲染的点 。 例如,如果 `all`如果 `['min', 'max']`,只给出最小和最大分数. |
| 大小 | PropTypes.one of Type (\[PropTypes.func, propTypes.number\]) (英语) | `3` | 单人 `size` 以半径表示 `Points`s 或带有以下签名的函数 `(yVal, i) => size` 调用每个数据点。 如果数据对象有 `size` 属性,它优先于此值. |
| 渲染标签 | PropTypes.func | \- 说吧 | 调用每个基准的可选函数, 签名如下: `(yVal, i) => node`。如果将它传递给系列并返回一个值,则会为通过点提供标签。 这是作为孩子使用的 `LabelComponent` 因此,任何 svg 的有效孩子 `<text>` 元素可以返回. |
| 中风 | PropTypes.one of Type (\[PropTypes.func, propTypes.string\]) (英语) | `white` | 单人 `stroke` 用于所有人 `Point`s 或带有以下签名的函数 `(yVal, i) => stroke`如果数据对象有 `stroke` 属性,它优先于此值. |
| 中风 | PropTypes.one of Type (\[PropTypes.func, propTypes.number\]) (英语) | `1` | 单人 `strokeWidth` 用于所有人 `Point`s 或带有以下签名的函数 `(yVal, i) => stroke`如果数据对象有 `strokeWidth` 属性,它优先于此值. |

### 工具提示

您可以添加工具提示到 `<Sparkline />` 用高顺序来包装组件 `<WithTooltip />` 组件。 此组件接受 a `renderTooltip` 函数,其输出将导出为边界认识(以html为基础的)工具提示. `<WithTooltip />` 处理工具提示能见度状态和通过 `onMouseMove` `onMouseLeave` 财务报告和审定财务报表 `tooltipData` 为其子道具. 如果这些传到 `<Sparkline />`,它将使一系列隐形 `Bar`s用于拦截鼠标事件. 如果它们被传递到单个序列,鼠标事件将在序列级别上处理.

见 [故事书](https://williaster.github.io/data-ui) 比如说用法!

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 儿童 | PropTypes.func 或 propTypes.object | \- 说吧 | 使用 MouseMove 、 MouseLeave 和工具tipData 道具/ 键的子函数(调用) 或元素( 克隆) |
| 类Name | PropTypes.string (英语) | \- 说吧 | 要添加的类名 `<div>` 容器包装器 |
| 渲染工具提示 | PropTypes.func.is 必需 | \- 说吧 | 显示 _目录_ 工具提示,签名 `({ event, data, datum, color }) => node`如果该函数返回 a `falsy` 值,将不提供工具提示. |
| 样式 | PropTypes.object 主题 | {} | 要添加的样式 `<div>` 容器包装器 |
| 工具提示组件 | PropTypes.func 或 propTypes.object | `@vx`是因为 `TooltipWithBounds` | 用作工具提示容器组件的组件(而非实例)。 它通过 `top` 财务报告和审定财务报表 `left` 定位数字 |
| 工具提示 | PropTypes.object 主题 | \- 说吧 | 传递给 `TooltipComponent` |
| 工具提示超时 | PropTypes. 数 | 200个 | 调用时工具提示隐藏的超时 `onMouseLeave` |

### 参考行和频段

以下引用行组件导出以支持您可能想要的不同类型的注释 :

-   `<HorizontalReferenceLine />`
-   `<VerticalReferenceLine />`
-   `<BandLine />`。 。 。 .

#### `<HorizontalReferenceLine />`

此组件可用于使单一的横向参照线呼出一个切入点. 它需要以下道具: It

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 参考文献 | ProptTypes.one of Type (\[PropTypes. number, propTypes.one.one Of (\["正","中","min","max"\])) | `mean` | 创建行的参考文献 。 这可能是一个原始号码 呼叫,或其中之一 `'mean', 'median', 'min', 'max'` 用于计算相关y值. |
| 标签组件 | PropTypes.elements (英语) | `@data-ui/sparkline`是因为 `<Label />` 组件 | 如果相关,用于标签的组件。 此组件被克隆为适当的x,y,dx,以及用于定位的dy值. |
| 标签 | PropTypes. 数 | `8` | (绝对)像素相抵以用于定位相对一个标签 `Point`。 。 。 . `labelPosition` 用于确定方向. |
| 标签选项 | ProptTypes.one of (\["上","右","下","左"\]) | "对" | 一个单一的字符串,说明相对于参考行的末尾如何定位标签 |
| 渲染标签 | PropTypes.func | \- 说吧 | 调用每个基准的可选函数, 签名如下: `(yVal) => node`。如果通过此选项并返回一个值,则会显示一个标签。 这是作为孩子使用的 `LabelComponent` 因此,任何 svg 的有效孩子 `<text>` 元素可以返回. |
| 中风 | PropTypes.string (英语) | `@data-ui/theme`s 颜色. 默认 | 设置 `stroke` 线条路径. |
| 中风 Dasharray | PropTypes.string (英语) | \- 说吧 | 设置 `strokeDasharray` 线条路径属性. |
| 中风线盖 | PropTypes.one of (\['but','square','round','in herit'\]) (中文(简体) ) | "圆" | 设置 `strokeLinecap` 线条路径属性. |
| 中风 | PropTypes. 数 | 2个 | 设置 `strokeWidth` 线条路径属性. |

#### `<VerticalReferenceLine />`

@ TODO 图片

此组件可用于使单一的垂直参照线呼出一个切入点. 它需要以下道具: It

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 参考文献 | PropTypes.one of Type (\[PropTypes. number, propTypes.one.of (\['first','last','min','max'\])) | `last` | 创建行的参考文献 。 这可能是一个原始数字(x指数)来呼出,或者其中之一 `'first', 'last', 'min', 'max'` 这将计算相关的x指数值. |
| 标签组件 | PropTypes.elements (英语) | `@data-ui/sparkline`是因为 `<Label />` 组件 | 如果相关,用于标签的组件。 此组件被克隆为适当的x,y,dx,以及用于定位的dy值. |
| 标签 | PropTypes. 数 | `10` | (绝对)像素相抵以用于定位相对一个标签 `Point`。 。 。 . `labelPosition` 用于确定方向. |
| 标签选项 | ProptTypes.one of (\["上","右","下","左"\]) | "顶" | 显示标签相对于参考行上方位置的单一字符串 |
| 渲染标签 | PropTypes.func | \- 说吧 | 调用每个基准的可选函数, 签名如下: `(xVal) => node`。如果通过此选项并返回一个值,则会显示一个标签。 这是作为孩子使用的 `LabelComponent` 因此,任何 svg 的有效孩子 `<text>` 元素可以返回. |
| 中风 | PropTypes.string (英语) | `@data-ui/theme`s 颜色. 默认 | 设置 `stroke` 线条路径. |
| 中风 Dasharray | PropTypes.string (英语) | \- 说吧 | 设置 `strokeDasharray` 线条路径属性. |
| 中风线盖 | PropTypes.one of (\['but','square','round','in herit'\]) (中文(简体) ) | "圆" | 设置 `strokeLinecap` 线条路径属性. |
| 中风 | PropTypes. 数 | 2个 | 设置 `strokeWidth` 线条路径属性. |

#### `<BandLine />`

此组件可用于制取 _范围_ 相对于单一价值。 它可能用于创建垂直或水平带并取出以下道具:

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 带 | PropTypes.one of Type (\[PropTypes.one.of (\['innerQuartiles'\]\]),PropTypes.shape ({出自:PropTypes.shape ({x:PropTypes.number.y:PropTypes.number.y:PropTypes.number}}). 要求:PropTypes.shape ({x:PropTypes.number,y:PropTypes.number.number.})) | "内夸蒂尔斯" | 指定要渲染的带。 也许是 `innerQuartiles` 计算数据值的中延,或带有密钥的对象 `{ from: coords, to: coords }` 指定自定义带。 如果一个 `x` 或者说 `y` 数值在任意 `from` 或者说 `to` 键,则使用图表的界限(min, 最大值). |
| 填满 | PropTypes.string (英语) | `@data-ui/theme`s 颜色. 光灰 | 设置 `fill` 的形状. |
| 填充时间 | PropTypes. 数 | `0.5` | 设置 `fillOpacity` 的形状. |
| 中风 | PropTypes.string (英语) | `transparent` | 设置 `stroke` 的形状. |
| 中风 | PropTypes. 数 | `0` | 设置 `strokeWidth` 的形状. |

#### `<PatternLines />` 财务报告和审定财务报表 `<LinearGradient/>`编号

为方便起见,这些部件从 `@vx` 支持定制你的花纹的美学。 他们创造 `<defs/>` 包含指定的元素 `id`,然后通过 `url(#my_id)`。见上文示例和 [故事书](https://williaster.github.io/data-ui) 举个例子!

他们采取以下道具:

#### `<PatternLines />`

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 编号 | PropTypes.string. is required 互联网档案馆的存檔,存档日期2013-10-02 | \- 说吧 | `id` 联 合 国 `<defs>` 这是创建的。 当用作另一个组件的填充时,可通过 `url(#my_id)`。 。 。 . |
| 宽度 | PropTypes.number.is 必需 | \- 说吧 | 图案的宽度( 然后重复) . |
| 高度 | PropTypes.number.is 必需 | \- 说吧 | 图案的高度(然后重复). |
| 中风 | PropTypes.string (英语) | \- 说吧 | 设置 `stroke` 图案行属性. |
| 中风 | PropTypes. 数 | \- 说吧 | 设置 `strokeWidth` 图案行属性. |
| 中风 Dasharray | PropTypes.string (英语) | \- 说吧 | 设置 `strokeDasharray` 图案行属性. |
| 中风线盖 | PropTypes.string (英语) | 方块 | 设置 `strokeLinecap` 图案行属性. |
| 形状 | PropTypes.string (英语) | "自动" | 设置 `shapeRendering` 图案行属性. |
| 方向 | PropTypes.arrayof (PropTypes.one Of (\["垂直","横向","对角"\])) | \["垂直"\] | 线条的取向矩阵 。 如果通过多个路径,则每个路径都会有一个路径. |
| 背景情况 | PropTypes.string (英语) | \- 说吧 | 模式的可选背景填充 . |
| 类Name | PropTypes.string (英语) | \- 说吧 | 可选类Name 添加到图案 `path`对. |

#### `<LinearGradient />`

| 名称 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 编号 | PropTypes.string. is required 互联网档案馆的存檔,存档日期2013-10-02 | \- 说吧 | `id` 联 合 国 `<defs>` 这是创建的。 当用作另一个组件的填充时,可通过 `url(#my_id)`。 。 。 . |
| 从 | PropTypes.string (英语) | \- 说吧 | 梯度中起始颜色所用的字符串 . |
| 改为 | PropTypes.string (英语) | \- 说吧 | 梯度中用于尾色的字符串. |
| 从 Offset 调用 | PropTypes.string (英语) | `0%` | 设置 : `from` 颜色. |
| 从时间 | PropTypes. 数 | 1个 | 设置不透明 `from` 颜色. |
| 移动集 | PropTypes.string (英语) | `100%` | 设置 : `to` 颜色 |
| 目标 | PropTypes. 数 | 1个 | 设置不透明 `to` 颜色. |
| 旋转 | PropTypes.one of Type (\[PropTypes.string, propTypes. number\]) (英语) | \- 说吧 | 设置 `transform` 梯度属性为 `rotate(<rotate>)` |
| 转换 | PropTypes.string (英语) | \- 说吧 | 设置 `gradientTransform` 会 议 日 程 和 议 程 `linearGradient` 元素, 由 `rotate` |

## 常见问题

### @data-ui/sparkline 是什么？

反应 \+ d3 创建火花库

### 如何安装 @data-ui/sparkline？

在项目目录运行 npm install @data-ui/sparkline，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^15\.0\.0-0 \|\| ^16\.0\.0-0）、react-dom（^15\.0\.0-0 \|\| ^16\.0\.0-0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @data-ui/sparkline 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/data-ui\_\_sparkline 是否存在。

### @data-ui/sparkline 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @data-ui/sparkline 可以商用吗？

@data-ui/sparkline 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @data-ui/sparkline 的下载量有多少？

根据 npm 官方下载统计，@data-ui/sparkline 在 2026/10/12 – 2026/11/10 这 30 天内被下载 13,062 次，日均约 435 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @data-ui/sparkline 还在维护吗？

最新版本 0\.0\.84 发布于 2019/11/20（6 年前）；至今共发布 35 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/08/21。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。