图表
ScatterChart - 散点图
两个度量互相对照，每个观测一个点。
用法
什么时候用它
来自@misoto22/folio/charts
import { ScatterChart } from '@misoto22/folio/charts'说明
两个度量互相对照，每个观测一个点——用来回答“这两者之间有没有关系”。
这是整套里唯一一张横轴是数值而不是分类的图，而这正是它的意义所在：散点回答的是相关性、聚类和离群点，这三个问题一旦被塞进柱状图的桶里就全没了。
超过三条序列，形状就分不开它们了，答案是小型多图——一条序列一张图、共用同一套坐标轴——而不是加第四种记号。
结构
| 部件 | 说明 |
|---|---|
| 图框必填 | ChartFigure 的那个 <figure>，带 isLoading 和一个空状态。是否为空是从显式声明的表格行里读出来的，理由和这张表格之所以要显式声明是同一个：观测挂在每个 <Scatter> 上，根节点看不到它们。 |
| 数值坐标轴必填 | <ScatterChart.XAxis> 和 <ScatterChart.YAxis>，默认都是 type="number"。这是本组唯一一张横轴是一个度量、而不是一个分类的图。 |
| 点云必填 | <ScatterChart.Scatter>，一条序列一团，每一团都带着自己的 data 数组，而不是去读根节点的。六种标记形状，而实心标记会加一圈 1px 的 --chart-surface 描边，这样两个落在同一位置的观测仍然数得清。 |
| 尺寸通道 | <ScatterChart.ZAxis>，range 默认是 [40, 400]。这个范围说的是面积、不是半径：半径翻倍会让墨量变成四倍，这就是气泡图通常说谎的方式。 |
| 十字光标 | tooltip 的光标，是两条线而不是一条带。一个散点由两个坐标确定位置，而单独一条竖直光标只回答了其中一半。 |
| 显式声明的表格 | 在这里 table 是一个属性，不是推断出来的。散点的数据挂在每条序列上，所以根节点上没有可读的数据行——什么都不传，交付的就是一张完全没有表格的图。 |
实践建议
推荐
- 要显式声明 table。这是本组唯一一张隐藏表格没法推导出来的图，所以漏掉它是静默失败：图渲染出来了，也有名字，背后却没有数字。
- 区分序列，先靠形状。两级灰阶失效的地方，圆形对十字形仍然认得出来，而且形状在叠印和强制颜色下都成立——在强制颜色下，每一个 --series-* 令牌都会变成 CanvasText，一级明度差就没了。
- 点云密集时，用 variant="outline" 或 shape="ring"。空心标记能露出它底下的东西；实心标记在两千个点的时候，画出来的只是最密处的一个剪影，别的什么都没有。
避免
- 不要用序列之间 size 的差别去表达什么。size 是一个以像素计的固定半径，所以它什么都没编码，看上去却完全像在编码；把一个值映射到标记面积的路径只有 <ScatterChart.ZAxis> 一条。
- 超过三条序列，形状就分不开它们了——圆形、十字和三角是分得清的，第四个图形是菱形，大多数读者看到的就是一个转过来的正方形。答案是共用坐标轴的小型多图，不是第四种标记。
示例
默认
两个度量互相对着放，一个观测一个标记——这是这里唯一一张 x 轴是数字、而不是分类的图表，正是这一点让它能回答相关性、聚集和离群点。七个点一起往上走是一个图形，不是一个系数：这里没有任何东西在拟合一条线，这张图也没有宣称 ms 里有多少份额是由 kB 解释的。每个实心标记都带着一圈表面色的环，那道细线让两个重叠的观测仍然数得清——超过几百个点它就不管用了，密度得换别的方式来展示。table 属性不是记账：散点图的数据行住在每一个 Scatter 上、而不是根节点上，所以和这个包里其他每一张图表不同，那张隐藏表格推断不出来，必须显式声明。
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 360 | 660 |
| 420 | 790 |
| 470 | 812 |
形状与样式
两片互相重叠的点云，以及把它们分开的那些属性。这个包的灰阶是单色的，所以 shape 干的是别处由色相干的活：圆形对十字，把两片重叠的点云分开的效果，远好过两档灰，而且一个形状在叠印之下还活着，一档明度差则不然。outline 把标记挖空，而当点云互相压在一起时，就该去拿这个版本，因为一个空心标记能露出它底下的那个。超过三条序列，形状就不再能把它们分开，而答案是一张小倍数网格——一条序列一张图、同样的坐标轴——不是第四个字形。
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 420 | 790 |
| 130 | 520 |
| 190 | 610 |
| 250 | 704 |
| 320 | 861 |
| 430 | 990 |
气泡
同样两根轴上的第三个度量，由 ZAxis 承载。Recharts 是按面积单位来缩放 z 范围的，正是这一点让它安全：改成把值映射到半径，翻一倍墨水就变成四倍，于是一次下载量翻倍的发布，读起来会像受欢迎程度翻了四倍。这里 60 到 900 的范围，是十五倍的面积跨度，大约四倍的直径跨度。outline 也是刻意的——气泡在构造上就会重叠，而一个实心标记会把它压住的那个更小的气泡藏起来。
| kb | Load (ms) | Downloads |
|---|---|---|
| 120 | 340 | 400 |
| 180 | 412 | 1,200 |
| 240 | 505 | 260 |
| 310 | 618 | 2,400 |
| 420 | 790 | 900 |
类型
export type ScatterShape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'ring'
export type ScatterVariant = 'solid' | 'outline' | 'gradient'无障碍
- title 必填。表格视图是显式声明的、不是推断出来的：散点的数据挂在每条序列上，根节点上并没有一份统一的数据行可读。
- 在这里承担别处由色相承担的工作的是形状。两团重叠的点，用圆形对十字形去分远比用两级灰阶好认——而且形状在叠印时仍然成立，灰阶不行。
- 实心点自带一圈页面色描边，所以两个落在同一位置的观测仍然数得清。
- ZAxis 把它的度量映射到点的面积、不是半径：半径翻倍会让墨量变成四倍，这是气泡图最常见的说谎方式。