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幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率