以vue使用为例

下载Dhtmlx-Gantt

npm install dhtmlx-gantt --save

初始化Dhtmlx-Gantt

mounted: function () {

gantt.init(this.$refs.gantt)

gantt.parse(this.data.tasks)

}

其中tasks数据格式为

{

data:[

{id:1,text:'Task#1',start_date:'15-04-2017',duration:3,progress:0.6},

{id:2,text:'Task#2',start_date:'18-04-2017',duration:3,progress:0.4},

{id:3,text:'Task#3',start_date:'19-04-2017',duration:3,progress:0.4}

],

links:[

{id:1,source:1,target:2,type:'0'}

]

}

设置样式

这里是Dhtmlx-Gantt官方demo，介绍了基本用法，Dhtmlx-Gantt功能还是比较强大的，更多的用法需要自己去阅读官方api

官方api文档

官方api文档主要分为：方法、属性、事件、模板、其他

方法 ：

调用形式

gantt.addCalendar(calendar);

属性：

设置形式

gantt.config.autoscroll = true;

gantt.config.autoscroll_speed = 50;

事件：

使用方式

gantt.attachEvent("onGanttScroll", function (left, top){

// any custom logic here

});

模板：

自定义甘特图中的部分组件展示效果

如：指定树列中子项的标签之前插入的自定义内容

gantt.templates.grid_blank=function(item){

return "##