DHTMLX Gantt发布7.1版本：兼职资源分配，汇总任务以及更多其他内容

DHTMLX Gantt 7.1的发布引入了针对任务的特定日期的兼职资源分配，用于创建项目摘要的汇总Gantt元素，针对不同时间段的不同工作计划，从UI和通过API调整特定网格行大小的功能，以及其他新颖性。

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    }     ]}

在这里，我们添加了以下可选参数：资源分配的ID（5）和从任务开始到分配开始的一天的延迟。该延迟值有助于计算分配的开始日期，而无需手动设置它的必要性。您仍然可以手动指定资源分配的开始和结束日期。该ID参数用于通过API从数据存储的分配对象的详细信息。

除了这些属性之外，您还可以设置分配的持续时间和计算模式。共有三种模式：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"    }    ]}

从v7.1开始，默认情况下通过process_resource_assignments属性启用了将资源分配给任务的特定日期的功能。但是，如果由于某种原因您不需要兼职分配资源，则可以将此属性指定为false以禁用此功能。

该版本还提供了一系列用于通过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); // -> 45gantt.getTaskBarHeight(2); // -> 25

为了允许用户通过拖放来更改行的高度，您需要将resize_rows配置选项设置为true：

gantt.config.resize_rows = true;

另外，您可以通过min_task_grid_row_height配置选项控制要调整大小的最小行高度：

gantt.config.min_task_grid_row_height = 45;

要控制DHTMLX Gantt在用户更改行高时的行为，可以使用新事件：onBeforeRowResize，onRowResize，onBeforeRowResizeEnd，onAfterRowResize。

渲染后使用甘特图元素

如果需要在渲染后对网格单元格或任何DOM元素进行更改，或在Gantt元素中添加第三方小部件，则可以应用onrender回调。

这是将React组件与DHTMLX Gantt一起使用的示例：

蛋糕上的樱桃就是弯曲的从头到尾的链接的一个例子。

关产品推荐：

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

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

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

phGantt Time Package：对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率，真正实现生产排程可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解APS系统请点击【咨询在线客服】
标签：

来源：慧都