图表
FunnelChart - 漏斗图
只会越来越窄的若干阶段。
用法
什么时候用它
来自@misoto22/folio/charts
import { FunnelChart } from '@misoto22/folio/charts'说明
只会越来越窄的若干阶段——注册流程、招聘管线、结账流程。
它的注意事项和所有漏斗图都一样：收窄编码的是相邻两阶段之间的比例，而眼睛读的是围出来的面积，于是漏斗会放大一次平缓的下滑、压平一次陡峭的下滑。当确切的流失率才是重点时，把百分比印到阶段上——<Funnel.Label> 就是干这个的——或者改用 <BarChart>，它把每个阶段编码在同一把老实的刻度上。
当流量会分叉、而不只是收窄时，改用 <SankeyChart>：漏斗从构造上只有一条路径。
结构
| 部件 | 说明 |
|---|---|
| 图框必填 | ChartFigure 的那个 <figure>，零个阶段时带一个空状态。加载骨架仍然没有，所以那个状态还是归调用处做。 |
| 阶段必填 | <FunnelChart.Funnel>。数据行按给定的顺序绘制，从不排序；每个阶段和下一个之间隔开的，是一道 gap 像素宽的 --chart-surface 描边，而不是一段透明间隙，所以各阶段仍然是相接的。 |
| 阶段标签 | <FunnelChart.Label>，默认放在右侧。它的 dataKey 默认取的是名称字段，不是值——要印出数字，得自己把它指向 value 键。 |
| 提示气泡 | <FunnelChart.Tooltip>，标题栏被压掉，光标也关着。这里没有一根能让十字线跑起来的坐标轴。 |
| 隐藏数据表 | 那张 sr-only 表格，一个阶段一行。它是这种图形提供的唯一精确读数，因为漏斗身上任何地方都没有坐标轴、也没有刻度。 |
实践建议
推荐
- 把 <FunnelChart.Label> 指向值字段。不给 dataKey，它印的是阶段名称，而那读者本来就有了；数字——恰恰是收窄这个形状读不出来的那一样东西——反倒没印出来。
- 数据行要自己按从宽到窄排好。组件按拿到的顺序画，不排序，所以一个放错位置的阶段会画出一个变宽的漏斗，读者会把它读成数据出错了。
- 除非各阶段本身还是一串不同的类别，否则就保持 variant="stepped"。ramp 会逐个阶段走一遍序列梯度，等于在收窄已经说过一遍之后，把落差再编码一次。
避免
- 不要用它来画会分叉的流。漏斗从构造上就只有一条路径；一个阶段分成两种结果的地方，老实的形式是 SankeyChart，它两条分支都画得出来。
- 不要从形状上读流失。收窄编码的是相邻两阶段之间的比例，而眼睛读的是围出来的面积，所以平缓的下滑被放大、陡峭的被压平，而且哪儿都没有一根坐标轴可以对照。
示例
默认
默认的漏斗：四个阶段，最宽的在前，每个阶段的名字印在旁边。这个收窄编码的是相邻两个阶段之间的比值，而眼睛读的是被围住的面积，所以漏斗会夸大一次浅浅的下跌、压平一次陡峭的下跌——印出来的标签就是对此的补救，而当确切的流失率才是重点时，BarChart 会把每个阶段放到一把诚实的刻度上。顺序就是这个漏斗，而这里从不替你排序，所以最宽的那个阶段必须排在第一。
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
样式
stepped 是那个诚实的默认值：每个阶段保持同样的填充，光靠收窄来承载这次下跌。ramp 还会让每个阶段依次加深，那把同一个事实编码了两遍，并招来读者去比较两个其实是一个的东西——这个开关摆在这里是为了让这件事看得见，不是为了把两者当成对等的选项来提供。标签在每个阶段中心印的是人数、而不是阶段名，因为那个数字恰恰是收窄不值得被信任去传达的东西；阶段名由 tooltip 承载。
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
逐级转化率
同一个漏斗上的两种标签：阶段名在里面，而它从上一个阶段留下来的占比在右边外面。收窄是一个眼睛读成面积的比值，所以它会夸大一次浅浅的下跌、压平一次陡峭的下跌，而印出来的比率是唯一能让流失变得确切的东西。这里最陡的一跌是从激活到付费，勉强三分之一撑了过去，而它恰恰是这个形状说得最少的一处，因为它发生在漏斗已经很窄的地方。每个比率都是相对它上一个阶段的占比，而不是相对最顶端，因为那是两个长得很像的不同数字，而一个不说清自己印的是哪一个的漏斗，会被读成对它更有利的那一个。
| stage | Value |
|---|---|
| Visited | 4,200 |
| Signed up | 1,800 |
| Activated | 900 |
| Paid | 320 |
类型
export type FunnelVariant = 'stepped' | 'ramp'无障碍
- title 必填；各阶段同样会渲染成一份视觉隐藏的表格。
- 收窄编码的是相邻两阶段之间的比例，而眼睛读的是围出来的面积，所以漏斗会放大一次平缓的下滑。组合一个 Label 把数字印上去——那就是补救。
- 默认样式让每个阶段共用同一种填充、把落差交给形状去说。再让每个阶段依次加深，等于把同一个事实编码两遍。