数据
Sparkline
一个词那么大的一串数字。
什么时候用它
表格单元格里、数字旁边、一行的末尾。要精确读趋势时，它需要的是 LineChart 和属于自己的空间。
示例
variants
61
61
61
in a table
| Channel | Trend | This week |
|---|---|---|
| Organic search | 71k | |
| Paid social | 28k | |
| Direct | 29k | |
| Referral | 24k |
说明
一个词那么大的一串数字——在表格单元格里、在数字旁边、在一行的末尾。
刻意不画坐标轴、不画网格、不带标签：迷你折线回答的是“这一路是什么形状”，而任何能让它回答“到底是多少”的装饰，同时也会让它大到没法内嵌——而内嵌正是选它的唯一理由。确切的值重要时，把数字印在它旁边（value 就是干这个的）；需要精确读趋势时，它要的是 <LineChart> 和属于自己的空间。
不需要渲染引擎：它就是一条画在归一化 viewBox 上的 <path>，所以在表格里放一百个也不花什么代价。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data必填 | number[] | 这些数字，按顺序。不足两个点就什么都不画。 | |
| label必填 | string | 这串数字是什么，用一句话说。必填，而且它就是全部的可访问名称：迷你折线没有坐标轴也没有图例，再没有别的东西描述它。 | |
| className | string | — | |
| domain | [number, number] | 取值域，写成 `[min, max]`。不传就从数据里推。 只要一列迷你折线是要拿来对照的，就一定要把它固定下来：各自独立取域的话，每一行的波峰波谷看起来都一模一样，而这正是一张迷你折线表会主动误导人的那条路。 | |
| height | number | 28 | 高度，单位像素。宽度由容器决定。 |
| showLast | boolean | true | 标出最后一个点，通常那也正是被问到的那一个。 |
| value | ReactNode | 和标签一起播报出来的值——当前读数，已经格式化好。不传就退回最后一个数字。 | |
| variant | SparklineVariant | 'line' | — |
类型
export type SparklineVariant = 'line' | 'area' | 'bars'无障碍
- label 必填，而且它就是全部的可访问名称：迷你折线没有坐标轴也没有图例，再没有别的东西描述它。
- 刻意不画坐标轴。任何能让它回答“到底是多少”的装饰，同时也会让它大到没法内嵌——而内嵌正是选它的唯一理由。
- 一列迷你折线一定要固定 domain：各自独立取域的话，每一行的波峰波谷看起来都一模一样，表格就开始主动误导人了。
- 一条 path，不需要渲染引擎——所以在表格里放一百个也不花什么代价。