图表
RadialChart - 径向图
弧上的值——一个仪表，或几个共用一把刻度的总量。
用法
什么时候用它
来自@misoto22/folio/charts
import { RadialChart } from '@misoto22/folio/charts'说明
弧上的值——一个仪表，或者几个共用一把刻度的总量。
动手前值得知道的一点：径向柱的长度是它的值，但半径不是，所以内圈和外圈上同样的值会被画成不同长度。这让它不适合做比较、适合做单值仪表；超过大约四根柱子，老实用 <BarChart>。
结构
| 部件 | 说明 |
|---|---|
| 图框必填 | ChartFigure 的那个 <figure>，零行数据时带一个空状态。它的隐藏表格需要一个值字段，来源是 valueKey，或者退一步，取自组合进来的 <RadialChart.RadialBar> 的 dataKey——所以两个都没写的图，仍然没有表格。 |
| 弧必填 | <RadialChart.RadialBar>，一行一段，14px 粗、5px 的端头圆角。variant="semi" 会把圆心降到 70%，让半圈弧坐在自己盒子的中间、而不是顶上。 |
| 轨道 | showTrack，默认打开，用 --chart-track 在每段弧后面画出未填充的剩余部分。仪表之所以是仪表，靠的就是它：没有它，那段填充就没有一个看得见的整体可以归属。 |
| 刻度 | 设了 max 时根节点插入的那根 PolarAngleAxis，取值域是 [0, max]，刻度线关闭。不设 max，取值域就改从数据里推出来。 |
| 图例 | <RadialChart.Legend>。弧没有分类轴，所以超过一根柱子时，能给它们命名的只有它。 |
实践建议
推荐
- 凡是仪表就要设 max。不设，刻度就从数据推出来，于是最大的那根柱子永远填满整段弧，62% 和 98% 会被画成一模一样。
- 弧不是唯一的标记时，要传 valueKey。它指明隐藏表格印的是哪个字段，也指明图例按哪个字段报告选中项；它和组合进来的 <RadialChart.RadialBar> 一个都没有，就没有值字段，表格也不是空的，而是根本不存在。
- 单个值用 variant="semi"。半圈弧读起来像一个有下限也有上限的表盘，而整圈环则要读者自己去想明白一整个圆值多少。
避免
- 不要跨半径去比较柱子。径向柱的长度才是它的值，半径不是，所以装着同一个数字的内圈弧和外圈弧，画出来的长度并不一样——超过大约四根柱子，BarChart 才是老实的形式。
- max 没设时，不要让读者把一段弧当成整圈的占比。那时候，扫满一整圈说的是“这里最大的那个”，和“全部”是两句不同的话。
示例
默认
三个合计画在一段弧上，没有 max，所以刻度来自数据，最大的那根条永远填满整个环。要当心的地方是几何性的：一根条的长度是它的值，但它的半径不是，所以内圈一根条和外圈一根条握着同一个数字，画出来的长度不一样，而这个环偏袒的永远是待在最外圈的那个。这让它成为一个给三四个「读者只会瞟一眼」的值用的展示，而任何要排名次的东西，诚实的选择是 BarChart。命名的活由图例来干，因为这些弧自己不带坐标轴。
| tier | Value |
|---|---|
| documents | 72 |
| photos | 54 |
| backups | 31 |
仪表盘
一个值对着一个固定的总量——这是径向图毫无争议地正确的那个场景。max 才是让它成为仪表的东西：没有它，刻度来自数据，孤零零那根条永远填满整段弧，于是 62 和 98 会被画得一模一样。条形背后那条轨道是这次读数的另一半，因为它正是这个值所占其中一份的那个余量。semi 把圆心降到盒子的 70% 处，好让这个半圆坐在自己那块空间的中间，而不是顶部。
| tier | Value |
|---|---|
| used | 62 |
加载中
骨架。isLoading 把这些弧换成五段它们自己的弧，每 1.5 秒重掷一次并在长度之间变形，同时保住这个图形量出来的高度，所以数据落下来时页面不跳；在 prefers-reduced-motion 下它们改为停着不动。那些长度来自一个确定性函数、而不是 Math.random，所以服务端和客户端画出同一份骨架，水合也就没有什么可以对不上的。组合进来的 RadialBar 在这个状态下什么都不画——它在这儿，是为了让数据行到达之后，这张图能以本来面目、带着同一根条回来。
类型
export type RadialVariant = 'full' | 'semi'无障碍
- title 必填；传入 valueKey，数据行同样会渲染成一份视觉隐藏的表格。
- 要设置 max，否则刻度会从数据推出来、最大的那根永远填满整段弧——这会让 62% 和 98% 看起来一模一样。
- showTrack 画出未填充的剩余部分，仪表全靠它才读得懂。