Fishbone 鱼骨图

鱼骨图，又名石川图，用于系统地分析问题根本原因的图表工具，通过将问题分解为多个因素，帮助识别和解决问题。

import { Fishbone } from '@ant-design/graphs';

何时使用

鱼骨分析法又名因果分析法，由日本管理大师石川馨先生发展而来，是一种透过现象看本质的分析方法，可以帮助我们快速找出引发问题的根本原因。

鱼骨分析法的基本原理是针对一个问题（作为鱼头），列明产生问题的大要因（鱼骨主干），从大要因继续深入细分，挖掘小要因（鱼骨分支），如此一层层挖掘分析下去，直至找出可以解决问题的方法或者行动的步骤。

代码演示

原因型鱼骨图

原因型鱼骨图（鱼头在右），用于分析问题。

决策型鱼骨图

决策型鱼骨图（鱼头在左），用于解决问题。

调整布局参数

调整鱼骨分支位置。

API

通用配置参考：图通用属性

Fishbone

属性	说明	类型	默认值
data	数据	Data	-
labelField	指定节点标签内容 - 从数据中选择一个字段，对应字段的值作为节点的标签 - 动态生成，将以节点数据为参数调用该函数，并使用返回值作为节点的标签	string \| ((node: NodeData) => string)	节点 ID
type	鱼骨图类型	`cause` \| `decision`	`cause`
defaultExpandLevel	默认展开层级，若不指定，将展开全部	number	-
layout	布局配置	Layout	-

Data

支持两种数据格式：

（👍 推荐） 树图数据

类型定义：

type TreeData = {
  id: string;
  children?: TreeData[];
  [key: string]: unknown;
};

例如：

const data = {
  id: 'root',
  children: [
    {
      id: 'Child 1',
      value: 10,
      children: [
        { id: 'Sub 1-1', value: 5 },
        { id: 'Sub 1-2', value: 5 },
      ],
    },
    {
      id: 'Child 2',
      value: 20,
      children: [
        { id: 'Sub 2-1', value: 10 },
        { id: 'Sub 2-2', value: 10 },
      ],
    },
  ],
};

图数据。若开启“展开-收起”交互，需确保数据中包含 children 字段。

const graphData = {
  nodes: [
    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
    { id: '3', data: { label: 'Node 3' } },
    { id: '4', data: { label: 'Node 4' } },
  ],
  edges: [
    { source: '1', target: '2' },
    { source: '1', target: '3' },
    { source: '2', target: '4' },
  ],
};

Layout

鱼骨图布局。参数如下：

属性	说明	类型	默认值
type	布局类型	string	`fishbone`
direction	排布方向	`RL` \| `LR`	`RL`
vGap	设置垂直间距	number	默认使用节点高度
hGap	设置水平间距	number	默认使用节点宽度
getRibSep	设置鱼骨间距	(node: NodeData) => number	() => 60