引用CSS和JS
使用EdoGantt是一件簡單輕鬆的事，首先我們在HTML頁面內引用CSS和JS：
<!--edo css-->
<link href="../../scripts/edo/res/css/edo-all.css" rel="stylesheet" type="text/css" />
<link href="../../scripts/edo/res/product/project/css/project.css" rel="stylesheet" type="text/css" />
<!--edo js-->
<script src="../../scripts/edo/edo.js" type="text/javascript"></script>
注意，請仔細檢查css和js的路徑是否正確。很多錯誤都只是CSS或JS路徑不對造成的。
創建EdoGantt
創建一個EdoGantt，需要兩大對象：
1.Edo.lists.Gantt ：甘特圖顯示組件。負責界面顯示和操作。
2.Edo.data.DataGantt ：甘特圖數據組件。負責數據修改。
我們在網頁上創建一個web gantt，來說明如何使用這兩個對象：
//創建一個Edo.data.DataGantt甘特圖數據對象
var dataGantt = new Edo.data.DataGantt(ganttData); Edo.build({ id: 'gantt', type: 'gantt', //甘特圖顯示組件
width: 700, //寬度
height: 350, //高度
startDate: new Date(2009, 0, 28), //甘特圖顯示開始日期
finishDate: new Date(2009, 1, 30), //甘特圖顯示截止日期
data: dataGantt, //將甘特圖數據對象,設置給甘特圖顯示組件
render: document.getElementById('view') });
這裏的ganttData數據對象，就是我們上一節教程“甘特圖數據結構” 中的甘特圖基礎數據對象，是一個普通的JS Array。
創建的甘特圖視圖如下：
創建標準甘特圖
使用Edo.lists.Gantt創建的甘特圖組件，只是一個條形圖視圖。
一般人們需要的甘特圖，是一個左側樹，右側條形圖的視圖。
EdoJS提供了一個強大的樹形組件:Edo.lists.Tree，來幫助我們實現一個標準的甘特圖。
標準甘特圖視圖如下：
關於如何使用Edo.lists.Tree，超出了本篇教程講述的範疇，您可以去EdoJS官方網站的教程中心學習瞭解。
這裏有一個標準甘特圖的甘特圖例子可供參考。
調整甘特圖視圖日期範圍
Edo.lists.Gantt除data屬性外，還有兩個非常重要的屬性：startDate和finishDate。這兩個日期屬性，用來控制 甘特圖的日期顯示範圍，如果任務的日期超出這個日期範圍，將不會顯示在甘特圖界面上。所以，如果想將所有任務顯示在甘特圖界面上，請將這兩個值，設置爲所 有任務的最小開始日期和最大完成日期。
用戶可以在創建甘特圖的時候，給startDate和finishDate賦值，也可以在創建甘特圖之後，參考如下代碼重新設置，便於實時調整甘特 圖顯示日期範圍：
gantt.set('startDate', new Date(2009, 0, 28)); gantt.set('finishDate', new Date(2009, 1, 30));
用戶也可以在任何時刻重新設置甘特圖的數據對象，不斷刷新甘特圖數據內容。
使用AJAX獲取數據
在實際使用中，用戶的甘特圖數據不會存放在靜態頁面內，而是請求服務端的一個頁面服務，返回項目數據，這就需要使用一個數據交互組件：AJAX。
用戶可以使用自己屬性的AJAX組件，如果有需要，我們也提供了一個EdoJS AJAX組件，幫助用戶更方便進行數據交互操作。
這裏有一個使用Ajax加載Json數據的甘特圖例子可供參考。
監聽事件和數據操作
在“監 聽事件和數據操作”教程中，您可以學習怎麼用EdoGantt來實現自己的項目管理功能邏輯。
自定義甘特圖外觀
在“自定 義顯示外觀”教程中，您可以學習到如何將EdoGant修改成符合自己項目或產品需要的外觀。
更多詳細信息請直接登錄網站: