dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

現(xiàn)代的圖形庫(kù)通常帶有一個(gè)特殊的工具-布局算法，該工具可幫助加快不同圖形類型的創(chuàng)建。此功能用于自動(dòng)布置圖元素。該算法基于特定規(guī)則，計(jì)算圖形狀和連接器的位置，并以一種方式放置它們，即使是最復(fù)雜的圖也變得清晰而有幫助。

在本文中，我們將仔細(xì)研究最流行的自動(dòng)布局算法類型，了解如何在DHTMLX圖表中實(shí)現(xiàn)它們，并從技術(shù)角度考慮Web開(kāi)發(fā)人員如何使用我們的圖表組件來(lái)應(yīng)用自動(dòng)布局功能。

自動(dòng)布局算法的類型

布局算法可能在許多方面有所不同，但最常見(jiàn)的是，它們?cè)谛螤钊绾位ミB的方法（即，圖中使用哪種連接器）方面也有所不同。

基于此屬性，布局算法分為多種類型，但是最受歡迎的是分層布局和正交布局。
分層布局算法

分層布局算法在需要清楚顯示圖節(jié)點(diǎn)之間的依賴關(guān)系的應(yīng)用領(lǐng)域中很流行。例如，它廣泛用于可視化業(yè)務(wù)活動(dòng)（工作流程圖，PERT圖表，組織結(jié)構(gòu)圖），軟件工程（活動(dòng)圖），數(shù)據(jù)庫(kù)建模，電氣工程以及其他著重于數(shù)據(jù)流方向的領(lǐng)域。

正交布局算法

正交布局算法是中型稀疏圖的適當(dāng)選擇。它可以應(yīng)用于數(shù)據(jù)庫(kù)模式，系統(tǒng)管理或軟件工程。在ER圖或電路圖中經(jīng)常會(huì)遇到此算法。

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

當(dāng)使用DHTMLX JavaScript圖庫(kù)進(jìn)行數(shù)據(jù)可視化時(shí)，可以直接模式或邊緣模式自動(dòng)排列圖形狀。在直接模式允許連接圖形狀，其具有在一個(gè)層次結(jié)構(gòu)對(duì)角線。在邊緣模式啟動(dòng)直角連接，并幫助您創(chuàng)建正交圖形。

為了配置自動(dòng)布局算法，Web開(kāi)發(fā)人員有兩個(gè)可能的選擇：

使用autoPlace方法。
默認(rèn)情況下，此方法將實(shí)現(xiàn)鏈接形狀的直接模式。

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

關(guān)產(chǎn)品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺(tái)的C#甘特圖控件

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包

phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖

APS幫助提升企業(yè)生產(chǎn)效率，真正實(shí)現(xiàn)生產(chǎn)計(jì)劃可視化呈現(xiàn)與控制,快速有效響應(yīng)不同場(chǎng)景的生產(chǎn)計(jì)劃，提高準(zhǔn)時(shí)交貨能力，提高產(chǎn)能和資源利用率