DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。DHTMLX Diagram庫允許用幾行代碼構(gòu)建JavaScript流程圖，通過自動(dòng)布局和實(shí)時(shí)編輯器，它可以更容易地將復(fù)雜數(shù)據(jù)可視化到一個(gè)整潔的層次結(jié)構(gòu)中。

在本教程中，您將學(xué)習(xí)如何將 JS 甘特圖與 JS 思維導(dǎo)圖集成并同步它們，并將向您展示 DHTMLX Gantt 與DHTMLX Diagram 庫的集成案例。

DHTMLX Gantt v9.0.2最新版下載    DHTMLX Diagram v6.0.6最新版下載

在甘特圖等 PM 工具中使用思維導(dǎo)圖的好處

使用 DHTMLX 構(gòu)建的甘特圖可用于高效管理各種復(fù)雜的工作流程。在具有復(fù)雜任務(wù)層次結(jié)構(gòu)和依賴關(guān)系的項(xiàng)目中，思維導(dǎo)圖等可視化工具可以方便最終用戶簡化項(xiàng)目規(guī)劃及其執(zhí)行進(jìn)度。借助思維導(dǎo)圖，可以更輕松地全面了解任務(wù)的整體結(jié)構(gòu)、檢測潛在瓶頸并改進(jìn)工作流程。

在下面的示例中，您可以看到 DHTMLX Gantt 和 Diagram 組件集成的結(jié)果。思維導(dǎo)圖顯示了甘特圖中安排的項(xiàng)目任務(wù)。由于甘特圖數(shù)據(jù)與思維導(dǎo)圖同步，因此甘特圖中引入的任何更改都將顯示在思維導(dǎo)圖中。換句話說，您可以創(chuàng)建、更新、刪除、展開/折疊任務(wù)鏈，所有這些操作都將在思維導(dǎo)圖中可視化。

需要注意的是，圖表組件只允許一個(gè)根元素，而甘特圖可以有多個(gè)根元素（任務(wù)）。因此，在我們的示例中，當(dāng)甘特圖在根級別只有一個(gè)任務(wù)時(shí)，它將是思維導(dǎo)圖中的根元素。如果甘特圖的根級別有更多任務(wù)，思維導(dǎo)圖將補(bǔ)充一個(gè)附加元素，該元素將合并根級別的所有元素。

現(xiàn)在，我們可以按照分步說明幫助您在場景中實(shí)現(xiàn)類似的集成。

DHTMLX Gantt 與思維導(dǎo)圖集成指南

• 步驟 1：初始化圖表

我們先初始化JavaScript圖表組件。它應(yīng)該在思維導(dǎo)圖容器中初始化。您應(yīng)該在類型參數(shù)中設(shè)置“mindmap”以獲取此類型的圖表。

const diagram = new dhx.Diagram ( "mindmap" , { type     : " mindmap" } ) ;

• 步驟 2：同步數(shù)據(jù)變更

要同步更改，您需要?jiǎng)h除當(dāng)前圖表數(shù)據(jù)并加載新數(shù)據(jù)。由于有多個(gè)任務(wù)，您需要將它們?nèi)?包含在數(shù)組中，然后添加事件處理程序，在其中調(diào)用負(fù)責(zé)同步更改的syncData函數(shù)。

const syncEvents = [
    "onAfterTaskAdd",
    "onAfterTaskDelete",
    "onAfterTaskUpdate",
    "onParse",
]
syncEvents.forEach(function (eventName) {
    gantt.attachEvent(eventName, function () {
        syncData();
    });
})

在syncData函數(shù)中，需要?jiǎng)h除現(xiàn)有的數(shù)據(jù)。

function syncData() {
    diagram.data.removeAll();

之后，您必須以文本格式（mindData變量）保存甘特圖數(shù)據(jù)。

const mindData = gantt.serialize().data;

下一步是聲明syncData函數(shù)中需要的三個(gè)變量（ rootItem、addRootIem、firstRootParent ） 。rootItem元素用于 Diagram 組件。 如果甘特圖中有多個(gè)根任務(wù)，則此元素將添加到數(shù)據(jù)中。

const rootItem = { id: "root", text: "My project" };
let addRootItem = false;
let firstRootParent = null;

接下來，用任務(wù)遍歷數(shù)組。如果檢測到任務(wù)沒有父任務(wù)，且firstRootParent變量中未保存任何內(nèi)容，則將任務(wù)保存在此處。

mindData.forEach(function (task) {
    if (!task.parent) {
        if (!firstRootParent) {
            firstRootParent = task;
        }

如果變量不為空，則表示有多個(gè)根任務(wù)。您應(yīng)該修改當(dāng)前任務(wù)的父參數(shù)以及存儲(chǔ)在firstRootParent變量中的參數(shù)。

else {
    firstRootParent.parent = "root";
    task.parent = "root";
    addRootItem = true;
}

Gantt 允許id和parent參數(shù)中的值為字符串或數(shù)字類型，但 Diagram 僅需要字符串。因此，您應(yīng)該將這些參數(shù)轉(zhuǎn)換為字符串類型。

task.id += "";
if (task.parent) {
    task.parent += "";
}

需要注意的是， Diagram 中的type參數(shù)設(shè)置了元素的形狀。如果此參數(shù)中已經(jīng)指定了某些內(nèi)容，則元素將具有矩形形狀。為了節(jié)省空間并使所有元素看起來更緊湊，您需要?jiǎng)h除 type參數(shù)。

delete task.type;

之后，檢查addRootItem變量的值。如果需要添加根元素，則將rootItem添加到包含數(shù)據(jù)的數(shù)組中。

if (addRootItem) {
    mindData.push(rootItem);
}

• 步驟 3：同步兩個(gè)組件的打開和關(guān)閉狀態(tài)

下一步是將數(shù)據(jù)加載到圖表中并運(yùn)行syncOpenState函數(shù)。

diagram.data.parse(mindData);
syncOpenState();

在這個(gè)函數(shù)中，你遍歷所有的甘特圖任務(wù)。如果任務(wù)的層次結(jié)構(gòu)是展開的，你調(diào)用Diagram 組件的expandItem()方法來展開思維導(dǎo)圖中的分支。如果任務(wù)的層次結(jié)構(gòu)是折疊的，你調(diào)用collapseItem()方法。

gantt.eachTask(function (task) {
    if (task.$open) {
        diagram.expandItem(task.id + "");
    }
    else {
        diagram.collapseItem(task.id + "");
    }
})

當(dāng)甘特圖中的任務(wù)展開和折疊時(shí)，您無需調(diào)用syncOpenState函數(shù)來遍歷所有任務(wù)以同步更改。由于對象的 ID 相同，因此使用相同的 ID（最好將其轉(zhuǎn)換為字符串）調(diào)用expandItem()和collapseItem()方法就足夠了。

思維導(dǎo)圖中的根任務(wù)在左右兩側(cè)都有子任務(wù)。因此，在擴(kuò)展思維導(dǎo)圖中的分支時(shí)，您需要知道應(yīng)該從哪一側(cè)開始。您需要為expandItem()方法指定兩側(cè)。

gantt.attachEvent("onTaskOpened", function (id) {
    diagram.expandItem(id + "", "left");
    diagram.expandItem(id + "", "right");
});

gantt.attachEvent("onTaskClosed", function (id) {
    diagram.collapseItem(id + "");
});

當(dāng)思維導(dǎo)圖中的任務(wù)展開和折疊時(shí)，您可能希望將這些變化與甘特圖同步。為此，您需要添加以下代碼：

diagram.events.on("afterExpand", (id, dir) => {
    gantt.silent(function () {
        const task = gantt.getTask(id)
        task.$open = true
    })
    gantt.render()
});

diagram.events.on("afterCollapse", (id, dir) => {
    gantt.silent(function () {
        const task = gantt.getTask(id)
        task.$open = false
    })
    gantt.render()
});

需要更改任務(wù)的$open屬性。此屬性顯示任務(wù)的展開狀態(tài)。最好在靜默函數(shù)內(nèi)執(zhí)行此操作，以確保在任務(wù)展開/折疊時(shí)不會(huì)調(diào)用事件處理程序。否則，將創(chuàng)建一個(gè)無限循環(huán)，其中展開/折疊事件將在甘特圖和思維導(dǎo)圖中逐一調(diào)用。

最后，調(diào)用render()方法來呈現(xiàn)甘特圖中的變化。

• 步驟 4：甘特圖初始化

完成本教程還剩一步。您需要初始化甘特圖。所有初始化細(xì)節(jié)都在甘特圖文檔的此頁面上清楚地解釋。

因此，您應(yīng)該獲得用于管理項(xiàng)目工作流的工具組合，如本示例所示。

• 結(jié)論

 在管理包含多個(gè)相互關(guān)聯(lián)任務(wù)的復(fù)雜項(xiàng)目時(shí)，思維導(dǎo)圖等可視化工具可以很好地補(bǔ)充甘特圖。它為項(xiàng)目團(tuán)隊(duì)提供了更全面的視角，讓他們了解事情將如何展開，并根據(jù)需要做出調(diào)整。