图表
ComposedChart
同一根轴上的柱与线——体量，以及它变化的速度。
什么时候用它
两个共享同一刻度的度量。不共享刻度的两个度量应该拆成两张图、或统一到同一基准：这里没有第二根 Y 轴，这是刻意的。
示例
default
| month | Revenue | Profit |
|---|---|---|
| Jan | 4,200 | 1,800 |
| Feb | 5,800 | 2,400 |
| Mar | 4,100 | 1,600 |
| Apr | 6,200 | 2,800 |
| May | 5,400 | 2,200 |
| Jun | 7,800 | 3,400 |
variants
| Revenue | Profit |
|---|---|
| 4,200 | 1,800 |
| 5,800 | 2,400 |
| 4,100 | 1,600 |
| 6,200 | 2,800 |
| 5,400 | 2,200 |
| 7,800 | 3,400 |
hover highlight
| Revenue | Profit |
|---|---|
| 4,200 | 1,800 |
| 5,800 | 2,400 |
| 4,100 | 1,600 |
| 6,200 | 2,800 |
| 5,400 | 2,200 |
| 7,800 | 3,400 |
brush and loading
| day | Revenue | Profit |
|---|---|---|
| D1 | 3,200 | 2,700 |
| D2 | 4,378 | 2,644 |
| D3 | 5,426 | 2,480 |
| D4 | 6,229 | 2,217 |
| D5 | 6,699 | 1,873 |
| D6 | 6,783 | 1,468 |
| D7 | 6,473 | 1,027 |
| D8 | 5,803 | 1,221 |
| D9 | 4,846 | 1,649 |
| D10 | 3,708 | 2,031 |
| D11 | 3,886 | 2,342 |
| D12 | 5,005 | 2,564 |
| D13 | 5,924 | 2,682 |
| D14 | 6,544 | 2,689 |
| D15 | 6,796 | 2,586 |
| D16 | 6,652 | 2,377 |
| D17 | 6,128 | 2,077 |
| D18 | 5,282 | 1,703 |
| D19 | 4,206 | 1,279 |
| D20 | 3,380 | 968 |
| D21 | 4,547 | 1,411 |
| D22 | 5,565 | 1,822 |
| D23 | 6,323 | 2,176 |
| D24 | 6,737 | 2,450 |
| D25 | 6,762 | 2,628 |
| D26 | 6,394 | 2,699 |
| D27 | 5,675 | 2,658 |
| D28 | 4,684 | 2,507 |
| D29 | 3,529 | 2,257 |
| D30 | 4,062 | 1,922 |
说明
同一根轴上的柱与线——用来回答“体量，以及它变化的速度”。
永远只有一根轴。刻度不同的两个度量应该拆成两张图，或者统一到同一基准；第二根 Y 轴让作者自己决定两条线在哪里相交，这是一张图能做的最具误导性的事。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | TConfig & ValidateKeys<TData, TConfig> | — | |
| data必填 | TData[] | 图表要画的数据行。每一条对应一个点、一根柱或一个分类。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| animationType | ChartRevealType | 'forward' | — |
| barCategoryGap | number | — | |
| barGap | number | — | |
| chartProps | ComponentProps<typeof RechartsComposedChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| curveType | ChartCurveType | 'linear' | 两个点之间的线怎么插值。除非某个标记自己另有说明，否则都继承它。 |
| defaultSelectedDataKey | string | null | null | 首次渲染时点亮的序列。选中会让其他序列变暗。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| empty | ChartEmptyProps | false | 图表没东西可画时显示什么。 只要 `data` 是空的、而且图表并不处于加载中，它就会顶替绘图区渲染出来——这是任何一个真实仪表盘一周之内就会遇到的状态，也是「空白的一对坐标轴」和「加载失败」根本分不出来的那一个。传 `false` 保留坐标轴，用于那种「空本身就是结论」的图。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| isLoading | boolean | false | 把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。 |
| loadingBars | number | 骨架画多少根柱子。 | |
| onSelectionChange | (selectedDataKey: string | null) => void | 选中项变化时触发；被清除时传 null。 | |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| xDataKey | keyof TData & string | 分类轴对应的数据字段。brush 和表格视图都需要它。 |
无障碍
- title 必填；数据行同样会渲染成一份视觉隐藏的表格。
- 只有一根值轴。双轴图让作者自己决定两条线在哪里相交，这是一张图能做的最具误导性的事。
- enableHoverHighlight 会把悬停列之外的柱子调暗，驱动它的是图表自己的 tooltip 索引。