JS 甘特图实现之Dhtmlx Gantt 扩展插件

在工程项目管理项目中常使用甘特图来实现工程进度管理，本次大概介绍一下一种甘特图JS插件--Dhtmlx Gantt

官网地址

基本使用

引入js、css文件，创建甘特图容器，加载数据，示例代码如下

 <!-- gantt 控件引入 -->
  <script src="./js/dhtmlxgantt.js"></script>
  <link rel="stylesheet" href="./css/dhtmlxgantt.css" />
​
<!-- gantt 容器 -->
 <div id="gantt_view" style="width: 100%; height: calc(100% - 60px)"></div>
​
 gantt.init('gantt_view')// 挂载容器
 gantt.parse(tasks)// 加载数据

常用api

扩展插件

// 激活插件
gantt.plugins({
      click_drag: true,// 高级拖放 
      auto_scheduling: true, // 自动调度 
      critical_path: true,// 关键路径
      drag_timeline: true,// 拖动时间线
      overlay: true, // 额外叠加
      export_api: true, // 在线导出
      fullscreen: true, // 全屏
      grouping: true,// 分组 
      keyboard_navigation: true,//辅助功能
      multiselect: true,//多任务选择
      quick_info: true, // 快速信息
      tooltip: true,// 工具提示
      undo: true,//撤消
      marker: true // 垂直标记
    })  

• 高级拖放

  0. 使用拖放创建任务
  1. 使用拖放设置计划外任务的时间
  2. 通过拖放选择任务
  3. 使用拖放功能创建部分拆分任务（专业版）

• 自动调度

  假设您有两个任务通过依赖关系链接连接，第二个任务在第一个任务结束时开始，您需要通过将第一个任务移动到新日期来更改它的日程安排

• 关键路径

  关键路径是一系列不能延迟的任务。否则，整个项目就会延期。 关键路径还决定了项目可以花费的最短时间

• 拖动时间线

• 额外叠加

  显示附加元素，如基线或截止日期标记，通常是通过创建一个可显示层并将自定义元素放置在那里（使用绝对定位将自定义元素放在相关任务旁边）来完成的。

• 在线导出

• 全屏

• 分组

  //多级分组
  一级
   二级
    内容1
    内容2
   二级2
    内容3
    内容4
  gantt.groupBy({
      relation_property: "priority",//二级属性key
      groups: [
          {key:0, label: "High"},// 一级
          {key:4, label: "Normal"},// 一级
          {key:5, label: "Low"},// 一级
          //multi level groups
          {key:1, label: "Give High Attention", "priority":0},// 二级 priority 二级属性key
          {key:2, label: "Resolve Immediately", "priority":0},// 二级
          {key:3, label: "Keep For Next Release", "priority":5}// 二级
      ],
      group_id: "key",
      group_text: "label"
  })
  

• 辅助功能

  为了让残障人士更轻松地访问 DHTMLX 甘特图并与之交互，该组件包含一组辅助功能.

• 多任务选择

  允许您一次选择多个任务。

• 快速信息

  gantt.templates.quick_info_content = function(start, end, task){ 
         return task.details || task.text;
  };
  gantt.templates.quick_info_date = function(start, end, task){
         return gantt.templates.task_time(start, end, task);
  };
  gantt.templates.quick_info_title = function(start, end, task){ 
         return ev.text.substr(0,50); 
  };
  

• 工具提示

  gantt.templates.tooltip_text = function(start,end,task){
      return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;
  };
  

• 撤消

  允许您撤消/重做所做的更改

• 垂直标记

  允许您标记（突出显示）特定日期或日期范围。

  var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
  var markerId = gantt.addMarker({  
      start_date: new Date(), 
      css: "today", 
      text: "Now", 
      title: dateToStr(new Date()) 
  });
  gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...} 获取
  gantt.deleteMarker(markerId);// 删除
  gantt.config.show_markers = false;// hides all  markers 隐藏
  gantt.getMarker(markerId).css = "today_new";// 更新
  gantt.updateMarker(markerId);// 更新
  gantt.renderMarkers();// 更新所有