甘特图的调研以及 dhtmlxGantt 的使用

1,553 阅读1分钟

新入职公司,就要接手甘特图的需求。压力很大,不过有压力才有动力,每一次都要尝试,如果害怕未接触的领域/东西,那永远也学不会。

背景

公司所用的禅道甘特图问题:

  • 展示当前迭代的甘特图,没法看所有需求的
  • 脏数据较多,影响观看
  • 没有筛选过滤功能,如根据人员、开始结束日期过滤
  • 不够美观

所以需要根据数据展示自己的甘特图。

组件

通过和产品、后端同事讨论,前端有较大发挥的空间,没有详细的产品原型,全看前端能实现到什么程度,所以我大概画了个原型图,决定先调研一下已有的第三方库。首先是同事已提供的 gantt-schedule-timeline-calendar,因为技术栈准备用 react,就 react gantt github 一顿搜索。

gantt-schedule-timeline-calendar 有版权问题,加上 API 有点复杂,暂不考虑;

重点研究 dhtmlxGantt。看 dhtmlxGantt 的过程中,又发现了 @dhtmlx/trial-vue-gantt:

docs.dhtmlx.com/gantt/web__…

这是和 dhtmlxGantt 不同的一个组件,在使用的过程中,发现不容易调试,而且文档不多,最终放弃。

这是我参考的 GitHub 仓库:

还有 @dhtmlx/trial-vue-gantt 的 basic 使用:

dhtmlxGantt 本身文档详尽:docs.dhtmlx.com/gantt/index…

功能齐全:

三方库 OR 自研

Gantt 基本配置