JS 鱼骨图|极客笔记

JS 鱼骨图

1. 什么是鱼骨图

鱼骨图（也称为鱼骨图或鱼骨图）是一种用于显示项目进展或问题解决方案中不同因素之间关系的图表。它在横向中心列显示问题或项目的主题，然后从中心列伸出几根竖向线条，分别代表不同因素或关联因素。它的形状非常像一条鱼的骨架，因此得名。

鱼骨图最初由日本质量控制专家石川善一提出，用于帮助分析问题的根本原因。现在，它被广泛用于团队合作和决策制定中，帮助人们迅速理解问题的复杂性和各个因素之间的关联。

2. 如何绘制鱼骨图

2.1 准备工作

在绘制鱼骨图之前，首先需要确定问题或项目的主题，并列出相关的因素或关联因素。通常，这些因素可以分为以下几类：人员、方法、机器、材料、环境、测量、时间。

2.2 绘制步骤

在纸上或数字工具中，绘制一个横向中心列，写下问题或项目的主题。
从主题两侧向外伸出几根竖向线条，表示不同因素或关联因素。
在每根竖向线条上写下一个因素或关联因素的名称。
在每个因素或关联因素下方，添加详细的描述或相关信息。
根据需要，可以在每个因素或关联因素下方再添加子因素或相关信息。

2.3 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fishbone Diagram</title>
<style>
    .fishbone {
        display: flex;
        justify-content: center;
    }
    .main-topic {
        margin: 20px;
    }
    .factor {
        margin: 10px;
    }
</style>
</head>
<body>
<div class="fishbone">
    <div class="main-topic">Problem: Low Productivity</div>
    <div class="factor">
        <div>People</div>
        <ul>
            <li>Insufficient training</li>
            <li>Lack of motivation</li>
        </ul>
    </div>
    <div class="factor">
        <div>Methods</div>
        <ul>
            <li>Outdated procedures</li>
            <li>Inefficient workflow</li>
        </ul>
    </div>
    <div class="factor">
        <div>Machines</div>
        <ul>
            <li>Old equipment</li>
            <li>Frequent breakdowns</li>
        </ul>
    </div>
    <div class="factor">
        <div>Materials</div>
        <ul>
            <li>Low-quality supplies</li>
            <li>Inadequate inventory</li>
        </ul>
    </div>
    <div class="factor">
        <div>Environment</div>
        <ul>
            <li>Poor lighting</li>
            <li>Noise pollution</li>
        </ul>
    </div>
</div>
</body>
</html>

2.4 运行结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fishbone Diagram</title>
<style>
    .fishbone {
        display: flex;
        justify-content: center;
    }
    .main-topic {
        margin: 20px;
    }
    .factor {
        margin: 10px;
    }
</style>
</head>
<body>
<div class="fishbone">
    <div class="main-topic">Problem: Low Productivity</div>
    <div class="factor">
        <div>People</div>
        <ul>
            <li>Insufficient training</li>
            <li>Lack of motivation</li>
        </ul>
    </div>
    <div class="factor">
        <div>Methods</div>
        <ul>
            <li>Outdated procedures</li>
            <li>Inefficient workflow</li>
        </ul>
    </div>
    <div class="factor">
        <div>Machines</div>
        <ul>
            <li>Old equipment</li>
            <li>Frequent breakdowns</li>
        </ul>
    </div>
    <div class="factor">
        <div>Materials</div>
        <ul>
            <li>Low-quality supplies</li>
            <li>Inadequate inventory</li>
        </ul>
    </div>
    <div class="factor">
        <div>Environment</div>
        <ul>
            <li>Poor lighting</li>
            <li>Noise pollution</li>
        </ul>
    </div>
</div>
</body>
</html>