OrgChart.js: 构建动态组织结构图的利器
OrgChart.js 是一个用于构建动态组织结构图的JavaScript库。以下是一个使用OrgChart.js创建简单组织结构图的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>OrgChart.js 示例</title>
<script src="https://cdn.orgchart.com/orgchart.latest.min.js"></script>
<style>
.orgchart {
border: none;
}
</style>
</head>
<body>
<div id="chart-container"></div>
<script>
// 定义组织结构数据
var datasource = {
'name': 'CEO',
'title': '首席执行官',
'children': [
{ 'name': 'CTO', 'title': '首席技术官', 'className': 'male' },
{ 'name': 'CFO', 'title': '首席财务官', 'className': 'female' },
{
'name': 'CMO',
'title': '首席营销官',
'className': 'male',
'children': [
{ 'name': 'Marketing', 'title': '市场部' },
{ 'name': 'Advertising', 'title': '广告部' }
]
}
]
};
// 创建组织结构图
var chart = new OrgChart(document.getElementById('chart-container'), {
theme: 'modern',
layout: 'tree',
nodeBinding: {
field_0: 'name',
field_1: 'title',
img_0: 'https://www.orgchart.com/images/female.png',
img_1: 'https://www.orgchart.com/images/male.png'
},
nodeContent: '{{title}}',
edges: {
type: 'curve'
},
toolbar: {
zoom: true,
fit: true
},
template: 'rect',
orientation: 'top',
visibleLevel: 2
});
// 加载数据
chart.load(datasource);
</script>
</body>
</html>这段代码定义了一个简单的组织结构，并使用OrgChart.js创建了一个图表，展示了CEO、CTO、CFO和CMO及其下属的结构。你可以根据需要调整 datasource 中的数据结构来创建更复杂的组织图。
评论已关闭