dhtmlxGantt
https://github.com/DHTMLX/gantt
dhtmlxGantt web
https://dhtmlx.com/docs/products/dhtmlxGantt/
dhtmlxGantt doc
https://docs.dhtmlx.com/gantt/
[dhtmlxGant(甘特圖)開發手冊]第一篇——如何使用dhtmlxGantt
https://blog.csdn.net/honantic/article/details/51314672
[dhtmlxGant(甘特圖)開發手冊]第二篇——初始化、基本設置以及基本功能
https://blog.csdn.net/honantic/article/details/51355498
[dhtmlxGantt(甘特圖)開發手冊]第三篇——語言設置、匯出PDF/PNG、匯出Excel/iCal等
https://blog.csdn.net/honantic/article/details/51364522
dhtmlxGantt是一款JavaScript編寫的甘特圖控制項，説明開發人員進行專案的視覺化展示和安排，通過該控制項可以在任務之間設置不同的關係，提供的大量的API和事件處理可以説明開發人員根據自身需要進行高度自訂和設置。支援過濾和放大、時間比例、最短路徑、顯示隱藏列、匯出資料、載入大資料集等多種功能。
以下為官方vue化方法
How to Use dhtmlxGantt with Vue.js Framework
https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/
以下為單html檔測試範例︰
載入後畫面為︰
#dhtmlxGantt, Javascript, Gantt Chart, 甘特圖
https://github.com/DHTMLX/gantt
dhtmlxGantt web
https://dhtmlx.com/docs/products/dhtmlxGantt/
dhtmlxGantt doc
https://docs.dhtmlx.com/gantt/
[dhtmlxGant(甘特圖)開發手冊]第一篇——如何使用dhtmlxGantt
https://blog.csdn.net/honantic/article/details/51314672
[dhtmlxGant(甘特圖)開發手冊]第二篇——初始化、基本設置以及基本功能
https://blog.csdn.net/honantic/article/details/51355498
[dhtmlxGantt(甘特圖)開發手冊]第三篇——語言設置、匯出PDF/PNG、匯出Excel/iCal等
https://blog.csdn.net/honantic/article/details/51364522
dhtmlxGantt是一款JavaScript編寫的甘特圖控制項，説明開發人員進行專案的視覺化展示和安排，通過該控制項可以在任務之間設置不同的關係，提供的大量的API和事件處理可以説明開發人員根據自身需要進行高度自訂和設置。支援過濾和放大、時間比例、最短路徑、顯示隱藏列、匯出資料、載入大資料集等多種功能。
以下為官方vue化方法
How to Use dhtmlxGantt with Vue.js Framework
https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/
以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>DHTMLX Gantt Chart Demo</title>
<!--使用lodash-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<!--全版樣式-->
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
<!--使用dhtmlxgantt-->
<link href="https://cdn.jsdelivr.net/npm/dhtmlx-gantt@5.2.0/codebase/skins/dhtmlxgantt_material.css?v=5.2.0" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/dhtmlx-gantt@5.2.0/codebase/dhtmlxgantt.js?v=5.2.0"></script>
<!--週末欄位樣式-->
<style type="text/css">
.dhtmlxgantt_weekend {
background: #bbb !important;
color: #fff !important;
}
</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script type="text/javascript">
//tasks
let tasks = {
data: [
{
id: 1, level: 1 , text: "主項目A"
},
{
id: 11, level: 2, text: "次項目A-1", parent: 1
},
{
id: 111, level: 3, text: "一般項目A-1-1", parent: 11
},
{
id: 1111, level: 4, text: "A-1-1進度1", parent: 111, start_date: "03-04-2018", duration: 8
},
{
id: 1112, level: 4, text: "A-1-1進度2", parent: 111, start_date: "08-04-2018", duration: 12
},
{
id: 1113, level: 4, text: "A-1-1進度3", parent: 111, start_date: "13-04-2018", duration: 10
},
{
id: 112, level: 3, text: "一般項目A-1-2", parent: 11
},
{
id: 1121, level: 4, text: "A-1-2進度1", parent: 112, start_date: "13-04-2018", duration: 8
},
{
id: 1122, level: 4, text: "A-1-2進度2", parent: 112, start_date: "18-04-2018", duration: 12
},
{
id: 1123, level: 4, text: "A-1-2進度3", parent: 112, start_date: "23-04-2018", duration: 10
},
{
id: 12, level: 2, text: "次項目A-2", parent: 1
},
{
id: 121, level: 3, text: "一般項目A-2-1", parent: 12, start_date: "07-04-2018", end_date: "23-04-2018"
},
{
id: 2, level: 1, text: "主項目B"
},
{
id: 21, level: 2, text: "項目B-1", parent: 2, start_date: "04-04-2018", end_date: "13-04-2018"
},
],
};
//給各項目顏色
_.each(tasks.data, function (v, k) {
if (v.level <= 3) {
v.color = '#eee';
v.textColor = '#000';
}
else {
v.color = '#3DB9D3';
v.textColor = '#fff';
}
});
//項目區中文化
gantt.config.columns = [
{ name: "text", label: '名稱', resize: true, tree: true, align: 'left' },
{ name: "start_date", label: '開始時間', resize: true, align: 'center' },
{ name: "duration", label: '長度(天)', resize: false, align: 'center' }
];
//展開樹狀項目
gantt.config.open_tree_initially = true;
//禁止編輯
gantt.config.readonly = true;
//顯示欄位合併數量
//gantt.config.step = 1;
//上方欄位單位與高度
gantt.config.scale_unit = 'day'; //"minute", "hour", "day", "week", "quarter", "month", "year"
gantt.config.scale_height = 50;
//上方欄位寬度
//gantt.config.min_column_width = 50;
//項目空間高度與高度
gantt.config.row_height = 40;
gantt.config.task_height = 18;
//顯示時間格式, Date Format Specification
gantt.config.date_grid = "%Y/%m/%d";
//onTaskClick
gantt.attachEvent('onTaskClick', function (id, e) {
let target = e.target || e.srcElement;
if (target.className === 'gantt_tree_content') {
console.log('點擊task項目區', id);
}
else {
console.log('點擊task進度條區', id);
}
return true;
});
//onTemplatesReady
gantt.attachEvent('onTemplatesReady', function () {
//依照年月日顯示欄位
gantt.templates.date_scale = function (date) {
let y = gantt.date.date_to_str("%Y");
y = y(date);
let d = gantt.date.date_to_str("%n/%j");
let md = d(date);
let cy = '<div style="opacity:0.6; font-size:0.9em; height:15px; line-height:15px;">' + y + '</div>';
let cd = '<div style="font-size:1.1em; height:15px; line-height:15px;">' + md + '</div>';
return '<div style="padding:10px 0px;">' + cy + cd + '</div>';
};
//針對週末標注為灰色
gantt.templates.scale_cell_class = function (date) {
if (date.getDay() === 0 || date.getDay() === 6) {
return 'dhtmlxgantt_weekend';
}
};
});
//init對象
gantt.init("gantt_here");
//載入資料
gantt.parse(tasks);
</script>
</body>
</html>
載入後畫面為︰
#dhtmlxGantt, Javascript, Gantt Chart, 甘特圖
留言
張貼留言