jsGannt Improved在vue中的使用

一.介绍jsGannt Improved

jsGannt Improved是甘特图：完全使用JS和CSS构建的功能齐全的甘特图组件。不需要图像或外部libs。

二.使用jsGannt Improved

1.首先安装依赖

npm i -S jsgantt-improved

2.其次项目中引入

官方导入

import {JSGantt} from 'jsgantt-improved'

这里虽然是官方导入但是我引入之后打印JSGgntt不存在看了一下源码

不是exports导入所以解构无效

我的导入方法(同时记得引入样式文件)

import * as JSGantt from "jsgantt-improved";
import "jsgantt-improved/dist/jsgantt.css" // 引入样式文件

3.使用

类似于echarts

首先实例化

let trys = document.getElementById("trys");
let g = new JSGantt.GanttChart(trys, "day");

GanttChart（第一个参数为HTML里的一个div对象，第二个则是给甘特图指定一种视图格式，如以“hour”，“day”，“week”，“month”或“quarter”格式绘制必填）

其次就是加载数据

源码当中有这么多参数

我使用的是AddTaskItemObject()方法

g.AddTaskItemObject({pID: 1,pName: "Define Chart API",pStart: "2017-02-25",pEnd: "2017-03-17",pPlanStart: "2017-04-01",pPlanEnd: "2017-04-15 12:00",pClass: "ggroupblack",pLink: "",pMile: 0,pRes: "Brian",pComp: 0,pGroup: 1,pParent: 0,pOpen: 1,pDepend: "",pCaption: "",pCost: 1000,pNotes: "Some Notes text",category: "My Category",sector: "Finance",pGantt: g,
});

直接添加一个对象数据

参数	详情
pID	用于标识每一行的唯一数字ID(必填)
pName	任务标签名(必填)
pStart	开始时间(必填)
pEnd	结束时间(必填)
pClass	甘特图右侧的样式(如：ggroupblack,gtaskblue,gtaskred,gtaskgreen,gtaskyellow,gtaskpurple,gtaskpink等)
pLink	http链接在工具提示中显示为“更多信息”链接(可选)
pMile	指出这是否是一个里程碑式的任务 - 数字:1 表示里程碑任务，0 表示不是里程碑任务(可选)
pComp	完成百分比，数字(必填)
pGroup	指示这是否是组任务（父） - 数字： 0=正常任务，1=标准组任务，2=组合任务(可选)
pParent	已存在的任务的pID，这表示此任务成为已识别任务的子任务。数字顶级任务应将pParent设置为0(必填)
pOpen	指示在绘制图表时是否打开标准组任务。必须为所有项目设置值，但只能由标准组任务使用。数字，1 =展开开，0 =收起(必填)
pGantt	javascript JSGantt.GanttChart对象从中进行设置。默认为“g”用于向后兼容(必填)

因为这里要求是这个颜色我在他样式css里没有找到这里我直接修改的源码(新增一个样式或者是修改都可以看需求我这地方修改是因为对其他地方没有影响)

node_modules/jsgantt-improved/dist/jsgantt.css

.ggroupblack {height: 7px;background: #FBB52C;margin-top: 2px;
}
.mygreen {height: 13px;background: #1ABB80;opacity: 0.9;margin-top: 1px;border-radius: 10px;
}

根据需求去掉了三列代码如下

g.setShowComp(0)
g.setShowDur(0)
g.setShowRes(0)

将英文转化为中文

g.addLang("zh", {format: "视图",hour: "时",day: "日",week: "周",month: "月",quarter: "季",hours: "小时",days: "天",weeks: "周",months: "月",quarters: "季度",hr: "小时",dy: "天",wk: "周",mth: "月",qtr: "季度",hrs: "小时",dys: "天",wks: "周",mths: "月",qtrs: "季度",resource: "资源",duration: "耗时",comp: "完成度",completion: "完成度",startdate: "开始日期",enddate: "结束日期",moreinfo: "更多信息",notes: "备注",january: "01",february: "02",march: "03",april: "04",maylong: "05",june: "06",july: "07",august: "08",september: "09",october: "10",november: "11",december: "12",jan: "1月",feb: "2月",mar: "3月",apr: "4月",may: "5月",jun: "6月",jul: "7月",aug: "8月",sep: "9月",oct: "10月",nov: "11月",dec: "12月",sunday: "星期日",monday: "星期一",tuesday: "星期二",wednesday: "星期三",thursday: "星期四",friday: "星期五",saturday: "星期六",sun: "星期日",mon: "星期一",tue: "星期二",wed: "星期三",thu: "星期四",fri: "星期五",sat: "星期六",});g.setLang("zh");

修改时间格式为yyyy-mm-dd

g.setDateTaskTableDisplayFormat('yyyy-mm-dd')

提示下还有一个时间修改格式

g.setDateTaskDisplayFormat('yyyy-mm-dd')

检查一下发现开始时间下面没有居中

一检查发现

直接设置样式

::v-deep .gstartdate{&>div{width: 100%;max-width: unset;}
}

最后则是绘制

g.Draw();

最终代码如下

<template><div class="trys"><div class="tried" id="trys"></div></div>
</template><script>
import * as JSGantt from "jsgantt-improved";
import "jsgantt-improved/dist/jsgantt.css"; // 引入样式文件
export default {data() {return {};},created() {},mounted() {let trys = document.getElementById("trys");let g = new JSGantt.GanttChart(trys, "day");g.setShowComp(0);g.setShowDur(0);g.setShowRes(0);g.addLang("zh", {format: "视图",hour: "时",day: "日",week: "周",month: "月",quarter: "季",hours: "小时",days: "天",weeks: "周",months: "月",quarters: "季度",hr: "小时",dy: "天",wk: "周",mth: "月",qtr: "季度",hrs: "小时",dys: "天",wks: "周",mths: "月",qtrs: "季度",resource: "资源",duration: "耗时",comp: "完成度",completion: "完成度",startdate: "开始日期",enddate: "结束日期",moreinfo: "更多信息",notes: "备注",january: "01",february: "02",march: "03",april: "04",maylong: "05",june: "06",july: "07",august: "08",september: "09",october: "10",november: "11",december: "12",jan: "1月",feb: "2月",mar: "3月",apr: "4月",may: "5月",jun: "6月",jul: "7月",aug: "8月",sep: "9月",oct: "10月",nov: "11月",dec: "12月",sunday: "星期日",monday: "星期一",tuesday: "星期二",wednesday: "星期三",thursday: "星期四",friday: "星期五",saturday: "星期六",sun: "星期日",mon: "星期一",tue: "星期二",wed: "星期三",thu: "星期四",fri: "星期五",sat: "星期六",});g.setLang("zh");g.setDateTaskDisplayFormat('yyyy-mm-dd')g.setDateTaskTableDisplayFormat('yyyy-mm-dd')g.AddTaskItemObject({pID: 1,pName: "模型计划",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "ggroupblack",pComp: 0,pGroup: 1,pParent: 0,pOpen: 1,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 2,pName: "直流场",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pGroup: 1,pParent: 1,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 3,pName: "换流区和阀厅",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pGroup: 1,pParent: 1,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 4,pName: "站前区",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pGroup: 1,pParent: 1,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 5,pName: "交流滤波器场",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pGroup: 1,pParent: 1,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 6,pName: "总图",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pParent: 3,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 7,pName: "主地图",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pParent: 4,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 8,pName: "图纸计划",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "ggroupblack",pComp: 0,pGroup: 1,pParent: 0,pOpen: 1,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.AddTaskItemObject({pID: 9,pName: "电器一次部分",pStart: "2017-02-25",pEnd: "2017-03-17",pClass: "mygreen",pComp: 0,pGroup: 1,pParent: 8,pOpen: 0,pDepend: "",pCaption: "",pCost: 1000,pNotes: "备注",category: "My Category",pGantt: g,});g.Draw();},watch: {},methods: {},
};
</script><style scoped lang="scss">
.trys {width: 100%;height: 100%;.tried {width: 100%;height: 100%;}::v-deep .gstartdate{&>div{width: 100%;max-width: unset;}}
}
</style>

结束！摸鱼ing！我向你敬礼呀！salute！