dhtmlx-Gantt(甘特圖) 學習開發手冊--第一章

dhtmlx-Gantt 學習開發手冊

---

本文主要針對B/S進行學習

目錄

1. dhtmlx-Gantt(甘特圖)學習--第一章:初識dhtmlx-Gantt
   1. dhtmlx-Gantt(甘特圖)--是什麼?
   2. dhtmlx-Gantt(甘特圖)--有什麼用?
   3. dhtmlx-Gantt(甘特圖)--怎麼使用?
   4. dhtmlx-Gantt(甘特圖)--基本使用方式
2. dhtmlx-Gantt(甘特圖)學習--第二章
3. dhtmlx-Gantt(甘特圖)學習--第三章
4. dhtmlx-Gantt(甘特圖)學習--第四章
5. dhtmlx-Gantt(甘特圖)學習--第五章

---

1.dhtmlx-Gantt(甘特圖)–是什麼?

       甘特圖（Gantt chart）又稱爲橫道圖、條狀圖(Bar chart)。其通過條狀圖來顯示項目，進度，和其他時間相關的系統進展的內在關係隨着時間進展的情況。以提出者亨利·L·甘特（Henrry L. Ganntt）先生的名字命名。

①含義
       甘特圖以圖示通過活動列表和時間刻度表示出特定項目的順序與持續時間。一條線條圖，橫軸表示時間，縱軸表示項目，線條表示期間計劃和實際完成情況。直觀表明計劃何時進行，進展與要求的對比。便於管理者弄清項目的剩餘人物，評估工作進度。
甘特圖是以作業排序爲目的，將活動與時間聯繫起來的最早嘗試的工具之一，幫助企業描述工作中心、超時工作等資源的使用。
甘特圖包含以下三個含義：
1、以圖形或表格的形式顯示活動；
2、通用的顯示進度的方法；
3、構造時含日曆天和持續時間，不將週末節假算在進度內。
簡單、醒目、便於編制，在管理中廣泛應用。
甘特圖按內容不同，分爲計劃圖表、負荷圖表、機器閒置圖表、人員閒置圖表和進度表五種形式。

②特點
       甘特圖的特點是突出了生產管理中最重要的因素— 時間，它的作用表現在三個方面：
1、計劃產量與計劃時間的對應關係。
2、每日的實際產量與預定計劃產量的對比關係。
3、一定時間內實際累計產量與同時期計劃累計產量的對比關係 。

摘錄來源:https://baike.baidu.com/item/甘特圖/113232?fr=aladdin

dhtmlx-Gantt是什麼?
DHTMLX組件是一個JavaScript 庫，提供了一套完整的Ajax驅動的UI 組件。使用 dhtmlxSuite 生成企業級 web 應用程序有乾淨的界面、 快速的性能和豐富的用戶體驗。dhtmlx組件是由位於俄羅斯聖彼得堡的DHTMLX公司開發的，適用於B/S模式的Web應用開發。
dhtmlx-Gantt:是該公司旗下開發的甘特圖組件.

它分Pro版和standard版:兩者之間一個是付費的,一個不需要付費.Pro版需要付費,standard版不需要付費.
兩者之間支持的功能有所區別(該組件還在不斷更新迭代中):

Feature(特徵)	Standard Edition(標準版)	Pro Edition(專業版)
Inline editing (New!) (內聯編輯（新！）)	√	√
Split tasks (New!) (拆分任務（新！）)	×	√
Ability to set task types automatically (New!)(能夠自動設置任務類型（新！）)	×	√
Editable or readonly Gantt chart(可編輯或只讀甘特圖)	√	√
Auto scheduling(自動調度)	×	√
Keyboard navigation(鍵盤導航)	√	√
Dynamic loading(動態加載)	×	√
Projects and milestones task types(項目和里程碑任務類型)	×	√
jQuery integration(jQuery集成)	√	√
Resource management(資源管理)	×	√
Right-to-left mode(從右到左的模式)	√	√
Fullscreen mode(全屏模式)	√	√
Loading from XML, JSON(從XML，JSON加載)	√	√
Tasks grouping(任務分組)	×	√
Support for baselines, deadlines and other custom elements(支持基線，截止日期和其他自定義元素)	×	√
Tooltips(提示)	√	√
Critical path calculation(關鍵路徑計算)	×	√
Backward planning(落後計劃)	√	√
Optional tree view(可選的樹視圖)	√	√
Customizable task edit form (lightbox)(可自定義的任務編輯表單（燈箱）)	√	√
Rich drag-and-drop behavior to manage tasks(豐富的拖放行爲來管理任務)	√	√
Ability to mark specific times in the timeline area(能夠在時間線區域標記特定時間)	√	√
Support for touch devices: iOS, Android(支持觸摸設備：iOS，Android)	√	√
Progress percent coloring for tasks(任務的着色百分比)	√	√
Full control with JavaScript API(使用JavaScript API完全控制)	√	√
Support for unscheduled tasks(支持計劃外任務)	√	√
Dependency arrows(依賴性箭頭)	√	√
Simple API for managing editability / readonly modes of individual tasks(用於管理單個任務的可編輯性/只讀模式的簡單API)	√	√
Export/import from MS Project(從MS Project導出/導入)	√	√
Smart rendering(智能渲染)	√	√
Undo/redo functionality(撤消/重做功能)	√	√
Accessibility(無障礙)	√	√
Fast and smooth rendering(快速流暢的渲染)	√	√
Configurable columns in the grid(網格中的可配置列)	√	√
Multi-task selection(多任務選擇)	√	√
Per-column grid sorting(每列網格排序)	√	√
Simple API for hiding/showing columns of the grid(用於隱藏/顯示網格列的簡單API)	√	√
Ability to resize grid columns and the grid itself from the UI(能夠從UI調整網格列和網格本身的大小)	×	√
Sorting and filtering(排序和過濾)	√	√
Cross-browser: IE, FF, Chrome, Safari, Opera(跨瀏覽器：IE，FF，Chrome，Safari，Opera)	√	√
Localization (30+ locales)(本地化（30多種語言環境）)	√	√
Customizable time scale - zooming(可自定義的時間刻度 - 縮放)	√	√
Non-linear time scale (hide days/hours)(非線性時標（隱藏天數/小時）)	×	√
7 different skins(7種不同的皮膚)	√	√
Content Security Policy compliance(內容安全政策合規性)	√	√
Export to Excel, iCal(導出到Excel，iCal)	√	√
Support for custom tasks types(支持自定義任務類型)	×	√
4 types of linking of tasks: finish-to-start, start-to-start, finish-to-finish, start-to-finish(4種類型的任務鏈接：從完成到開始，從開始到開始，從完成到完成，從開始到結束)	√	√

---

2.dhtmlx-Gantt(甘特圖)–有什麼用?

1、項目管理：在現代的項目管理裏，被廣泛的應用。這可能是最容易理解、最容易使用並最全面的一種。它可以讓你預測時間、成本、數量及質量上的結果並回到開始。它也能幫助你考慮人力、資源、日期、項目中重複的要素和關鍵的部分，你還能把10張各方面的甘特圖集成爲一張總圖。以甘特圖的方式，可以直觀的看到任務的進展情況，資源的利用率等等。
2、其它領域：如今甘特圖不單單被應用到生產管理領域，隨着生產管理的發展、項目管理的擴展，它被應用到了各個領域，如：建築、IT軟件、汽車等等 。

摘錄來源:https://baike.baidu.com/item/甘特圖/113232?fr=aladdin

---

3.dhtmlx-Gantt(甘特圖)–怎麼使用?

①在頁面上創建甘特圖Creating Gantt Chart on the Page

在頁面上初始化甘特圖

1.在頁面上包含dhtmlxGantt代碼文件。
2.在頁面上創建DIV容器。
3.使用init方法在新創建的容器中初始化dhtmlxGantt 。作爲參數，該方法採用甘特圖將顯示的HTML容器（或其id）。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Basic initialization</title>
	<script src="../../codebase/dhtmlxgantt.js?v=6.0.0"></script>
	<link rel="stylesheet" href="../../codebase/dhtmlxgantt.css?v=6.0.0">

	<script src="../common/testdata.js?v=6.0.0"></script>
	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
	var tasks = {
		data: [
			{
				id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
				progress: 0.4, open: true
			},
			{
				id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
				progress: 0.6, parent: 1
			},
			{
				id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
				progress: 0.6, parent: 1
			}
		],
		links: [
			{id: 1, source: 1, target: 2, type: "1"},
			{id: 2, source: 2, target: 3, type: "0"}
		]
	};

	gantt.init("gantt_here");


	gantt.parse(tasks);

</script>
</body>
</html>

顯示如圖:

dhtmlxGantt要求在頁面上包含2個代碼文件：
dhtmlxgantt.js
dhtmlxgantt.css

<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">

初始化:

 gantt.init("gantt_here");

數據:

var tasks = {
		data: [
			{
				id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
				progress: 0.4, open: true
			},
			{
				id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
				progress: 0.6, parent: 1
			},
			{
				id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
				progress: 0.6, parent: 1
			}
		],
		links: [
			{id: 1, source: 1, target: 2, type: "1"},
			{id: 2, source: 2, target: 3, type: "0"}
		]
	};

全屏模式:

<style type="text/css" media="screen">
    html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }

</style>

---

4.dhtmlx-Gantt(甘特圖)–基本使用方式

①配置甘特圖
爲了獲得甘特圖的所需外觀，dhtmlxGantt提供了2個對象：

gantt.config - 日期，比例，控件等的配置選項。
gantt.templates - 格式化甘特圖中使用的日期和標籤的模板。

所有配置選項都在gantt.config對象中聲明。

要設置所需的選項，只需按照本文檔中的說明進行編寫。

請注意，配置選項應該在dhtmlxGantt初始化的代碼行之前。

'gantt.config'對象

年示圖:

gantt.config.scale_unit = "year"; //按年顯示
gantt.config.step = 1;	//設置時間刻度的步長（X軸）
gantt.config.date_scale = "%Y";	//日期尺度按年
 
gantt.init("gantt_here");

月示圖:

	gantt.config.scale_unit = "month";	//按月顯示
	gantt.config.date_scale = "%F, %Y";		//設置時間刻度的格式（X軸） 多個尺度

	gantt.config.scale_height = 50; //設置時間刻度的高度和網格的標題

	gantt.config.subscales = [
		{unit: "day", step: 1, date: "%j, %D"}
	];			//指定第二個時間刻度

	gantt.init("gantt_here");

'gantt.templates'對象

模板可用於更改日期和標籤的顯示。

要定義模板，只需按照本文檔中的說明進行編寫即可。請記住，模板的定義應該在dhtmlxGantt初始化的代碼行之前。

gantt.templates.task_text=function(start,end,task){
    return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.users;
};
gantt.init("gantt_here");

---

後記

以上是初步學習dhtml-Gantt.如有問題請提出,相互學習.
dhtml-Gantt API :https://docs.dhtmlx.com/gantt/api__refs__gantt.html