在應對數千個任務構成的大型項目時，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 在復雜項目場景下的可視化能力，更讓用戶的操作體驗更加流暢和直觀。

?? 了解更多 DHTMLX Gantt 產品詳情或申請試用，請

關于慧都科技：

慧都科技是一家行業數字化解決方案公司，長期專注于軟件、油氣與制造行業。公司基于深入的業務理解與管理洞察，以系統化的業務建模驅動技術落地，幫助企業實現智能化運營與長期競爭優勢。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。慧都科技DHTMLX在中國的官方授權代理商，提供DHTMLX系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的優秀Web應用程序框架。

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681