图表
SankeyChart
一个量在流经各个阶段时去了哪里。
什么时候用它
漏斗、预算、能耗或流量拆解。这是这里唯一一张数据是图（graph）而不是表的图表。
示例
default
| from | To | Value |
|---|---|---|
| Search | Signed up | 42 |
| Search | Browsed | 68 |
| Social | Browsed | 51 |
| Social | Left | 34 |
| Direct | Signed up | 27 |
| Direct | Left | 18 |
links and labels
| from | To | Value |
|---|---|---|
| Search | Signed up | 42 |
| Search | Browsed | 68 |
| Social | Browsed | 51 |
| Social | Left | 34 |
| Direct | Signed up | 27 |
| Direct | Left | 18 |
loading
说明
一个量在流经各个阶段时去了哪里——用来画漏斗、预算、能耗或流量拆解。
这是这里唯一一张数据是图（graph）而不是表的图表，所以它接收的是 { nodes, links } 而不是数据行，表格视图列的也是流而不是节点。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| children必填 | ReactNode | 组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。 | |
| config必填 | ChartConfig | 节点名 → 它的标签和上色。 | |
| data必填 | SankeyData | 节点，以及它们之间的连接，用 Recharts 自己的数据形状。 | |
| title必填 | string | 这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。 | |
| align | 'left' | 'justify' | 'justify' | 节点沿流动方向如何摆放。 |
| className | string | 最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。 | |
| defaultSelectedNode | string | null | null | 首次渲染时点亮的节点。选中一个节点会让所有不经过它的流变暗。 |
| description | ReactNode | 标题下面的一行——单位、时间窗口、需要提醒的地方。 | |
| hideDataTable | boolean | false | 去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。 |
| isLoading | boolean | false | 把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。 |
| iterations | number | 32 | 布局迭代次数。越多越整齐，也越慢。 |
| linkCurvature | number | 0.5 | 0 画直线，1 画最弯的曲线。 |
| nodePadding | number | 10 | 同一列中相邻节点之间的纵向间距，单位是像素。 |
| nodeWidth | number | 10 | 每个节点矩形有多宽，单位是像素。 |
| onSelectionChange | (selection: { name: string; value: number } | null) => void | 选中项变化时触发；被清除时传 null。 | |
| sankeyProps | Omit<SankeyProps, 'data'> | 通往原始 Recharts Sankey 元素的逃生口。 | |
| showTitle | boolean | 把标题印在图上方，而不是藏起来。 | |
| sort | boolean | true | 允许布局重排节点，让交叉最少。 |
| verticalAlign | 'justify' | 'top' | 'justify' | 节点在一列内部如何分布。 |
类型
export type SankeyLinkVariant = 'gradient' | 'solid' | 'source' | 'target'
export type SankeyLabelPosition = 'inside' | 'outside'无障碍
- title 必填。隐藏表格列的是“流”而不是节点——一张节点合计表会丢掉这张图存在的全部理由：每一条“从哪到哪”。
- 四种连接样式：gradient 读起来像流动，source 与 target 把整条带归属到某一端，solid 放弃颜色、让节点去承担身份。