前言:
1.代码是用手机敲的,可能会存在1.2处写错的情况,还望见谅
2.实现标题的基本api都是有的,每行API我都写了对应功能注释在头上。
3.可以在csdn上下载一些dhtmlx-gantt的文档和demo来先看一看,再结合下面的api使用,效果更佳(csdn上大多是4.0左右版本,理论上也可以使用)

1.引用甘特图:
impot gantt from “dhtmlx-gantt”
这里引用7.0.7版本本,dhtmlxgantt.css也注意引入

2.在mounted里面initGanttConfig()〈初始化配置数据〉和getGanttData()〈放入数据〉

3.initGanttConfig为:
{
let _this=this;
_this.config.columns=[ //配置左侧树
{name:“mc”,label:“名称”,tree:true,width:150},
{name:“age”,label:“年龄”}
],
//渲染右侧条的进度
gantt.template.process_text=function(start,end,Task){
return “” //返回html字符串
}
//是否只读,不要条上的拉动操作
gantt.config.readyonly=true
//条的高度
gantt.task_height=20
//行的高度
gantt.row_height=60
//使用中文
gantt.i18n.setLocale(“cn”)
//右侧条中间元素显示
gantt.template.task_text=function(start,end,task){
return task.jhmc
}
//鼠标移动上去的文字显示
gantt.template.tooltip_text=function(start,end,task){
return “” //你想渲染的节点样式
}
//左侧table的宽度
gantt.config.grid_width=450
//右侧时间跨服的调整
gantt.config.scales=[{
unit:“day”,step:1,format:“%j日”
},{unit:“hour”,step:12,format:function(date){return ${moment(date).format("HH")}时}}]
//初始化
gantt.init(this.ref.gantt)
//点击事件
gantt.attachEvent(“onTaskSelected”,id=>{
this.ganttSelected=id
})

最核心的代码,增加第二根条的样式,在7.0版本会报错,需要在源码里面注释掉delete addTaskLayer这行代码,因为什么原因把他废弃掉了
gantt.addTaskLayer(function show_hidden(task){
let child_el,sub_height=20;
el=document.createElement(“div”)
sizes=gantt.getTaskPosition(task,this.date1,this.date2)
//注意,date1和date2都是new Date()的时间格式,在这里确定了第二根条的主要位置
child_el=createBox({height:sub_text,top:sizes.top+40,left:sizes.left,width:sizes.width},task)
el.appendChild(child_el);
//这里createBox是我自己的方法,根据长宽高创建Box
return el;
})
//根据条的状态绘制不同的条颜色,是对整条颜色的修改
gantt.templates.grid_row.class=gantt.template.task_class=function(start,end,task){
let css=[]
if(true){css.push(task-finish);
else{css.push(task-out)}}
}
return css.join(" ");
}

实现树形结构主要需要前端gantt.config.column配置一行的参数tree为true,传入的数据通过id和parent去确定父子关系,并且要求为确定的数组对象结构

附加2个功能

//画父子关系线的操作
遍历返回的数组节点数据,把有父节点的数据进行绘制就好
data.forEach(item=>{
if(item.hasOwnProperty(sjjhnm){
links.push({
id:item.id,
source:item.sjjhnm,//上级jhnm
target:item.jhnm,
type:“1”
})
})
})
this.ganttData.links=links

//修改时间刻度的方法
unit:month day hour 月,日,时
对应format参数为 %F %j日 小时见上

//绘制竖线的方法
gantt.addMarker({
start_date:time, //这个time是new Date()格式
css:“”, //你想附加的样式
text:“”, //显示的文本
title:“” //标题
})
单似乎7.0版本不支持这个方法,我看了源码,也找到了这个方法,不知为何一直在报错,因为项目进度的原因,没有去深入研究

后面又有项目需要甘特图,更换了一种更友好的甘特图组件gantt-elastic,使用起来更加方便,实现效果也更好,详情见我个人空间最新的一篇关于甘特图的文章。

Logo

前往低代码交流专区

更多推荐