dhtmlxgantt 自刷新_dhtmlxGantt使用教程：使用布局算法自动排列图形形状

是用于跨浏览器和跨平台应用程序的功能齐全的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图编辑器中的自动布局功能

关产品推荐：

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解【咨询在线客服】

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

文章转载自：DHTMLX

0

好文不易，鼓励一下吧！