彩票走势图

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

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

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

自动布局算法的类型

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

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

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

正交布局算法

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

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

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

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

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

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
    }
});

关产品推荐：

VARCHART XGantt：支持ActiveX、.Net等平台的C#甘特图控件

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平台jQuery Gantt包

phGantt Time Package：对任务和时间的分配管理的甘特图

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