图表
AreaChart
连续轴上的一条填充序列，面积本身是有意义的。
什么时候用它
看一个量随时间的变化。要把几条序列拿来互相比较，用 LineChart——四层半透明的填充叠在一起，哪个问题都答不了。
示例
default
| month | Desktop | Mobile |
|---|---|---|
| Jan | 186 | 80 |
| Feb | 305 | 200 |
| Mar | 237 | 120 |
| Apr | 273 | 190 |
| May | 209 | 130 |
| Jun | 314 | 240 |
fill variants
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stroke and curve
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
stacking
| Desktop | Mobile |
|---|---|
| 186 | 80 |
| 305 | 200 |
| 237 | 120 |
| 273 | 190 |
| 209 | 130 |
| 314 | 240 |
dots and reveal
| Desktop |
|---|
| 186 |
| 305 |
| 237 |
| 273 |
| 209 |
| 314 |
brush
| day | Desktop |
|---|---|
| D1 | 140 |
| D2 | 164 |
| D3 | 185 |
| D4 | 202 |
| D5 | 214 |
| D6 | 220 |
| D7 | 219 |
| D8 | 211 |
| D9 | 199 |
| D10 | 184 |
| D11 | 169 |
| D12 | 154 |
| D13 | 143 |
| D14 | 136 |
| D15 | 136 |
| D16 | 142 |
| D17 | 155 |
| D18 | 173 |
| D19 | 195 |
| D20 | 219 |
| D21 | 242 |
| D22 | 263 |
| D23 | 280 |
| D24 | 291 |
| D25 | 295 |
| D26 | 293 |
| D27 | 285 |
| D28 | 273 |
| D29 | 257 |
| D30 | 242 |
| D31 | 227 |
| D32 | 217 |
loading
chroma palette
| month | Desktop | Mobile | Tablet |
|---|---|---|---|
| Jan | 186 | 80 | 40 |
| Feb | 305 | 200 | 72 |
| Mar | 237 | 120 | 55 |
| Apr | 273 | 190 | 88 |
| May | 209 | 130 | 61 |
| Jun | 314 | 240 | 96 |
annotations
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
empty
No visits in this range
This project had no traffic before March. Try a wider range.
sonify
| month | Desktop |
|---|---|
| Jan | 186 |
| Feb | 305 |
| Mar | 148 |
| Apr | 162 |
| May | 289 |
| Jun | 341 |
说明
分类轴上的一条填充序列——用来表达一个连续的量，且线下方的面积本身有意义。
是组合出来的，不是配置出来的：坐标轴、网格、tooltip、图例以及区域本身都是子元素，所以一张图只渲染它要的那些部分，不存在被某个看不见的属性偷偷打开的东西。
当读者是在把几条序列互相比较、而不是读一个总量时，改用 <LineChart>；当分类是离散的桶时，用 <BarChart>。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | TConfig & ValidateKeys<TData, TConfig> | 序列 key → 它的标签和上色。声明顺序就是色阶槽位顺序。 | |
| data必填 | TData[] | 图表要画的数据行。每一条对应一个点、一根柱或一个分类。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| animationType | ChartRevealType | 'forward' | 每个 `<AreaChart.Area>` 继承的入场揭示动画。 |
| chartProps | ComponentProps<typeof RechartsAreaChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| curveType | ChartCurveType | 'linear' | 每个 `<AreaChart.Area>` 继承的曲线插值方式。 |
| defaultSelectedDataKey | string | null | null | 首次渲染时点亮的序列。选中会让其他序列变暗。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| empty | ChartEmptyProps | false | 图表没东西可画时显示什么。 只要 `data` 是空的、而且图表并不处于加载中，它就会顶替绘图区渲染出来——这是任何一个真实仪表盘一周之内就会遇到的状态，也是「空白的一对坐标轴」和「加载失败」根本分不出来的那一个。传 `false` 保留坐标轴，用于那种「空本身就是结论」的图。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| isLoading | boolean | false | 把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。 |
| loadingPoints | number | 骨架画多少个点。 | |
| onSelectionChange | (selectedDataKey: string | null) => void | 选中项变化时触发；被清除时传 null。 | |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| stackType | AreaStackType | 'default' | 多个标记如何组合：并排、堆叠，或归一化到 100%。 |
| xDataKey | keyof TData & string | 分类轴对应的数据字段。brush 和表格视图都需要它。 |
类型
export type ChartCurveType = ComponentProps<typeof RechartsArea>['type']
export type AreaVariant = 'gradient' | 'gradient-reverse' | 'solid' | 'dotted' | 'lines' | 'hatched'
export type AreaStrokeVariant = 'solid' | 'dashed' | 'animated-dashed'
export type AreaStackType = 'default' | 'stacked' | 'expanded'键盘操作
| 按键 | 作用 |
|---|---|
| Tab | 进入图表，Recharts 的可访问层让它可以被导航。 |
| ←→ | 在数据点之间移动光标，并逐个播报。 |
无障碍
- title 是必填的，它就是这张图的可访问名称，无论是否显示出来。
- 数据行会再渲染一份视觉隐藏的表格，所以数字是可以被读到的，而不只是被画出来。页面自己已经列了数据时，用 hideDataTable 关掉。
- 六种填充样式的存在是有原因的：在默认的单色方案里，纹理才是身份的第一载体，灰阶只是第二层——这也是两条序列在黑白打印和强制颜色模式下仍能被区分的原因。
- 入场揭示是一层逐帧的 SVG 蒙版，在 prefers-reduced-motion 下会被完全去掉，爬行虚线同理。