Question

有人知道哪个是动态组织结构图中最理想的免费JS库，您可以在其中添加和删除这样的节点：

Answer 1

请检查以下html代码

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://fperucic.github.io/treant-js/Treant.css">
<script src="https://fperucic.github.io/treant-js/vendor/raphael.js"></script>
<script src="https://fperucic.github.io/treant-js/Treant.js"></script>
<script>
var simple_chart_config = {
    chart: {
        container: "#OrganiseChart-simple"
    },

    nodeStructure: {
        text: { name: "Parent node" },
        children: [
            {
                text: { name: "First child" }
            },
            {
                text: { name: "Second child" }
            }
        ]
    }
};
var config = {
    container: "#OrganiseChart-simple"
};

var parent_node = {
    text: { name: "Parent node" }
};

var first_child = {
    parent: parent_node,
    text: { name: "First child" }
};

var second_child = {
    parent: parent_node,
    text: { name: "Second child" }
};

var simple_chart_config = [
    config, parent_node,
        first_child, second_child 
];
</script>
<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }

body { background: #fff; }

/* optional Container STYLES */
.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; }
.node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
</style>
<body>
    <div class="chart" id="OrganiseChart-simple">
</body>
<script>
new Treant( simple_chart_config );
</script>
</html>

参考网址：https://fperucic.github.io/treant-js/

Answer 2

您可以尝试OrgChart

它是开源的，您可以签出现场演示

组织架构图

2 个答案: