dhtml gantt所有配置_dhtmlxGantt使用布局算法自动排列图形形状

现代的图形库通常带有一个特殊的工具-布局算法，该工具可帮助加快不同图形类型的创建。此功能用于自动布置图元素。该算法基于特定规则，计算图形状和连接器的位置，并以一种方式放置它们，即使是最复杂的图也变得清晰而有帮助。

在本文中，我们将仔细研究最流行的自动布局算法类型，了解如何在DHTMLX图表中实现它们，并从技术角度考虑Web开发人员如何使用我们的图表组件来应用自动布局功能。

自动布局算法的类型

布局算法可能在许多方面有所不同，但最常见的是，它们在形状如何互连的方法(即，图中使用哪种连接器)方面也有所不同。

基于此属性，布局算法分为多种类型，但是最受欢迎的是分层布局和正交布局。

分层布局算法

DHTMLX在组织结构图中的分层布局

分层布局算法使用直线和对角线连接器以分层顺序排列加载的数据。它有助于在图中清晰显示主要方向(或流程)。在此，图的形状通常位于分层结构的层中，并且大多数连接器都朝着相同的方向(从左到右，从上到下等)定向。由于连接器之间交叉的可能性很小，因此该算法使该图更加清晰。

分层布局算法在需要清楚显示图节点之间的依赖关系的应用领域中很流行。例如，它广泛用于可视化业务活动(工作流程图，PERT图表，组织结构图)，软件工程(活动图)，数据库建模，电气工程以及其他着重于数据流方向的领域。

正交布局算法

DHTMLX在方框图中的正交布局

正交布局利用直角连接器来呈现有向图或无向图，从而使您可以快速了解节点之间的关系。像分层布局一样，正交布局算法有助于最大程度地减少交叉的机会，并且还可以确保没有重叠，并且弯曲尽可能少。因此，图，尤其是复杂的图，变得更加紧凑和可读。

正交布局算法是中型稀疏图的适当选择。它可以应用于数据库模式，系统管理或软件工程。在ER图或电路图中经常会遇到此算法。

如何在DHTMLX图中使用布局算法

当使用DHTMLX JavaScript图库进行数据可视化时，可以直接模式或边缘模式自动排列图形状。在直接模式允许连接图形状，其具有在一个层次结构对角线。在边缘模式启动直角连接，并帮助您创建正交图形。

为了配置自动布局算法，Web开发人员有两个可能的选择：

使用autoPlace方法。

默认情况下，此方法将实现链接形状的直接模式。

直接模式下的对角连接器

(可选)您可以通过mode参数将其更改为edges模式。

边缘模式下的直角连接器

如果要在网格上彼此并排放置多个图，则可以应用graphPadding参数来确定图之间的间隔(默认为200px)。

var diagram = new dhx.Diagram("diagram");

diagram.data.parse(data);

diagram.autoPlace({

mode: "edges",

graphPadding: 100

});

使用自动放置属性设置相同的配置参数

var diagram = new dhx.Diagram("container", {

autoplacement: {

mode: "edges",

graphPadding: 100

}

});

图布局算法也可以在图编辑器中使用。可以通过自动放置配置指定其设置。这项高级功能可帮助最终用户从UI更快地构建精美而整洁的图表。用户只需要从左侧面板拖动所有需要的形状，通过连接器将它们相互链接，然后单击“自动布局”按钮即可。连接的形状将立即组装成组织良好的图表。

DHTMLX图编辑器中的自动布局功能