我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！
进度管理中有时候会用到甘特图，用于进度计划的展示分析，之前用普加甘特图比较多，虽然功能强大，但样式比较老，效果一般。而dhtmlx-gantt在效果上则要强的多，下面记录下之前使用过程的一些小坑。（注意dhtmlx-gantt分开源版本与pro版本，开源版本无法用于商业项目）
官网的api文档还是挺好用的docs.dhtmlx.com/gantt/index…
引入 dhtmlx-gantt模块
- 装免费版
npm install dhtmlx-gantt
- 装收费版（官网申请试用）
数据准备
- 数据来源可以用project软件制作文件，需要进行数据提取和格式转化
- 注意如果要画线数据源要分data 和link，基本属性如下，使用时注意别改，会自动读取加载：
● data - 定义甘特图中的任务
○ id - (string, number)任务id
○ start_date - (Date)任务开始日期
○ text - (string)任务描述
○ progress - (number) 任务完成度，0到1
○ duration - (number) 在当前时间刻度下的任务持续周期
○ parent - (number) 父任务的id
● links - 定义甘特图中的任务关联线
○ id - (string, number) 关联线id
○ source - (number) 数据源任务的id
○ target - (number) 目标源任务的id
○ type - (number) 关联线类型：0 - “结束到开始”，1 - “开始到开始”，2 - “结束到结束”
代码示例
使用vue，嵌入页面非常简单，通过ref属性挂载即可。
<template> <div class="app-container"> <div ref="gantt" class="left-container" v-loading="loading"/> </div></template><script>
引入部分注意不同版本的引入模式可能不同，我在网上查找到的老版本引入案例如下，但新版本并不支持
import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css' //皮肤 import 'dhtmlx-gantt/codebase/locale/locale_cn' // 本地化 import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js' //任务条悬浮提示
下面是我使用的引入方式，其中getTaskList为和后端对接的接口调用。
import gantt from "dhtmlx-gantt"; // 引入模块import "dhtmlx-gantt/codebase/dhtmlxgantt.css";import { getTaskList } from "./api";//get数据的方法
主要代码的作用已经在下面的备注中标注了，应该是比较清晰的
-
注意要切换路由时，这个组件自己的数据不会清空，所以如果有多个页面使用，在渲染前要调用gantt.clearAll()
export default { name: "gantt", data() { return { loading: false, tasks: { data: [], links: [], }, }; }, methods: { initData: function () { let params = { //接口调用参数 }; this.loading=true getTaskList(params).then((res) => { if (res.status) { this.tasks.data = res.data.taskList; //下面这部分是用来调整颜色的 // .map(function ( // current, // ind, // arry // ) { // var newObj = {}; // if (current.level) { // //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色 // if (current.level == 1) { // //冒烟 // newObj = Object.assign({}, current, { color: "#fcca02" }); // } else if (current.level == 2) { // //单元 // newObj = Object.assign({}, current, { color: "#fec0dc" }); // } else if (current.level == 3) { // //回归 // newObj = Object.assign({}, current, { color: "#62ddd4" }); // } else if (current.level == 4) { // newObj = Object.assign({}, current, { color: "#d1a6ff" }); // } // } else { // //一级菜单是蓝色的 // newObj = Object.assign({}, current, { color: "#5692f0" }); // } // return newObj; // }); this.tasks.links = res.data.taskRelationList; this.drawGantt(); } else { this.message.error(res.message); } }); }, drawGantt() {gantt.clearAll() //左右标注 // gantt.templates.leftside_text = function (start, end, task) { // return "<b>开始日期: </b>" + task.start_date; // }; // gantt.templates.rightside_text = function (start, end, task) { // return "<b>结束日期: </b>" + task.end_date; // }; // tooltip提示 gantt.templates.tooltip_text = function (start, end, task) { return ( "<b>活动名称:</b> " + task.text + "<br/><b>持续时间:</b> " + task.duration + "天" + "<br/><b>开始日期:</b> " + start.toLocaleDateString() + "<br/><b>结束日期:</b> " + end.toLocaleDateString() ); }; //控制基础设置是否开启 gantt.plugins({ critical_path: true, //关键路径，这个是关键路径自动计算功能，收费版有 marker: true, //竖直标签 tooltip: true, //悬浮窗 }); gantt.config.highlight_critical_path = true; //关键路径 //标签功能 var todayMarker = gantt.addMarker({ start_date: new Date(), text: "今天", }); //type默认值，可以更改，分为任务、概况任务（就是没有实际任务的总和部分）、里程碑 // gantt.config.types = { // task: "task", // project: "project", // milestone: "milestone", // }; //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/")) // gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ; //gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //结束时间需要+1天 //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务 gantt.config.autosize = true; //只读模式 gantt.config.readonly = true; //是否显示左侧树表格 gantt.config.show_grid = true; //自动滚屏 gantt.config.autoscroll = true; //表格列设置，除了基础属性，也可以自行添加其他信息 gantt.config.columns = [ { name: "serialNumber", label: "序号", align: "center", width: "50", resize: true, }, { name: "text", label: "活动名称", tree: true, width: "300", resize: true, }, { name: "duration", label: "时长", align: "center", width: "80", resize: true, template: function (obj) { return obj.duration + "天"; }, }, { name: "start_date", label: "开始时间", align: "center", width: "120", resize: true, }, { name: "end_date", label: "结束时间", align: "center", width: "120", resize: true, }, { name: "engineeringAmount", label: "工程量", align: "center", width: "80", resize: true, }, ]; //调整网格宽 gantt.config.grid_resize = true; //调整网格内列宽 gantt.config.grid_elastic_columns = true; //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。 gantt.config.show_task_cells = true; //设置x轴日期 gantt.config.scale_unit = "month"; gantt.config.step = 1; // gantt.config.date_scale = "星期" + "%D"; gantt.config.date_scale = "%Y" + "年"; //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度 gantt.config.fit_tasks = true; // 在时间线上增加一行显示星期 gantt.config.subscales = [ //{unit:"day", step:1, date:"星期"+"%D" }, // { unit: "day", step: 1, date: "%M" + "%d" + "日" }, { unit: "month", step: 1, date: "%M" }, ]; //时间轴图表中，任务条形图的高度 gantt.config.task_height = 30; //时间轴图表中，甘特图的高度 gantt.config.row_height = 36; //从后端过来的数据格式化 gantt.config.xml_date = "%Y-%m-%d"; //任务条显示内容 gantt.templates.task_text = function (start, end, task) { return task.text + "(" + task.duration + "天)"; }; gantt.templates.scale_cell_class = function (date) { return "weekend"; }; //任务栏周末亮色 /*gantt.templates.task_cell_class = function(item,date){ if(date.getDay()== 0 || date.getDay()== 6){ return "weekend"; } };*/ //任务条上的文字大小 以及取消border自带样式 gantt.templates.task_class = function (start, end, item) { return item.level == 0 ? "firstLevelTask" : "secondLevelTask"; }; //设置语言，新版本使用方法 gantt.i18n.setLocale("cn"); // 初始化 gantt.init(this.$refs.gantt); // 数据解析 gantt.parse(this.tasks); this.loading=false }, }, mounted() { this.initData(); },};
最后看一下部分效果
