图表
ScatterChart
两个度量互相对照，每个观测一个点。
什么时候用它
相关性、聚类、离群点——这些问题一旦被塞进柱状图的桶里就答不出来了。这也是这里唯一一张横轴是数值而不是分类的图。
示例
default
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 360 | 660 |
| 420 | 790 |
| 470 | 812 |
shape and variant
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 420 | 790 |
| 130 | 520 |
| 190 | 610 |
| 250 | 704 |
| 320 | 861 |
| 430 | 990 |
bubbles
| kb | Load (ms) | Downloads |
|---|---|---|
| 120 | 340 | 400 |
| 180 | 412 | 1,200 |
| 240 | 505 | 260 |
| 310 | 618 | 2,400 |
| 420 | 790 | 900 |
说明
两个度量互相对照，每个观测一个点——用来回答“这两者之间有没有关系”。
这是整套里唯一一张横轴是数值而不是分类的图，而这正是它的意义所在：散点回答的是相关性、聚类和离群点，这三个问题一旦被塞进柱状图的桶里就全没了。
超过三条序列，形状就分不开它们了，答案是小型多图——一条序列一张图、共用同一套坐标轴——而不是加第四种记号。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | ChartConfig | 序列 key → 它的标签和上色。声明顺序就是色阶槽位顺序。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| chartProps | ComponentProps<typeof RechartsScatterChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| defaultSelectedDataKey | string | null | null | 首次渲染时点亮的序列。选中会让其他序列变暗。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| onSelectionChange | (selectedDataKey: string | null) => void | 选中项变化时触发；被清除时传 null。 | |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| table | ScatterTable | false | 隐藏表格视图所依据的数据行，以及要打印的字段。散点的数据挂在每个 `<Scatter>` 上、而不是挂在根节点上，所以和这里其他所有图不同，它的表格推断不出来——只能显式声明。 |
类型
export type ScatterShape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'ring'
export type ScatterVariant = 'solid' | 'outline' | 'gradient'无障碍
- title 必填。表格视图是显式声明的、不是推断出来的：散点的数据挂在每条序列上，根节点上并没有一份统一的数据行可读。
- 在这里承担别处由色相承担的工作的是**形状**。两团重叠的点，用圆形对十字形去分远比用两级灰阶好认——而且形状在叠印时仍然成立，灰阶不行。
- 实心点自带一圈页面色描边，所以两个落在同一位置的观测仍然数得清。
- ZAxis 把它的度量映射到点的**面积**、不是半径：半径翻倍会让墨量变成四倍，这是气泡图最常见的说谎方式。