JavaScript甘特图 dhtmlx-gantt
背景
需求是在后台中，需要用甘特图去展示管理任务相关视图，并且不用依赖vue，兼容JavaScript原生开发。最终使用dhtmlx-gantt，一个半开源的库，基础功能免费，更多功能付费。
甘特图需求如图：
调研对比不同的库可参考：https://juejin.cn/post/7337114587122597900?searchId=20241220110156B288C2A4E8F21C0FB170
功能分析
- 基础元素：左侧任务树 & 右侧图例任务 Progress
- 新增任务
- 删除任务
- 编辑任务
Gantt 的 NPM地址 docs.dhtmlx.com
官网 Gannt
优点： 功能丰富，支持多种视图和自定义样式，适合构建复杂的项目甘特图。
缺点： 库比较重，半开源，不支持后续定制开发
开发 Demo
1. 安装
npm i dhtmlx-gantt
2. 组件导入
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { gantt } from 'dhtmlx-gantt'; // 核心模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; // 样式模块
....
</script>
3. 准备引入DOM
<template>
<div class="gantt-no" ref="ganttRef"></div>
</template>
<script>
setup() {
const ganttRef = ref<HTMLElement | null>(null);
...
return {
ganttRef
}
}
</script>
4. 准备 MOCK 数据
const tasks = {
data: [
{ id: 1, text: '任务 1', start_date: '2021-10-17', duration: 3, progress: 0.6 },
{ id: 2, text: '任务 2', start_date: '2021-10-20', duration: 10, progress: 0.4 }
],
links: []
}
参数简析：
整体数据是以对象的形式存放，其中的data是一个 Task[]，links是任务连线，其结构是 Link[]
单个 Task 可能包含以下的字段：
- id: 任务唯一标识
- text: 任务名称
- start_date: 任务开始时间
- duration: 任务时长
- progress: 任务进度
- parent: 父级的ID(树结构关系)
- … 其他参数要查阅其官方文档
单个 Link 可能包含：
- id: 连线的唯一标识
- source: 源节点
- target: 目标节点
- type: 连线类型（0|1|2）标识是否有箭头
5. 初始化以及传入 tasks
onMounted((0 => {
if (ganttRef.value) {
gantt.init(ganttRef.value); // 初始化 DOM
gantt.parse(tasks); // 传入 tasks
}
})
6. 配置图例参数
- 禁用连线 （本需求是不需要连线功能的）
gantt.config.show_links = false;
- 禁用工作进度拖拽 （必须通过界面弹窗的方式进行修改信息）
gantt.config.drag_progress = false;
- 设置任务分段参数以及单位
gantt.config.duration_unit = 'day';
gantt.config.duration_step = 1;
- 配置左侧表格栏目
gantt.config.columns = [
{
name: 'text',
label: '任务名称',
tree: true,
width: '*',
align: 'left',
template: function (obj: any) {
return obj.text;
}
},
{
name: 'start_date',
label: '时间',
width: '*',
align: 'center',
template: function (obj: any) {
return obj.start_date;
}
},
{
name: 'progress',
label: '进度',
width: '*',
align: 'center',
template: function (obj: any) {
return `${obj.progress * 100}%`;
}
}
];
参数简析： **ColumsItem[]**
1. name: 'text' [String] , 索取的 tasks 里 **Task[]** 的 Task 的属性
2. label: 'xxx' [String], 当前栏显示的文本
3. tree: true [Boolean]，当前的任务是否为树结构这样
4. align: [String: left|right|center]，label文本位置属性
5. template: [Function]，函数类型，入参是 obj，即为当前的 Task 对象
6. ... 其他参数要查阅文档
- 配置右侧表头日期栏
gantt.config.xml_date = '%Y-%m-%d'; // 日期格式化的匹配格式
gantt.config.scale_height = 90; // 日期栏的高度
const weekScaleTemplate = function (date: any) {
const mouthMap: { [key: string]: string } = {
Jan: '一月',
Feb: '二月',
Mar: '三月',
Apr: '四月',
May: '五月',
Jun: '六月',
Jul: '七月',
Aug: '八月',
Sept: '九月',
Oct: '十月',
Nov: '十一月',
Dec: '十二月'
};
// 可以时使用dayjs 处理返回
const dateToStr = gantt.date.date_to_str('%d');
const mToStr = gantt.date.date_to_str('%M');
const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
// 处理一下月份
return `${dateToStr(date)} 号 - ${dateToStr(endDate)} 号 (${
mouthMap[mToStr(date) as string]
})`;
};
const dayFormat = function (date: any) {
const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return weeks[Dayjs(date).day()];
};
gantt.config.scales = [
{ unit: 'year', step: 1, format: '%Y' },
{ unit: 'week', step: 1, format: weekScaleTemplate },
{ unit: 'day', step: 1, format: dayFormat }
];
- 添加今日的 Marker Line
gantt.plugins({
marker: true
});
gantt.addMarker({
start_date: new Date(),
text: '今日'
});
任务菜单以及事件
- 右键菜单功能
// menu.vue
<template>
<div class="menu" :style="{ left: x + 'px', top: y + 'px' }">
<el-menu
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#fff"
>
<el-menu-item index="add">新增任务</el-menu-item>
<el-menu-item index="edit">编辑任务</el-menu-item>
<el-menu-item index="del">删除任务</el-menu-item>
</el-menu>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
x: {
type: Number,
default: 0
},
y: {
type: Number,
default: 0
}
},
emits: ['menu-item'],
setup(props, ctx) {
const handleSelect = (action: string) => {
ctx.emit('menu-item', action);
};
return {
handleSelect
};
}
});
</script>
<style lang="less" scoped>
.menu {
position: fixed;
transition: all 1s ease;
::v-deep(.el-menu-item) {
height: 40px;
line-height: 40px;
width: 200px;
}
}
</style>
// Gantt.vue
<template>
<transition name="el-fade-in-linear">
<Menu :x="menuX" :y="menuY" v-show="menuVisible" @menu-item="handleItemClick" />
</transition>
</template>
<script lang="ts">
const menuVisible = ref<boolean>(false); // 控制菜单显示
const menuX = ref<number>(0); // left
const menuY = ref<number>(0); // top
const handleItemClick = (item: any) => {
menuVisible.value = false; // 隐藏菜单
dialogVisible.value = true; // 显示编辑弹窗
};
gantt.attachEvent(
'onContextMenu',
function (taskId, linkId, event) {
var x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
// 判断要是在树上的右键菜单才有效果
if (taskId && event.target.className === 'gantt_tree_content') {
console.log('task ContentMenu', taskId, linkId, event);
menuX.value = x;
menuY.value = y;
menuVisible.value = true;
}
if (taskId || linkId) {
return false;
}
return true;
},
{}
);
// 取消菜单显示
gantt.attachEvent(
'onEmptyClick',
function (e) {
//any custom logic here
menuVisible.value = false;
},
{}
);
</script>
效果
- 其他事件 (禁用原来自带的弹窗)
gantt.attachEvent(
'onBeforeLightbox',
function (id) {
console.log(1);
return false; // 返回 false
},
{}
);
- 任务双击进入编辑事件
gantt.attachEvent(
'onTaskDblClick',
function (id, e) {
console.log('id', id, e);
dialogVisible.value = true;
return false;
},
{}
);
总结
- 具体代码，只处于一个 Dome 级别
- 至于npm源码方面，开源出来的功能从其官网看还是基本满足需求
- 库的稳定和功能升级方面，每周下载还是处于活跃的状态
- 官网Base是英文的，然后 Samples 样库例提供了很多功能的案例，需要发掘