图表
RadialChart
弧上的值——一个仪表，或几个共用一把刻度的总量。
什么时候用它
单个值对照一个固定总量。超过大约四根柱子就该老实用 BarChart，因为径向柱的半径并不代表它的值。
示例
default
| tier | Value |
|---|---|
| documents | 72 |
| photos | 54 |
| backups | 31 |
gauge
| tier | Value |
|---|---|
| used | 62 |
loading
说明
弧上的值——一个仪表，或者几个共用一把刻度的总量。
动手前值得知道的一点：径向柱的长度是它的值，但半径不是，所以内圈和外圈上同样的值会被画成不同长度。这让它不适合做比较、适合做单值仪表；超过大约四根柱子，老实用 <BarChart>。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | ChartConfig | 柱名 → 它的标签和上色。键必须和 `nameKey` 的取值对得上。 | |
| data必填 | TData[] | 图表要画的数据行。每一条对应一个点、一根柱或一个分类。 | |
| nameKey必填 | keyof TData & string | 给每根柱子命名的数据字段。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| chartProps | ComponentProps<typeof RechartsRadialBarChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| defaultSelectedBar | string | null | null | 首次渲染时点亮的柱子。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| innerRadius | number | string | '30%' | 弧从距圆心多远处开始。 |
| isLoading | boolean | false | 把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。 |
| max | number | 一整圈代表多少。 不设它，刻度就从数据里推出来，最大的那根永远填满整段弧——这对比较是对的，对仪表是错的。只要是单个值要对照一个固定总量，就设上它（通常是 100），否则 62% 和 98% 看起来一模一样。 | |
| onSelectionChange | (selection: { name: string; value: number } | null) => void | 选中项变化时触发；被清除时传 null。 | |
| outerRadius | number | string | '100%' | 弧到哪里结束。 |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| valueKey | keyof TData & string | 存放每根柱子数值的数据字段。表格视图会用到。 | |
| variant | RadialVariant | 'full' | 弧的形状——完整的一圈，或者仪表想要的半圆。 |
类型
export type RadialVariant = 'full' | 'semi'无障碍
- title 必填；传入 valueKey，数据行同样会渲染成一份视觉隐藏的表格。
- 要设置 max，否则刻度会从数据推出来、最大的那根永远填满整段弧——这会让 62% 和 98% 看起来一模一样。
- showTrack 画出未填充的剩余部分，仪表全靠它才读得懂。