GetOrgChart是一个轻量的JavaScript插件，可用于创建动态组织架构图。它可以用于管理层次结构、流程图、簇等应用程序。使用GetOrgChart创建组织架构图可以简化许多工作流程，不需要手动调整图表的布局，而且可以轻松地将组织架构图嵌入到网站或应用程序中。
一、安装和使用GetOrgChart
要使用GetOrgChart，您需要从官方网站或通过npm安装相应的JavaScript文件。在使用GetOrgChart之前，您需要导入所需的JavaScript文件并在HTML文档中创建一个容器：
<script src=" getorgchart/getorgchart.js"> <script src=" getorgchart/getorgchart.css"> <div id="people">
接下来，您需要创建一个数据源并将其传递给 GetOrgChart 构造函数。数据源应该是JSON格式的，表示组织结构的节点和连接线。这是一个简单的数据源：
var people = [
{
id: 1,
parentId: null,
name: "CEO",
title: "Chief Executive Officer",
phone: "+1(213) 555-9392",
email: "dmurray@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/1",
children: [2, 3]
},
{
id: 2,
parentId: 1,
name: "CFO",
title: "Chief Financial Officer",
phone: "+1(213) 555-9392",
email: "jparrish@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/2",
children: []
},
{
id: 3,
parentId: 1,
name: "CTO",
title: "Chief Technology Officer",
phone: "+1(213) 555-9392",
email: "dpowers@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/3",
children: [4, 5]
},
{
id: 4,
parentId: 3,
name: "Manager",
title: "Development Manager",
phone: "+1(213) 555-9392",
email: "thill@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/4",
children: [6]
},
{
id: 5,
parentId: 3,
name: "Manager",
title: "QA Manager",
phone: "+1(213) 555-9392",
email: "jlewis@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/5",
children: []
},
{
id: 6,
parentId: 4,
name: "Developer",
title: "Senior Developer",
phone: "+1(213) 555-9392",
email: "rfitzgerald@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/6",
children: []
}
];
var orgChart = new GetOrgChart(document.getElementById("people"), {
theme: "my-custom-theme",
primaryFields: ["name", "title", "email", "phone"],
photoFields: ["imageSrc"],
dataSource: people
});
二、自定义GetOrgChart主题和选项
GetOrgChart有许多可自定义的主题和选项。您可以使用这些选项来调整节点大小、间距、颜色、字体、外观等方面。例如：
var orgChart = new GetOrgChart(document.getElementById("people"), {
theme: "my-custom-theme",
primaryFields: ["name", "title", "email", "phone"],
photoFields: ["imageSrc"],
dataSource: people,
boxBorderColor: "#12A4C0",
boxFillColor: "#E4F1FE",
boxBorderRadius: 3,
boxLineWidth: 3,
boxPadding: 10,
linkLineColor: "#12A4C0",
linkLineWidth: 2,
linkCurve: 0.5,
linkLineType: "straight",
toolbar: false,
mouseScrollEnabled: false
});
在此示例中，我们设置了自定义主题“my-custom-theme”，通过更改包含组织架构图元素的阴影、边框、填充、链接线颜色和类型等来自定义每个矩形框的视觉效果。此外，我们设置了“toolbar: false”和“mouseScrollEnabled: false”选项，以禁用工具栏和鼠标滚轮缩放功能。
三、更复杂的组织架构图
GetOrgChart不仅适用于简单的树形结构，还适用于更大和更复杂的组织架构图。在这些情况下，您需要合理地组织数据源，并使用适当的JSON格式。例如，以下JSON数据源表示一个更大的组织架构图，其中包含多个部门和子部门，例如销售、生产和客户服务：
var people = [
{
id: 1,
parentId: null,
name: "CEO",
title: "Chief Executive Officer",
phone: "+1(213) 555-9392",
email: "dmurray@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/1",
children: [2, 3, 4]
},
{
id: 2,
parentId: 1,
name: "CFO",
title: "Chief Financial Officer",
phone: "+1(213) 555-9392",
email: "jparrish@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/2",
children: []
},
{
id: 3,
parentId: 1,
name: "CTO",
title: "Chief Technology Officer",
phone: "+1(213) 555-9392",
email: "dpowers@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/3",
children: [5]
},
{
id: 4,
parentId: 1,
name: "COO",
title: "Chief Operations Officer",
phone: "+1(213) 555-9392",
email: "jmack@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/4",
children: [6, 7]
},
{
id: 5,
parentId: 3,
name: "Manager",
title: "Development Manager",
phone: "+1(213) 555-9392",
email: "thill@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/5",
children: [8, 9, 10]
},
{
id: 6,
parentId: 4,
name: "Manager",
title: "Sales Manager",
phone: "+1(213) 555-9392",
email: "tparker@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/6",
children: [11, 12, 13]
},
{
id: 7,
parentId: 4,
name: "Manager",
title: "Customer Service Manager",
phone: "+1(213) 555-9392",
email: "jgibson@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/7",
children: [14, 15]
},
{
id: 8,
parentId: 5,
name: "Developer",
title: "Senior Developer",
phone: "+1(213) 555-9392",
email: "rfitzgerald@fakemail.com",
imageSrc: "http://lorempixel.com/128/128/people/8",
children: []
},
//...更多数据
];
var orgChart = new GetOrgChart(document.getElementById("people"), {
theme: "my-custom-theme",
primaryFields: ["name", "title", "email", "phone"],
photoFields: ["imageSrc"],
dataSource: people
});
您还可以添加定制事件以处理更多复杂的情况或用户交互。如下所示：
orgChart.on('beforeRender', function(sender, args) {
console.log('beforeRender()');
});
orgChart.on('itemSelected', function(sender, args) {
console.log('itemSelected():', args.id);
});
orgChart.on('photoClick', function(sender, args) {
console.log('photoClick():', args.id);
});
orgChart.on('expand', function(sender, args) {
console.log('expand():', args.id);
});
orgChart.on('collapse', function(sender, args) {
console.log('collapse():', args.id);
});
结论
使用GetOrgChart创建组织架构图是一个快速、简单和高效的方法。它能够简化组织架构图的创建过程，节省时间和精力。使用JSON格式的数据源，您可以轻松地构建任何大小和形状的组织架构图，从而实现更好地组织和管理数据。GetOrgChart还有大量可定制的选项和事件，您可以使用这些选项和事件来定制组织架构图，以满足您的需求。