甘特图jsgantt-improved使用

一、前言

甘特图是一种项目管理工具，以图形直观的方式显示项目的时间轴和任务计划，为了可扩展和定制相关任务的开发，可以选择 dhtmlx-gantt 和 jsgantt-improved

dhtmlx-gantt

jsgantt-improved

jsgantt-improved-custom

二、具体实现

目前以为 jsgantt-improved为例 实现横道图效果

jsgantt-improved中文教程blog.csdn.net/DirectorChe…

控制深颜色的绘制 'pPlanStart': 'pPlanEnd':

表格展示内容 'planStart'： 'planEnd':

也就是说表格绘制和甘特图的绘制控制属性是分开的。

像大多的图形库一样 new 出实例 挂载DOM ，配置对象，绑定数据，绘制图形

 const g = new JSGantt.GanttChart(
    document.getElementById('GanttChartDIV'),
    'month'
  )
  
  g.setOptions（{}）
  g.AddTaskItemObject(d)

jsgantt-improved的样式相对的还是比较丑的需要自己手动调整一下

jsgantt-improved是通过div进行绘制的，可以通过class去修改样式

气泡为例

jsgantt-improved-custom 在 jsgantt-improved的基础上修改了一下样式，添加了自定义的气泡的功能。 借助pCaption属性传递需要绘制的内容绑定后端数据