在IT领域，组织架构图是一种常见且重要的工具，它用于可视化地表示公司的部门、团队以及员工之间的层次关系。本文将详细介绍如何使用GoJS这个JavaScript库来实现横纵向展示的组织架构图。
GoJS是一个功能强大的图形库，专为构建富交互性的Web图形界面而设计，尤其适用于创建流程图、组织架构图、网络拓扑图等。它提供了丰富的API和定制选项，使得开发者可以轻松地构建复杂的数据可视化应用。
我们需要了解GoJS的基本概念。在GoJS中，图（Diagram）是包含所有节点（Node）和链接（Link）的对象，节点用于表示数据实体，链接则表示它们之间的关系。组织架构图的节点通常代表人员或部门，链接则表示上下级或协作关系。
**创建节点模板**
在GoJS中，节点的外观和行为可以通过节点模板来定义。我们可以创建一个函数，返回一个`Part`对象，该对象包含了图形元素（如`Shape`、`TextBlock`等）以及它们的布局和行为。例如，我们可以创建一个矩形形状表示部门，一个文本块显示部门名称，再加一个小的圆形形状表示负责人。
```javascript
function myNodeTemplate() {
var $ = go.GraphObject.make;
return $(go.Node, "Auto",
$(go.Shape, "Rectangle", { fill: "lightblue" }),
$(go.TextBlock, "部门名称", { margin: 5 }),
$(go.Shape, "Circle", { fill: "red", portId: "boss" })
);
}
```
**创建链接模板**
链接模板定义了链接的外观和行为。与节点模板类似，我们可以通过`GraphObject.make`来创建链接的各个部分，如线段、箭头、标签等。对于组织架构图，我们可能需要一条带有箭头的直线来表示上下级关系。
```javascript
function myLinkTemplate() {
var $ = go.GraphObject.make;
return $(go.Link,
$(go.Shape, { stroke: "black", strokeWidth: 2 }),
$(go.Shape, { toArrow: "standard", stroke: "black" })
);
}
```
**加载数据和设置模型**
组织架构图的数据通常来源于后端数据库或JSON文件。GoJS提供了一个`Model`类，用于存储和操作图中的数据。我们可以创建一个`go.Model`实例，然后使用`fromJSON`或手动添加数据。每个节点和链接都有一个唯一的键（key），GoJS会自动处理这些键对应的图形元素的更新和删除。
```javascript
var myDiagram = new go.Diagram();
myDiagram.model = new go.GraphLinksModel(
[
{ key: "dept1", text: "销售部", boss: "none" },
{ key: "dept2", text: "市场部", boss: "dept1" },
// 更多数据...
],
[
{ from: "dept1", to: "dept2" },
// 更多链接...
]
);
```
**设置布局**
GoJS提供了多种内置布局，如`TreeLayout`用于组织架构图。我们可以选择横向或纵向布局，调整各种布局参数，如层次间距、节点大小等。
```javascript
myDiagram.layout =
$(go.TreeLayout,
{ direction: go.TreeLayout.Horizontal, // 或者 Vertical
treeStyle: go.TreeLayout.ArrangementTopOrBottom, // 或者 ArrangementLeftOrRight
layerSpacing: 30, nodeSpacing: 10, compaction: go.TreeLayout.CompactionNone });
```
**初始化和更新图**
我们将模板和模型应用到图实例上，并设置图的初始位置。如果数据发生变化，我们可以调用`myDiagram.modelChanged`来更新图。
```javascript
myDiagram.nodeTemplate = myNodeTemplate;
myDiagram.linkTemplate = myLinkTemplate;
// 将图添加到HTML页面中
document.getElementById("myDiv").appendChild(myDiagram.div);
myDiagram.startTransaction("loadData");
myDiagram.model = myModel; // 假设myModel是从服务器获取的新数据
myDiagram.commitTransaction("loadData");
```
通过以上步骤，我们便能使用GoJS实现一个灵活、可定制的组织架构图，支持横纵向展示。这只是一个基础示例，实际上GoJS提供了许多高级特性，如拖放操作、连接点（port）自定义、动画效果等，可以帮助开发者创建更丰富的交互体验。在实际项目中，根据需求进行调整和优化，可以实现更符合业务场景的组织架构图应用。
gojs实现组织架构图.zip （4个子文件） 
gojs实现组织架构图 
gojs实现组织架构图.html 3KB
go-module.js 851KB
