图表
Histogram
一个分布长什么形状。
什么时候用它
要弄懂**一个**分布——两个聚集、一道硬底、在超时值上堆成一摞。几个分布要并排比较，那是 BoxPlot 的活。
示例
default
| label | Count |
|---|---|
| 62 – 103 | 37 |
| 103 – 144 | 6 |
| 144 – 185 | 22 |
| 185 – 226 | 5 |
| 226 – 267 | 3 |
| 267 – 308 | 2 |
bin width
| label | Count |
|---|---|
| 62 – 103 | 37 |
| 103 – 144 | 6 |
| 144 – 185 | 22 |
| 185 – 226 | 5 |
| 226 – 267 | 3 |
| 267 – 308 | 2 |
density
| label | Count |
|---|---|
| 0 – 10 | 480 |
| 10 – 25 | 610 |
| 25 – 50 | 540 |
| 50 – 100 | 420 |
| 100 – 250 | 310 |
| 250 – 500 | 120 |
| 500 – 1,000 | 40 |
说明
一个分布的形状——分量压在哪里、往哪边偏、里面是不是不止一个峰。
它回答的正是 <BoxPlot> 从构造上答不了的那些：两簇聚集、一道硬下限、一堆积压在超时值上的观测。要把好几个分布并排比较时，去拿箱线图；要把某一个分布看懂时，拿这一个。
直方图的形状是它分箱宽度的属性，而不只是它数据的属性。同一批数字切成八个分箱和切成八十个分箱，是两张不同的图；两个峰之间的那道空隙，挪一下分箱边界就能造出来，也能抹掉。这不是待修的缺陷，分箱本来就是这么回事，能守住的办法是说清楚这张图是按哪条规则画的——这里的默认是 Freedman–Diaconis——并且在相信某个特征之前多看几个宽度。不等宽的分箱还多一个陷阱：在 frequency 下，底层发生率相同时，宽一倍的分箱就站得高一倍，而 mode="density" 存在的意义就是把这件事纠正过来。
Recharts 在这里挣得的位置是坐标轴、网格和 tooltip，但不包括那些柱子：柱状图的柱子是按分类定位的，而直方图的柱子是由一个连续的度量来定位、并且决定宽度的。所以横轴是数值轴，每根柱子都由它自己的两条边画出来——正因如此，一个不等宽的分箱才能保持它真实的宽度，而不是被压平成邻居旁边一个等宽的槽位。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip，以及 `<Histogram.Bars>`。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| bins | number | number[] | 怎么切 `values`：给一个等宽分箱的个数，或者直接给出各条边界。默认用 Freedman–Diaconis（`2 × IQR × n^(-1/3)`），四分位距为零时退回 Sturges。 | |
| chartProps | ComponentProps<typeof RechartsBarChart> | 通往原始 Recharts 图表元素的逃生口。 | |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| config | ChartConfig | DEFAULT_CONFIG | 唯一的那条序列——它的标签和上色。只有**第一**个条目会被读取；直方图只有一个分布，有多少个分箱就有多少根柱子。 |
| data | HistogramBin[] | 已经在别处数好了的分箱——数据库数的、某个 sketch 结构数的，或者某个只会吐直方图的指标后端数的。 不等宽的分箱会按它们真实的宽度画出来，而这正是这里收的是边界、而不是标签的全部原因。分箱不等宽时记得设 `mode="density"`，否则宽的分箱会被读成高的分箱。 | |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| empty | ChartEmptyProps | false | 图表没东西可画时显示什么。传 `false` 保留坐标轴，用于那种「空本身就是结论」的图。 | |
| formatValue | (value: number) => string | defaultTick | 格式化那些被测量的值——分箱边界、刻度，以及 tooltip 的标题。 |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| mode | HistogramMode | 'frequency' | 柱子的高度代表什么。 `frequency` 是每个分箱里的计数，也是读者默认会以为的那个。`density` 是 `count / (n × 分箱宽度)`，于是总面积为 1——正是它让样本量不同的两张直方图能够相互比较，也正是它让不等宽的分箱保持诚实。 |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| values | number[] | 原始观测值，顺序随意。分箱这一步由 `bins` 替你做。 它和 `data` 二选一，不要都给——两个都来了，以 `data` 为准。 |
类型
export type HistogramMode = 'frequency' | 'density'无障碍
- 形状是**分箱宽度**的属性，不只是数据的属性：同一批数切成 8 个桶和切成 80 个桶，是两张不同的图。画出这张图的规则——默认 Freedman–Diaconis——写在页面上。
- 横轴是数值轴，每根柱子由它自己的两条边画出来，所以宽度不均的桶就是它真实的宽度，而不会被压成和邻居一样的等宽槽位。
- mode="density" 修的正是不等宽分箱制造的陷阱：在 frequency 下，同样的底层密度，宽一倍的桶会高一倍。
- 隐藏的表格视图印出每个桶的两条边和它的计数——这是一张分箱图唯一能给出的精确读数。