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

DHTMLX Gantt 試用下載 

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

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

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

?? 分步開發(fā)指南：如何在 DHTMLX Gantt 中實(shí)現(xiàn)迷你地圖

實(shí)現(xiàn)思路非常清晰：通過創(chuàng)建一個第二個同步的甘特圖實(shí)例作為“迷你地圖”，并配合縮放與視口功能進(jìn)行導(dǎo)航。

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

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

	
	

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

2. 創(chuàng)建并配置迷你地圖實(shí)例

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

	
	

		
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;
	

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

3. 設(shè)置布局與工具提示

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

	
	

		
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. 自適應(yīng)時間刻度（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")
};
	

在加載任務(wù)數(shù)據(jù)后，調(diào)用zoomToFit()動態(tài)選取合適的縮放級別并應(yīng)用：

	
	

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

5. 創(chuàng)建小地圖容器并初始化渲染

	
	

		
const container = document.createElement("div");
container.id = "minimap";
document.body.appendChild(container);

miniGantt.init("minimap");
miniGantt.$container.parentNode.draggable = false;
	

6. 加載主圖數(shù)據(jù)至小地圖，并動態(tài)調(diào)整任務(wù)高度

	
	

		
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. 添加可視化“視口”視窗，實(shí)現(xiàn)交互定位

視窗顯示當(dāng)前主圖可視區(qū)域，并允許點(diǎn)擊拖動實(shí)現(xiàn)跳轉(zhuǎn)：

	
	

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

? 效果演示：小地圖帶來的優(yōu)勢一目了然

• 鳥瞰全局：快速預(yù)覽整個項(xiàng)目任務(wù)布局；

• 交互跳轉(zhuǎn)：點(diǎn)擊定位目標(biāo)任務(wù)區(qū)域；

• 提升用戶體驗(yàn)：減少滾動與查找時間，助力高效項(xiàng)目管理。

結(jié)語

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

?? 了解更多 DHTMLX Gantt 產(chǎn)品詳情或申請試用，請

關(guān)于慧都科技：

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

下載|體驗(yàn)更多DHTMLX，請咨詢，或撥打產(chǎn)品熱線：023-68661681