vue做甘特图，先大致介绍下核心功能： （1）横轴、纵轴拖拽； （2）自定义监听点击事件（双击、右键等）（3）任务之间显示父子层级关系；（4）左侧列表信息，右侧时间轴表示任务；（5）每个任务可以订制样式，并且可以动态修改样式；（6）自定义时间粒度显示（小时、天、星期、月、年）；（7）支持大批量数据渲染；（8） 支持同行多节点渲染；（9）支持选中，以及批量选中；（9）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图：
接下来会介绍用什么实现的，怎么使用，怎么添加拖拽、点击等各种功能，我以vue为例进行开发。
1、使用GSTC做甘特图开发
Git项目地址：https://github.com/neuronetio/gantt-schedule-timeline-calendar#weekendhighlight-plugin
官方vue实例：https://github.com/neuronetio/vue-gantt-schedule-timeline-calendar
npm指令： npm i gantt-schedule-timeline-calendar
官方做了 3 大主流框架的封装，具体看Git链接，这里我也附上了vue版本的 npm 包地址。
基本使用如下： ps:文章末尾我会贴一个完整的代码，如果是vue项目可以直接复制查看效果。下边这个是个极度阉割的。
<template>
<GSTC :config="config" />
</template>
<script>
import GSTC from "vue-gantt-schedule-timeline-calendar";
export default {
data(){
return {
config: {
height: 500,
list: {
rows: {
"1": { id: "1", order: '订单1', },
},
columns: {
data: {
id: { id: "id", data: "id", width: 50, header: { content: "序号" } },
}
}
},
chart: {
items: {
"1": { id: "1", rowId: "1", time: { start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000, end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000 } }
}
},
},
subs: []
}
},
beforeDestroy() { this.subs.forEach(unsub => unsub()); }
}
</script>
<style lang="less" scoped>
.wrapper .gantt-elastic__grid-line-time {
display: none;
}
</style>
基础使用已经贴代码了，不做赘述，不清楚的查看官方示例，接下来主要说核心功能如何配置，这方面官方描述的不是很清楚，但是Git的 issues 好多问题都关闭了，基本大部分问题都可以查到。
1、基础展示，左侧多列表格展示
这个主要配置config中的 list 属性，
rows 代表左侧表格的行属性，key值是每行的id，多个key就有多行，通常都以数字做key值， 内部 具体属性是列信息。比如 order label line 等都是列信息，这个会一一对应到指定列。
parentID 是父节点配置，一般配置了父节点，就会在 甘特图 中展示出父子层级来。
expanded 是展开属性，默认false，父子层级是合上的，折叠隐藏子节点。如果想默认展示需要每个节点都加上这个属性。
columns 代表左侧表格的列属性，key唯一就是列关键字。
data 属性，是列，可以有多个属性，每个代表一列
id 当前列的id
data 列标识，和rows中每行的数据的字段唯一对应，比如 order、line 等
isHTML 是否要展示HTML，默认false。 这个直接关系到content、html字段用哪个
width 当前列宽度
expander 是否显示层级，默认false不展示，设置为true，会展示出父子层级来，一般我们仅设置一列，当然设置多列也行。
header 配置表头内容的
content 表头想显示的内容
html 写HTML，用来订制表头样式的，内容就是HTML，行内css
percent 是左侧表格总宽度占甘特图的百分比，0就直接隐藏表格
minWidth：是左侧表格的最小宽度
list: {
rows: {
"1": {
id: "1",
order: '订单1',
label: "压缩机",
line: '线体1',
expanded: true
},
"3": {
id: "3",
order: '订单3',
label: "箱体",
line: '线体3',
parentId: '2',
}
},
columns: {
data: {
id: {
id: "id",
data: "id",
width: 50,
expander: true,
header: { content: "序号" }
},
order: {
id: "order",
data: "order",
header: { content: "生产订单" }
},
label: {
id: "label",
data: "label",
header: { content: "描述" }
}
}
}
}2、右侧任务排列显示（包括订制样式）
这个主要配置config中的 chart 属性，
time 配置时间轴
from 左侧开始时间，填写毫秒数
to 右侧结束时间，填写毫秒数
zoom 显示层级，10-22，越大，时间粒度展示的越大，越小，显示越精细，最小到5分钟
items 任务快配置，注意这个可以同行若干任务展示
id 当前任务的id
rowId 左侧表格 rows 的id，通过这个关联，渲染到某一行
label 当前任务的名称，会默认展示在任务中
time 任务的开始、结束时间
start 开始时间，填写毫秒数
end 结束时间， 填写毫秒数
style 订制样式，是个对象，写过jsx写法，写过react 、vue jsx 的应该都不默认，这里举个简单的例子，订制任务div的背景色 圆角等样式 { background: 'red', borderRadius: '3px' }
chart: {
time: {
from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
zoom: 22,
},
items: {
"1": {
id: "1",
rowId: "1",
label: "Item 1",
time: {
start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
},
style: { // 每个块的样式
background: 'blue'
}
},
"21": {
id: "21",
rowId: "2",
label: "Item 2-1",
time: {
start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
}
}
}
}3、配置右侧横轴的时间显示
这个主要配置config中的 locale 属性，时间的语言环境配置，这里看文档详细些，下面只详说2个属性，
weekdays 配置 每周显示的文案 主要是做国际化用的
months 配置月的，也是做国际化的
locale: {
name: "zh",
Now: "Now",
weekdays:["周日","周一","周二","周三","周四","周五","周六"],
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
}4、监听鼠标右击事件
这个主要配置config中的 actions 属性，他是对象，以下是他所有能监听dom，很多，这篇博客就只介绍人物块的事件监听，其他的不做一一赘述了
mainlistlist-columnlist-column-headerlist-column-header-resizerlist-column-header-resizer-dotslist-column-rowlist-column-row-expanderlist-column-row-expander-togglelist-togglechartchart-calendarchart-calendar-datechart-timelinechart-timeline-gridchart-timeline-grid-rowchart-timeline-grid-row-blockchart-timeline-itemschart-timeline-items-rowchart-timeline-items-row-item
这个监听函数会接收2个参数，element 和 data ，一个是dom，另一个是 任务节点的数据。根据官方要求，监听函数必须返回一个对象，此对象必须包含 update destroy 2个方法，分别是位置更新和销毁时需要执行的方法。具体写法请见如下代码：
actions: {
'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
}
methods:{
addListenClick(element, data) {
const onClick = (e) => {
e.preventDefault()
// console.log(data)
this.modal = {
visible: true,
title: data.item.label,
data
}
return false
}
element.addEventListener('contextmenu', onClick);
return {
update(element, newData) {
data = newData;
},
destroy(element, data) {
element.removeEventListener('click', onClick);
}
};
},
closeModal() {
this.modal = {
visible: false,
title: '',
data: {}
}
}
},5、任务的横轴、纵轴拖动
这个主要配置config中的 plugins 属性，
ItemMovement 插件，这个是官方开发的用来拖拽任务的插件。这个包的插件系统做的很好，官方提供了几种不错的插件，同时还支持其他的第三方插件，有兴趣的可以自己试试，这里先介绍拖拽插件，
moveable 拖拽的方向， x 支持横轴拖拽； y 支持纵轴拖拽； true 横轴、纵轴都可以拖拽； false 禁止拖拽
resizeable 是否可以拖拽，true开启拖拽
resizerContent 拖拽的图标，直接写HTML，可以自己定制拖拽图标的样式
collisionDetection: 拖拽过程中是否允许元素重叠， true 不允许重叠
ghostNode false 不展示重影节点
snapStart 拖拽开始时间点回调，这个比较机制特殊，拖拽位置的时候触发这个方法，参数接收开始时间 时间变化 当前节点数据，默认是毫秒级的刷新，会卡，我们做if判断1小时拖拽
snapEnd 拖拽结束时间点回调，这个是拖动任务块大小时触发，接收结束时间 时间段。用法同上。具体请看如下代码：
plugins: [
// 拖动 x 横向， y 纵向
ItemMovement({
moveable: 'x',
resizerContent: '<div class="resizer">-></div>',
ghostNode: false,
snapStart(time, diff, item) {
if(Math.abs(diff) > 14400000) {
return time + diff
}
return time
},
snapEnd(time, diff, item) {
if(Math.abs(diff) > 14400000) {
return time + diff
}
return time
}
})
]
6、选中任务
这个主要配置config中的 plugins 属性，
Selection插件，单个选中、批量选中插件。
grid 能否选中单元格
items 能否选中任务
rows 能否选中行
rectStyle 矩形样式
selected 选中的回调
deselected 取消选中的回调
canSelected 可选中的的回调，用来过滤哪些可以选中
canDeselected 可取消选中的回调，用来过滤哪些可以取消选中
plugins: [
Selection({
items: false,
rows: false,
grid: true,
rectStyle: { opacity: '0.0' },
canSelect(type, currentlySelecting) {
if (type === 'chart-timeline-grid-row-block') {
return currentlySelecting.filter(selected => {
if (!selected.row.canSelect) return false;
for (const item of selected.row._internal.items) {
if (
(item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
(item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
(item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
) {
return false;
}
}
return true;
});
}
return currentlySelecting;
},
canDeselect(type, currently, all) {
if (type === 'chart-timeline-grid-row-blocks') {
return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
}
return [];
}
})
]
小结：
以上就是整个甘特图的使用了，这是我用过最符合项目需求的甘特图，他的开发团队也在持续的维护这个项目，很赞。
最后贴一段完整的 vue 示例代码：
<template>
<div class="wrapper">
<GSTC :config="config" />
<infor-modal
:visible="modal.visible"
:title="modal.title"
:dataSource="modal.data"
@handleModal="closeModal"
/>
</div>
</template> <script>
import GSTC from "vue-gantt-schedule-timeline-calendar";
import ItemMovement from "gantt-schedule-timeline-calendar/dist/ItemMovement.plugin.js"
import Selection from "gantt-schedule-timeline-calendar/dist/Selection.plugin.js"
import inforModal from "./inforModal" export default {
components:{
GSTC,
inforModal
},
props:{},
data(){
return {
config: {
height: 500,
list: {
// 行属性
rows: {
"1": {
id: "1",
order: '订单1',
label: "压缩机",
line: '线体1',
expanded: true
},
"3": {
id: "3",
order: '订单3',
label: "箱体",
line: '线体3',
parentId: '2',
},
"4": {
id: "4",
order: '订单4',
label: "空调总装",
line: '线体4',
},
"2": {
id: "2",
order: '订单2',
label: "门体",
parentId: '1',
line: '线体2',
expanded: true
},
"5": {
id: "5",
order: '订单5',
label: "冰箱总装",
line: '线体5',
},
"6": {
id: "6",
order: '订单6',
label: "洗衣机总装",
line: '线体6',
},
},
// 列定义
columns: {
data: {
id: {
id: "id",
data: "id",
width: 50,
header: {
content: "序号"
}
},
order: {
id: "order",
data: "order",
width: 120,
header: {
content: "生产订单"
}
},
label: {
id: "label",
data: "label",
width: 120,
expander: true,
header: {
content: "描述"
}
},
line: {
id: "line",
data: "line",
width: 120,
header: {
content: "线体"
}
},
}
}
},
chart: {
time: { // 时间轴开始截至，
from: new Date().getTime() - 2 * 24 * 60 * 60 * 1000,
to: new Date().getTime() + 8 * 24 * 60 * 60 * 1000,
zoom: 22, // 10-22 缩放，默认 Shift + 滚轮， 默认缩放展示时间粒度， 一共有 小时、天、周、月、年
},
items: {
"1": {
id: "1",
rowId: "1",
label: "Item 1",
time: {
start: new Date().getTime() + 1 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 2 * 24 * 60 * 60 * 1000
},
style: { // 每个块的样式
background: 'blue'
}
},
"21": {
id: "21",
rowId: "2",
label: "Item 2-1",
time: {
start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 3 * 24 * 60 * 60 * 1000
}
},
"22": {
id: "22",
rowId: "2",
label: "Item 2-2",
time: {
start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 4 * 24 * 60 * 60 * 1000
}
},
"3": {
id: "3",
rowId: "3",
label: "Item 3",
time: {
start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
}
},
"4": {
id: "4",
rowId: "4",
label: "Item 4",
time: {
start: new Date().getTime() + 2 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
}
},
"5": {
id: "5",
rowId: "5",
label: "Item 5",
time: {
start: new Date().getTime() + 3 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 5 * 24 * 60 * 60 * 1000
}
},
"6": {
id: "6",
rowId: "6",
label: "Item 6",
time: {
start: new Date().getTime() + 5 * 24 * 60 * 60 * 1000,
end: new Date().getTime() + 6 * 24 * 60 * 60 * 1000
}
},
}
},
locale: {
name: "zh",
Now: "Now",
weekdays:["周日","周一","周二","周三","周四","周五","周六"],
months:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
},
actions: {
'chart-timeline-items-row-item': [this.addListenClick] // 监听右击事件
},
plugins: [
// 拖动 x 横向， y 纵向
ItemMovement({
moveable: 'x',
resizerContent: '<div class="resizer">-></div>',
ghostNode: false,
collisionDetection: false,
snapStart(time, diff, item) {
if(Math.abs(diff) > 14400000) {
return time + diff
}
return time
},
snapEnd(time, diff, item) {
if(Math.abs(diff) > 14400000) {
return time + diff
}
return time
}
}),
Selection({
items: false,
rows: false,
grid: true,
rectStyle: { opacity: '0.0' },
canSelect(type, currentlySelecting) {
if (type === 'chart-timeline-grid-row-block') {
return currentlySelecting.filter(selected => {
if (!selected.row.canSelect) return false;
for (const item of selected.row._internal.items) {
if (
(item.time.start >= selected.time.leftGlobal && item.time.start <= selected.time.rightGlobal) ||
(item.time.end >= selected.time.leftGlobal && item.time.end <= selected.time.rightGlobal) ||
(item.time.start <= selected.time.leftGlobal && item.time.end >= selected.time.rightGlobal)
) {
return false;
}
}
return true;
});
}
return currentlySelecting;
},
canDeselect(type, currently, all) {
if (type === 'chart-timeline-grid-row-blocks') {
return all.selecting['chart-timeline-grid-row-blocks'].length ? [] : currently;
}
return [];
}
})
]
},
modal: {
visible: false,
title: '',
data: {}
},
subs: []
}
},
watch:{},
computed:{},
methods:{
addListenClick(element, data) {
const onClick = (e) => {
e.preventDefault()
// console.log(data)
this.modal = {
visible: true,
title: data.item.label,
data
}
return false
}
element.addEventListener('contextmenu', onClick);
return {
update(element, newData) {
data = newData;
},
destroy(element, data) {
element.removeEventListener('click', onClick);
}
};
},
closeModal() {
this.modal = {
visible: false,
title: '',
data: {}
}
}
},
created(){},
mounted(){
},
beforeDestroy() {
this.subs.forEach(unsub => unsub());
}
}
</script>
<style lang="less" scoped>
.wrapper .gantt-elastic__grid-line-time {
display: none;
}
</style>