组织架构图js

组织架构图（Organizational Chart）是一种展示公司、组织或团队内部结构和人员关系的图表。在JavaScript中，你可以使用多种库来生成和展示组织架构图，其中一些流行的库包括jsPlumb, OrgChart.js, 和 D3.js。

基础概念

节点（Node）：代表组织中的一个成员或部门。
连接（Connection）：表示节点之间的关系，如上下级关系。
层级（Hierarchy）：组织架构图通常按照层级结构来展示，顶层是最高级别的管理者，下面是各个部门和下属。

类型

静态组织架构图：固定不变的组织结构图。
动态组织架构图：可以实时更新和调整的组织结构图。

应用场景

公司内部展示：向新员工展示公司的组织结构。
项目管理：展示项目团队成员及其职责。
人力资源管理：用于管理和跟踪员工的职位变动。

示例代码（使用OrgChart.js）

以下是一个简单的示例，展示如何使用OrgChart.js库来生成一个基本的组织架构图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Organizational Chart</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/orgchart/3.1.1/css/jquery.orgchart.min.css">
</head>
<body>
    <div id="chart-container"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/orgchart/3.1.1/js/jquery.orgchart.min.js"></script>
    <script>
        $(function() {
            var orgChart = $('#chart-container').orgChart({
                data: [
                    { id: 1, name: 'CEO', title: 'Chief Executive Officer', children: [
                        { id: 2, name: 'CTO', title: 'Chief Technology Officer' },
                        { id: 3, name: 'CFO', title: 'Chief Financial Officer' }
                    ]},
                    { id: 4, name: 'Dev Lead', title: 'Development Lead', parent: 2, children: [
                        { id: 5, name: 'Frontend Dev', title: 'Frontend Developer' },
                        { id: 6, name: 'Backend Dev', title: 'Backend Developer' }
                    ]},
                    { id: 7, name: 'Finance Lead', title: 'Finance Lead', parent: 3 }
                ],
                nodeContent: 'title'
            });
        });
    </script>
</body>
</html>