网络图是版本1.50中引入的一个新控件，它允许您将数据显示为通过线连接的节点网络。节点可以是圆形或矩形，物联网概念，并且可以连接到组中。可以为节点和节点组定义自定义属性，也可以应用定义图形外观的布局算法。此控件的标准应用程序如下：

此外，网络图高度可定制，可以以多种方式使用。我想展示一个这样的定制变体，这个控件不是主要设计的，但是可以使用组织结构图。

假设我们有员工、他们的经理和同事的数据，我们想把这些数据显示为一个组织层次结构。

让我们看看网络图的关键特性。通过网络图，您可以：

显示所有员工的树状组织结构对于每个员工，加载员工的经理轻松搜索所有员工单独或作为单个组显示团队成员将颜色编码应用于不同的团队或部门（本例中未实现）

在本教程结束时，我们的组织结构图将如下所示。

本例使用模拟动态加载（通过JSON模型），但您也可以将其与OData服务一起使用。在本例中，每个节点都可以折叠，根员工节点有一个向上的箭头按钮，可以将树向上展开一级。

让我们从布局开始。

布局算法

网络图支持多种布局算法。在这个例子中，我们使用了默认的"分层"算法，并做了一些小的调整。

合并边：这个标志将从节点开始的所有行合并成一行。使用此设置，图形看起来更紧凑nodePlacement：在分层算法中有3种定位节点的方法简单的"节点放置"尝试将节点放置在尽可能靠近彼此的位置，以实现"树状"的整体外观。nodespacing：我们将此选项设置为40，以使节点之间的空间更小。因为它看起来更好，所以组织结构图看起来更轻更优雅

节点自定义

默认情况下，图形支持两个节点形状

方框（矩形）圆（圆形）

在我们的例子中，我们将使用盒子形状，并进行一些调整。默认情况下，长方体节点有一个图标、标题和属性，如下图所示。

另一方面，我们希望有一个员工图片，大数据教程，下面有一个姓名。我们还需要使用属性来显示此员工直接下属的数量。我们需要将标题留空，并使用说明来保存员工的姓名。

节点的重要设置：

说明：默认情况下，矩形节点会在其旁边（右侧）显示图像和标题。要修改这个，我们使用一个空标题，并将雇员姓名设置为描述，描述将呈现在图像下面。宽度：必须手动调整节点的宽度以适应图像大小。在我们的例子中，图像的宽度是80px，而节点的宽度是90px。属性：属性显示有关团队大小的信息。此选项绑定到其聚合。showActionLinksButton，showDetailButton：隐藏默认操作按钮（在用户单击节点后呈现），我们将对所有操作使用自定义按钮。形状：将节点显示为矩形。

我们需要将节点绑定到属性中不可用的模型中的更多数据。对于这种情况，我们可以使用customData绑定。

使用此数据，我们可以以弹出窗口的形式显示有关员工的附加信息，物联网流量卡，例如团队或位置。

属性用于显示团队大小。

行自定义

使用行，在本例中没有太多可自定义的内容。我们只是使用"arrowtorientation"属性隐藏箭头。

要禁用默认行popover，我们附加一个"press"事件并设置"bPreventDefault"。

动态数据加载

如前所述，我们尝试模拟OData服务。尽管我们的数据存储在一个JSON模型中，但我们使用过滤器对其进行操作的方式与使用OData服务时相同。为此，我们存储一个已经加载的管理器数组。

对于每个管理器节点，我们创建一个特殊的操作按钮来触发额外的数据加载。为了实现这一点，我们将一个事件处理程序附加到"beforeLayouting"事件，在该事件中操作所有节点。此事件在数据发送到布局算法并呈现之前触发。

我们向根管理器节点添加了一个"上一级"按钮。每个管理器都有一个存储在自定义数据中的管理器的"key"，所以我们用这个key调用"\u loadMore"。

过滤

为了模拟OData，我们使用filter对象。对于每个绑定（节点、行），我们创建一个表示条件的过滤器，例如asid='Boss1'，或manager='Boss1'，或id='Boss2'，或manager='Boss2'，或类似的条件。这同样适用于线路。这将缩小数据集的范围，并允许我们仅返回已加载的管理者及其团队。

折叠/展开节点

有两种方法可以处理展开/折叠行为。要么已经加载了数据，所以我们只需隐藏子节点（这是默认的网络图行为），要么必须手动加载子节点（因为默认情况下，管理者不随团队一起加载）。在这两种情况下，我们需要不同的按钮，如下面的代码片段所示。

如您所见，我们需要处理三种情况：