Sparkline

只占一个词宽度的 React 迷你走势图：一条折线连起一组数值，并标出最后一个点；默认为灰色，需要突出的那一条用强调色。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/sparkline

示例

平稳走势中的一条上升线

Relay Kestrel8
Relay Ashgrove15
Relay Pellmoor2

sparkline-relays.tsx

import { Sparkline } from "@/components/zero/sparkline";const relays = [  { name: "Relay Kestrel", values: [9, 8, 9, 7, 8, 8, 7, 8] },  { name: "Relay Ashgrove", values: [2, 3, 3, 5, 6, 9, 12, 15], hot: true },  { name: "Relay Pellmoor", values: [11, 9, 7, 6, 4, 4, 3, 2] },];export default function SparklineRelays() {  return (    <ul className="grid w-full max-w-sm gap-3">      {relays.map((relay) => (        <li          key={relay.name}          className="flex items-center justify-between gap-4 border-zero-line border-b-(length:--zero-stroke-thin) pb-3"        >          <span className="font-bold font-zero italic">{relay.name}</span>          <span className="flex items-center gap-3">            <Sparkline values={relay.values} hot={relay.hot} />            <span className="w-[2ch] text-end font-black font-zero tabular-nums">              {relay.values.at(-1)}            </span>          </span>        </li>      ))}    </ul>  );}

行为

尺寸以 em 为单位，宽为高的 4 倍，因此随相邻文字一同缩放；设置宽度和高度可改变尺寸。折线按这组数据自身的峰值缩放，只反映走势的形状，不宜与其他迷你走势图比较高低。需要坐标轴与数值时，请使用 Chart。

hot 以强调色绘制折线，并点亮最后一个点。仅用于少数需要最先引起注意的折线；满页都用 hot，与满页都不用并无区别。

对读屏软件而言，它是一张图片。未提供 label 时，以文字描述这组数据：点的数量、起始值、结束值与峰值。

属性

Sparkline

属性	类型	默认值	说明
values	number[]	—	数值序列，按从旧到新排列。
hot	boolean	false	以强调色绘制，最后一个点发光。
label	string	—	读屏软件朗读的文字，取代对数值的描述。