DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖，通過自動布局和實時編輯器，它可以更容易地將復雜數據可視化到一個整潔的層次結構中。

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

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

在甘特圖等 PM 工具中使用思維導圖的好處

使用 DHTMLX 構建的甘特圖可用于高效管理各種復雜的工作流程。在具有復雜任務層次結構和依賴關系的項目中，思維導圖等可視化工具可以方便最終用戶簡化項目規劃及其執行進度。借助思維導圖，可以更輕松地全面了解任務的整體結構、檢測潛在瓶頸并改進工作流程。

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

需要注意的是，圖表組件只允許一個根元素，而甘特圖可以有多個根元素（任務）。因此，在我們的示例中，當甘特圖在根級別只有一個任務時，它將是思維導圖中的根元素。如果甘特圖的根級別有更多任務，思維導圖將補充一個附加元素，該元素將合并根級別的所有元素。

現在，我們可以按照分步說明幫助您在場景中實現類似的集成。

DHTMLX Gantt 與思維導圖集成指南

• 步驟 1：初始化圖表

我們先初始化JavaScript圖表組件。它應該在思維導圖容器中初始化。您應該在類型參數中設置“mindmap”以獲取此類型的圖表。

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

• 步驟 2：同步數據變更

要同步更改，您需要刪除當前圖表數據并加載新數據。由于有多個任務，您需要將它們全部包含在數組中，然后添加事件處理程序，在其中調用負責同步更改的syncData函數。

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

在syncData函數中，需要刪除現有的數據。

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

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

const mindData = gantt.serialize().data;

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

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

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

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

如果變量不為空，則表示有多個根任務。您應該修改當前任務的父參數以及存儲在firstRootParent變量中的參數。

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

Gantt 允許id和parent參數中的值為字符串或數字類型，但 Diagram 僅需要字符串。因此，您應該將這些參數轉換為字符串類型。

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

需要注意的是， Diagram 中的type參數設置了元素的形狀。如果此參數中已經指定了某些內容，則元素將具有矩形形狀。為了節省空間并使所有元素看起來更緊湊，您需要刪除 type參數。

delete task.type;

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

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

• 步驟 3：同步兩個組件的打開和關閉狀態

下一步是將數據加載到圖表中并運行syncOpenState函數。

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

在這個函數中，你遍歷所有的甘特圖任務。如果任務的層次結構是展開的，你調用Diagram 組件的expandItem()方法來展開思維導圖中的分支。如果任務的層次結構是折疊的，你調用collapseItem()方法。

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

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

思維導圖中的根任務在左右兩側都有子任務。因此，在擴展思維導圖中的分支時，您需要知道應該從哪一側開始。您需要為expandItem()方法指定兩側。

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

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

當思維導圖中的任務展開和折疊時，您可能希望將這些變化與甘特圖同步。為此，您需要添加以下代碼：

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

需要更改任務的$open屬性。此屬性顯示任務的展開狀態。最好在靜默函數內執行此操作，以確保在任務展開/折疊時不會調用事件處理程序。否則，將創建一個無限循環，其中展開/折疊事件將在甘特圖和思維導圖中逐一調用。

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

• 步驟 4：甘特圖初始化

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

因此，您應該獲得用于管理項目工作流的工具組合，如本示例所示。

• 結論

 在管理包含多個相互關聯任務的復雜項目時，思維導圖等可視化工具可以很好地補充甘特圖。它為項目團隊提供了更全面的視角，讓他們了解事情將如何展開，并根據需要做出調整。