dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

DHTMLX Gantt 7.1的發布引入了針對任務的特定日期的兼職資源分配，用于創建項目摘要的匯總Gantt元素，針對不同時間段的不同工作計劃，從UI和通過API調整特定網格行大小的功能，以及其他新穎性。

DHTMLX JavaScript Gantt圖表庫的新版本通過新的可視化功能為更加靈活和準確的項目管理做出了貢獻。深入研究發布細節或立即測試DHTMLX Gantt 7.1。

靈活的資源分配

V7.1可以兼職為任務分配資源。因此，管理者可以控制特定資源參與完成任務的日期，并組合多個資源以按不同的時間表執行一項共同的任務。此功能對于復雜項目的成功至關重要，并使資源分配過程更加精確和靈活。

{
    id: 5, text: "Interior office", type: "task", start_date: "03-04-2019 00:00",
    duration: 7, parent: "2", progress: 0.6, priority: 1,
    users: [{
        id: 5 
        resource_id: 3,
        value: 8,
        delay: 1   
    }    
    ]
}

除了這些屬性之外，您還可以設置分配的持續時間和計算模式。共有三種模式：default，fixedDuration和fixedDates。

在默認模式下，分配的開始和結束日期與任務的開始和結束日期相對應。該延遲屬性允許調度資源分配的開始的任務開始后的特定日期。

所述fixedDuration模式計算分配的以下相同邏輯在默認模式的開始日期。同時，任務的結束日期與任務的結束日期不一致，并且取決于任務的持續時間。

該fixedDates模式完全依賴于分配的開始和結束日期，不考慮延遲和持續性。

在下面的示例中，分配了三個資源以在不同的日期執行任務“內部辦公室”。資源ID等于3的資源具有默認的計算模式。任務開始后一天開始分配。id等于6的資源的資源分配是根據fixedDates模式計算的，從4月3日開始，到4月5日結束。最后，資源id等于7的資源分配以一天的延遲開始并根據fixedDuration模式持續兩天。

{
    id: 5, text: "Interior office", type: "task", start_date: "03-04-2019 00:00",
    duration: 7, parent: "2", progress: 0.6, priority: 1,
    users: [{
        resource_id: "3",
        value: 8,
        delay: 1     },
    {
        resource_id: "6",
        value: 3,
        start_date: "03-04-2019 00:00",
        end_date: "05-04-2019 00:00",
        mode: "fixedDates"     
    },
    {
        resource_id: "7",
        value: 3,
        delay: 1,
        duration: 2,
        mode: "fixedDuration"     
    }
    ]
}

該版本還提供了一系列用于通過API管理資源分配的方法。該getTaskAssignments方法允許獲得與數據存儲的所有其屬性特定任務的資源分配。該updateTaskAssignments方法使您能夠通過數據存儲API更新任務的資源分配。

匯總任務和里程碑

新版本的DHTMLX Gantt允許使用匯總任務和里程碑創建高級項目摘要。匯總的元素顯示在項目欄上，并提供項目進度的快速概述。此功能有助于跟蹤截止日期，而無需深入研究項目細節。

要使任務或里程碑匯總，您需要將所選項目的rollup屬性指定為true。此外，您可以使用hide_bar：true屬性在時間軸上隱藏甘特圖元素。因此，如果您將兩個屬性都應用到同一任務或里程碑，則該屬性將從時間軸中隱藏，但會顯示在其父項目中。

var data = {
    tasks:[
        {id:11, text:"Project #1", type:"project", progress: 0.6, open: true},
        {id:12, text:"Task #1", start_date:"03-04-2018", duration:"3",
            parent:"11", progress: 1},
        {id:13, text:"Task #2", start_date:"03-04-2018", type:"project", 
            parent:"11", progress: 0.5, open: true},
        {id:16, text:"Final milestone", start_date:"08-04-2018", type:"milestone",             
             rollup: true, hide_bar: true, parent:"11", progress: 0},         
        {id:17, text:"Task #2.1", start_date:"03-04-2018", duration:"2", 
            parent:"13", progress: 1},
        {id:18, text:"Task #2.2", start_date:"06-04-2018", duration:"1",   
            parent:"13", progress: 0.8}],  
    links:[]
};

為了涵蓋所有可能的工作時間表，我們添加了addCalendar方法的新customWeeks屬性：

var calendarId = gantt.addCalendar({
    id:"global", // optional
    worktime: {
        hours: ["8:00-17:00"],
        days: [ 1, 1, 1, 1, 1, 1 ,1],
        customWeeks: {
            winter: {
                from: new Date(2018, 11, 1), // December 1st, 2018
                to: new Date(2019, 2, 1), // March 1st 00:00, 2019
                hours: ["9:00-13:00", "14:00-16:00"],
                days: [ 1, 1, 1, 1, 0, 0, 0]
            }
        }
    },
});

該版本提供了從UI或通過API更改單獨行的高度的功能。因此，您可以調整所選行的大小，以實現甘特圖的所需外觀。

var tasks = {
    data:[
        { id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, 
            progress: 0.4, open: true, bar_height: "full", row_height: 50 }, 
        { id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, 
            progress: 0.6, parent: 1, bar_height: 25, row_height: 50 },
    ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getTaskBarHeight(1); // -> 45
gantt.getTaskBarHeight(2); // -> 25

gantt.config.resize_rows = true;

gantt.config.min_task_grid_row_height = 45;

渲染后使用甘特圖元素

如果需要在渲染后對網格單元格或任何DOM元素進行更改，或在Gantt元素中添加第三方小部件，則可以應用onrender回調。

這是將React組件與DHTMLX Gantt一起使用的示例：

蛋糕上的櫻桃就是彎曲的從頭到尾的鏈接的一個例子。

關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖

APS幫助提升企業生產效率，真正實現生產排程可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率