在應對數千個任務構成的大型項目時，DHTMLX Gantt?以其卓越的性能表現和流暢渲染能力廣受歡迎。然而，在實際使用中，終端用戶往往需要快速定位到時間線中的特定位置，這在面對龐雜任務結構時尤為困難。為此，DHTMLX 提供了一個實用的解決方案——迷你地圖（Mini Map），幫助用戶輕松導航、快速定位。

DHTMLX Gantt 試用下載

本文將詳細講解如何借助?DHTMLX Gantt?的 API 與原生 JavaScript，為甘特圖添加一套可交互的小地圖功能，并提供完整的開發指南和示例演示。

---

? 為什么要為甘特圖添加迷你地圖？

在管理大型項目時，甘特圖往往具有復雜的任務層級與延展的時間線。此時，如果缺乏高效的導航工具，用戶極易迷失在任務叢林中。迷你地圖的加入相當于為主圖提供一份鳥瞰視圖，它可在一個小型面板中呈現整個項目結構，用戶只需點擊迷你地圖中的某一區域，即可快速跳轉至主甘特圖對應部分，極大地提升了操作便捷性。

---

🛠 分步開發指南：如何在 DHTMLX Gantt 中實現迷你地圖

實現思路非常清晰：通過創建一個第二個同步的甘特圖實例作為“迷你地圖”，并配合縮放與視口功能進行導航。

1. 小地圖的顯示與隱藏切換

借助toggleMinimap()函數控制迷你地圖的開啟與銷毀：

function toggleMinimap() {if (miniGantt) {miniGantt.destructor();miniGantt = null;let oldMinimapContainer = document.querySelector("#minimap");if (oldMinimapContainer) {oldMinimapContainer.parentNode.removeChild(oldMinimapContainer)}}else {addMiniMap()}
}

---

2. 創建并配置迷你地圖實例

在addMiniMap()中，初始化一個新的甘特圖實例，并設置以下配置以適應縮略顯示：

function addMiniMap() {miniGantt = Gantt.getGanttInstance();miniGantt.config.show_task_cells = false;miniGantt.config.readonly = true;miniGantt.config.drag_progress = false;miniGantt.config.show_links = false;miniGantt.config.row_height = 1;miniGantt.config.min_column_width = 2;miniGantt.config.scale_height = 0;

這些配置將最大限度壓縮顯示區域，并禁止交互編輯，專注導航功能。

---

3. 設置布局與工具提示

為小地圖定義簡化布局，并啟用任務信息提示：

miniGantt.config.layout = {css: "gantt_container",rows: [{cols: [{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },{ view: "scrollbar", id: "scrollVer" }]},{ view: "scrollbar", id: "scrollHor" }]
};miniGantt.plugins({ tooltip: true });

---

4. 自適應時間刻度（Zoom-to-Fit）

考慮到小地圖需要同時展示完整時間跨度，推薦使用 Zoom-to-Fit 自動縮放策略：

const zoomConfig = {levels: [{ name: "day", scales: [{ unit: "day", step: 1, format: "%d %M" }] },{ name: "week", scales: [{ unit: "week", format: "Week #%W" }] },{ name: "month", scales: [{ unit: "month", step: 1, format: "%M" }] },{ name: "year", scales: [{ unit: "year", step: 1, format: "%Y" }] }],element: () => miniGantt.$root.querySelector(".gantt_task")
};

在加載任務數據后，調用zoomToFit()動態選取合適的縮放級別并應用：

miniGantt.ext.zoom.init(zoomConfig);
miniGantt.ext.zoom.setLevel("fit");

---

5. 創建小地圖容器并初始化渲染

const container = document.createElement("div");
container.id = "minimap";
document.body.appendChild(container);miniGantt.init("minimap");
miniGantt.$container.parentNode.draggable = false;

---

6. 加載主圖數據至小地圖，并動態調整任務高度

const data = gantt.serialize();
miniGantt.parse(JSON.stringify(data));const minimalRowSize = miniGantt.$container.offsetHeight / miniGantt.getTaskCount();
miniGantt.config.bar_height = miniGantt.config.row_height = Math.max(Math.floor(minimalRowSize), 1);

---

7. 添加可視化“視口”視窗，實現交互定位

視窗顯示當前主圖可視區域，并允許點擊拖動實現跳轉：

const minimapDrag = document.createElement("div");
minimapDrag.className = "minimap_drag";
minimapDrag.draggable = false;minimapDrag.style.left = "0px";
minimapDrag.style.width = Math.max((gantt.$task.offsetWidth / gantt.$task.scrollWidth * miniGantt.$task.offsetWidth), 20) + "px";
minimapDrag.style.top = "0px";
minimapDrag.style.height = Math.max((gantt.$task.offsetHeight / gantt.$task_bg.scrollHeight * miniGantt.$task.offsetHeight), 20) + "px";miniGantt.$container.appendChild(minimapDrag);

---

? 效果演示：小地圖帶來的優勢一目了然

• 鳥瞰全局：快速預覽整個項目任務布局；

• 交互跳轉：點擊定位目標任務區域；

• 提升用戶體驗：減少滾動與查找時間，助力高效項目管理。

---

結語

迷你地圖的加入，不僅大幅提升了?DHTMLX Gantt?在復雜項目場景下的可視化能力，更讓用戶的操作體驗更加流暢和直觀。