DHTMLX Gantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的大部分開(kāi)發(fā)需求，具備完善的甘特圖圖表庫(kù)，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡(jiǎn)單集成，滿足多種定制開(kāi)發(fā)需求。

DHTMLX Gantt正版試用下載

公司業(yè)務(wù)需要，管理層做項(xiàng)目管理就會(huì)制定項(xiàng)目計(jì)劃，為了更好的的做好項(xiàng)目計(jì)劃就需要用到做計(jì)劃常用的工具甘特圖，而且做好計(jì)劃管理對(duì)項(xiàng)目的風(fēng)險(xiǎn)管控也有很大的好處。

一、甘特圖六要素

• tasks 甘特圖任務(wù)相關(guān)，包含data（數(shù)據(jù)）、links（數(shù)據(jù)之間的關(guān)系）、collections等 ——> gantt.parse(tasks) 注：parse前一定要先清一下數(shù)據(jù)不然來(lái)回切換不同的甘特圖會(huì)渲染出錯(cuò) gantt.clearAll()
  
• config 甘特圖配置相關(guān)，相當(dāng)于插件的options，不過(guò)有些options依賴于plugin（有plugin配值config才生效）——> gantt.config.xxx = xxx
  
• plugins 甘特圖插件相關(guān)，有些options依賴于plugin（有plugin配值config才生效）——> gantt.plugins(plugins)
  
• templates 甘特圖自定義模板相關(guān)，比如自定義tooltip_text、 task_text|、task_class等等——> gantt.templates.xxx = xxx
  
• events 甘特圖事件相關(guān)——> gantt.attachEvent(name, handle, settins)
  
• zoomConfig 甘特圖（日周月年）視圖相關(guān)——> gantt.ext.zoom.init(zoomConfig)

二、甘特圖使用

1.引入

1.引入js

import {gantt , Gantt} from "yys-pro-gantt";

import "yys-pro-gantt/codebase/dhtmlxgantt.css";
import "yys-pro-gantt/codebase/skins/dhtmlxgantt_terrace.css";

@import "~yys-pro-gantt/codebase/dhtmlxgantt.css";
/*@import "~yys-pro-gantt/codebase/skins/dhtmlxgantt_terrace.css"; // 皮膚*/
@import "./skins/dhtmlxgantt_yys.css"; // 自定義皮膚

不需要下面可以不引入
// import "dhtmlx-gantt/codebase/locale/locale_cn" ; // 本地化
// import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js"; // 任務(wù)條懸浮提示
// this.createScript("http://export.dhtmlx.com/gantt/api.js"); // 使用甘特圖自帶的導(dǎo)出功能必須引入

createScript
createScript(url: string) {
const scriptElement = document.createElement("script");
scriptElement.src = url;
const headerElement = document.querySelector("head") as any;
if (headerElement) {
headerElement.appendChild(scriptElement);
}
}

2、甘特圖初始化

template
<div ref="gantt"
id="yys-gantt">
</div>
vuejs
gantt() { // 獲取到dom元素
return this.$refs.gantt as any;
}
get ganttInstance() { // 獲取到甘特圖實(shí)例便能調(diào)用甘特圖的所有方法
return gantt || Gantt.getGanttInstance();
}
this.ganttInstance.init(this.gantt());
this.ganttInstance.clearAll();
this.ganttInstance.parse(this.tasks);

3、甘特圖更新

a. tasks變更甘特圖更新

@Watch("config", { immediate: true, deep: true })
updateConfig(nConfig: any, oConfig: any) {
if (JSON.stringify(nConfig) === JSON.stringify(oConfig)) { return; }
this.$nextTick(() => {
if (this.config) {
Object.assign(this.ganttInstance.config, this.defaultConfig, this.config);
}
if (this.gantt()) {
this.ganttInstance.init(this.gantt());
gantt.clearAll();
this.ganttInstance.parse(this.tasks);
}
})
}

b. config變更甘特圖更新

@Watch("config", { deep: true })
updateConfig() {
if (this.config) {
Object.assign(this.ganttInstance.config, this.defaultConfig, this.config);
}
if (this.gantt()) {
this.ganttInstance.init(this.gantt());
gantt.clearAll();
this.ganttInstance.parse(this.tasks);
}
}

4、甘特圖銷毀

gantt.destructor()

三、閉坑指南

1、data里面的部分屬性的key是不能更改的，比如id，parent，start_date、end_date、progress、open

links里面的全部屬性的key是不能更改的id source target type

2、data如果type是project，那么這條數(shù)據(jù)的開(kāi)始時(shí)間會(huì)取其里面所有數(shù)據(jù)的最早開(kāi)始時(shí)間，結(jié)束時(shí)間會(huì)取里面所有數(shù)據(jù)的最晚開(kāi)始時(shí)間，如果這條數(shù)據(jù)里面的所有數(shù)據(jù)都是空數(shù)據(jù)，那么start_date會(huì)甘特圖渲染的最早時(shí)間，end_date是start_date的后一天，這樣數(shù)據(jù)就會(huì)不準(zhǔn)確？

解決方案： data里加個(gè)unscheduled屬性來(lái)控制是否渲染這條數(shù)據(jù)，需要注意的是在所有涉及到日期的地方都要加，如tooltips_text 、columns、 拖拽等等

3、 dhtmlx-gantt都是下劃線分割，而且api中都是這樣,但在layout中min_width、max_width不生效，要用minWidth、maxWidth替換才生效。
4、排序后的數(shù)據(jù)默認(rèn)從頁(yè)面獲取的row元素可能是不準(zhǔn)確的，需要從dataStroe中獲取。
5、在左側(cè)表格和列都能拖拽的情況下，會(huì)突然彈回到默認(rèn)寬度？

解決方案：監(jiān)控config阻止掉更新；

@Watch("config", { deep: true })
updateConfig(nConfig: any, oConfig: any) {
if (JSON.stringify(nConfig) === JSON.stringify(oConfig)) return;
}

6、默認(rèn)情況下甘特圖經(jīng)常出現(xiàn)錯(cuò)誤提示？

解決方案：將show_errors設(shè)為false

7、link添加類型&&計(jì)劃和里程碑規(guī)則

link_class: (link: any) => {
// console.log(link)
const {type} = link;
return `link-type-${type}`;
},

 

target.forEach((linkId: any) => {
const link = this.gantt.getLink(linkId);
const {
sourceTask,
targetTask,
type,
} = this.getSourceTaskAndTargetTaskByLink(link);
switch (type) {
case LinkType.fs:
if ( +targetTask.start_date < +sourceTask.end_date ) {
fsLimit(task, sourceTask);
}
break;
case LinkType.ss:
if (+targetTask.start_date > +sourceTask.start_date) {
limitLeft(task, targetTask);
}
break;
case LinkType.ff:
if (+targetTask.end_date > +sourceTask.end_date) {
limitRight(task, targetTask);
}
break;
case LinkType.sf:
if (+targetTask.start_date > +sourceTask.end_date) {
limitRight(task, targetTask);
}
break;
default:
break;
}

fsMoveLimit(task: any, limit: any) {
const dur = task.end_date - task.start_date;
if (task.type === GANTT_TYPE.計(jì)劃 && limit.type === GANTT_TYPE.計(jì)劃) {
task.start_date = new Date(limit.end_date);
task.end_date = new Date(limit.start_date + dur);
}
if (task.type === GANTT_TYPE.計(jì)劃 && limit.type === GANTT_TYPE.里程碑) {
task.start_date = new Date(limit.end_date);
task.end_date = new Date(limit.start_date + dur);
}
if (task.type === GANTT_TYPE.里程碑 && limit.type === GANTT_TYPE.里程碑) {
task.start_date = new Date(limit.start_date);
}
if (task.type === GANTT_TYPE.里程碑 && limit.type === GANTT_TYPE.計(jì)劃) {
task.start_date = new Date(limit.end_date);
}
}
fsResizeLimit(task: any, limit: any) {
const dur = task.end_date - task.start_date;
if (task.type === GANTT_TYPE.計(jì)劃 && limit.type === GANTT_TYPE.計(jì)劃) {
task.start_date = new Date(limit.end_date);
}
if (task.type === GANTT_TYPE.計(jì)劃 && limit.type === GANTT_TYPE.里程碑) {
task.start_date = new Date(limit.end_date);
}
}

.gantt_task_link.link-type-0 .gantt_line_wrapper:nth-of-type(2)::before{
content: "fs";
position: absolute;
top: 10px;
left: 15px;
font-size: 16px;
}
.gantt_task_link.link-type-1 .gantt_line_wrapper:nth-of-type(2)::before{
content: "ss";
position: absolute;
top: 10px;
left: 15px;
font-size: 16px;
}
.gantt_task_link.link-type-2 .gantt_line_wrapper:nth-of-type(2)::before{
content: "ff";
position: absolute;
top: 10px;
left: 15px;
font-size: 16px;
}
.gantt_task_link.link-type-3 .gantt_line_wrapper:nth-of-type(2)::before{
content: "sf";
position: absolute;
top: 10px;
left: 15px;
font-size: 16px;
}

本文轉(zhuǎn)自：//juejin.cn/post/6930900493602390024 ，如有侵權(quán)，請(qǐng)聯(lián)系刪除

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫(kù)。

甘特圖控件交流群：764148812   

歡迎進(jìn)群交流討論，獲取更多幫助請(qǐng)聯(lián)系