console
<html>
<head>
<link href="https://unpkg.com/jsgantt-improved@2.5.5/dist/jsgantt.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/jsgantt-improved@2.5.5/dist/jsgantt.js" type="text/javascript">
</script>
<style>
.custom-task {
color: white;
background: red;
}
.custom-task2 {
color: white;
background: blue;
}
.custom-task3 {
color: black;
background: yellow;
}
</style>
</head>
<body>
<div style="position:relative" class="gantt" id="gantChart"></div>
<script>
var g = new JSGantt.GanttChart(document.getElementById('gantChart'), 'day')
const tasks = [
{
pID: 'task01',
pName: "<a href='http://www.baidu.com'>任务名称</a>",
pStart: "2020-01-15",
pEnd: "2020-01-21",
pPlanStart: "2020-01-01",
pPlanEnd: "2020-01-20",
pClass: "custom-task",
pLink: "",
pMile: 0,
pRes: "任务名称资源",
pComp: 0,
pGroup: 0,
pParent: 0,
pOpen: 1,
pDepend: "",
pCaption: "",
pCost: 1000,
pNotes: "pNotes",
pBarText: "任务名称",
category: "My Category",
sector: "Finance"
},
{
pID: 'task02',
pName: "测试子任务",
pStart: "2020-02-15",
pEnd: "2020-02-21",
pPlanStart: "2020-02-01",
pPlanEnd: "2020-02-20",
pClass: "custom-task2",
pLink: "",
pMile: 0,
pRes: "<a href='#' title='测试子任务资源'>测试子任务资源</a>",
pComp: 0,
pGroup: 0,
pParent: 'task01',
pOpen: 1,
pDepend: "",
pCaption: "",
pCost: 1000,
pNotes: "pNotes",
pBarText: "测试子任务",
category: "My Category",
sector: "Finance"
},
{
pID: 'task03',
pName: "测试关联任务1",
pStart: "2020-01-15",
pEnd: "2020-01-21",
pPlanStart: "2020-01-01",
pPlanEnd: "2020-01-20",
pClass: "custom-task3",
pLink: "",
pMile: 0,
pRes: "测试关联任务1资源",
pComp: 0,
pGroup: 0,
pParent: 0,
pOpen: 1,
pDepend: "",
pCaption: "",
pCost: 1000,
pNotes: "pNotes",
pBarText: "测试关联任务1",
category: "My Category",
sector: "Finance"
},
{
pID: 'task04',
pName: "测试关联任务2",
pStart: "2020-01-15",
pEnd: "2020-01-21",
pPlanStart: "2020-01-01",
pPlanEnd: "2020-01-20",
pClass: "custom-task",
pLink: "",
pMile: 0,
pRes: "测试关联任务2资源",
pComp: 0,
pGroup: 0,
pParent: 0,
pOpen: 1,
pDepend: "",
pCaption: "",
pCost: 1000,
pNotes: "pNotes",
pBarText: "测试关联任务2",
category: "My Category",
sector: "Finance"
}
]
JSGantt.parseJSONString(JSON.stringify(tasks),g)
g.Draw()
</script>
</body>
</html>