一.介绍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!