dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

该库提供了grouping.js扩展名，该扩展名使您可以按任务的任何属性对任务进行分组。

要开始使用扩展，请使用gantt.plugins方法启用它。

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({
        grouping: true
    });
    //your code will be here
</body>
</html>

分组任务

要按某种标准对任务进行分组，请使用groupBy方法：

var data =  {
    tasks:[{id:1, priority:1, start_date:"02-04-2020 00:00", ...}, ...] 
};
 
gantt.groupBy({
    relation_property: "priority",
    groups: [{key:1, label: "High"},{key:2, label: "Normal"},{key:3, label: "Low"}],
    group_id: "key",
    group_text: "label"
});

where：

• lationship_property-（必需的）将用于对项目进行分组的任务对象的属性。例如：

var data =  {
    tasks:[{id:1, priority:1, start_date:"02-04-2020 00:00", ...}, ...] 
};
gantt.groupBy({
    relation_property: "priority", 
    ...
});

该属性还可以用于组织多级结构中的组：

gantt.groupBy({
    relation_property: "priority",
    groups: [
        {key:0, label: "High"},
        {key:4, label: "Normal"},
        {key:5, label: "Low"},
        //multi level groups
        {key:1, label: "Give High Attention", "priority":0},
        {key:2, label: "Resolve Immediately", "priority":0},
        {key:3, label: "Keep For Next Release", "priority":5}
    ],
    group_id: "key",
    group_text: "label"
});

• groups-（必填）groups（摘要）项的数组。

gantt.groupBy({
    groups: [
        {key:1, label: "High"}, 
        {key:2, label: "Normal"},
        {key:3, label: "Low"}
    ],
    group_id: "key",
    group_text: "label"
});

请注意：

1.每个“组”对象必须至少包含2个属性（但可以包含任意数量的附加属性）：id和文本描述（分别由“ group_id”，“ group_text”参数指定）。

2.将组项目作为启用了“项目”类型和“只读”属性的项目添加到数据集中。可以通过'$ virtual'属性检测到它们，并将其作为常规数据项处理：

gantt.templates.task_class=function(start, end, task){
    if(task.$virtual)
    return "summary-bar";
};

3.原始数据集中的“项目”任务不会以分组模式显示，但是可以通过API使用。

• group_id-（可选）组的ID。默认值-'key'。
• group_text-（可选）组的标签。默认值-'label'。
• 定界符-（可选）定界符用于为具有多个资源的任务自动创建组。“，“ 默认情况下。

取消分组任务

要重置分组，请调用groupBy方法并传递false作为参数：

重置当前分组

gantt.groupBy(false);

使用集合指定组

通常，组被页面上的多个元素使用，为避免重复，您可以将组显示为命名集合。

gantt.serverList("priority", [
    {key:1, label: "High"},
    {key:2, label: "Normal"},
    {key:3, label: "Low"}
]);
gantt.groupBy({
    groups: gantt.serverList("priority"),
    relation_property: "priority",
    group_id: "key",
    group_text: "label"
});