JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴展功能的JS組件庫。 
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script src="js/jquery.cookie.js"></script>
在需要顯示甘特圖的地方加入以下這個div。
<div class="gantt"></div>
組件配置
Gantt 配置
$(".selector").gantt({ source:"ajax/data.json", scale:"weeks", minScale:"weeks", maxScale:"months", onItemClick:function(data){ alert("Item clicked - show some details");}, onAddClick:function(dt, rowId){ alert("Empty space clicked - add an item!");}, onRender:function(){ console.log("chart rendered");}});
參數 默認值 接收類型
source null Array, String (url)
itemsPerPage 7 Number
months ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] Array
dow ["S", "M", "T", "W", "T", "F", "S"] Array
navigate "buttons" String ("buttons","scroll")
scale "days" String
maxScale "months" String
minScale "hours" String
waitText "Please Wait..." String
onItemClick: function (data) { return; } 有數據範圍內的點擊事件
onAddClick function (dt, rowId) { return; } 無數據範圍內的點擊事件
onRender function () { return; } 渲染事件
useCookie false 如果需要使用cookie則需要引用JS腳本文件：
jquery.cookie.js
scrollToToday true Boolean
Source 配置
source:[{ name:"Example", desc:"Lorem ipsum dolor sit amet.", values:[...]}]
參數 默認值 接收類型 解釋
name null String 每一行最左側的一列以粗體顯示
desc null String 每一行左側第二列
values null Array 甘特圖日期範圍項
Value 配置
values:[{ to:"/Date(1328832000000)/",from:"/Date(1333411200000)/", desc:"Something", label:"Example Value", customClass:"ganttRed", dataObj: foo.bar[i]}]
參數 接收類型 解釋
to String (Date) 結束時間，以毫秒爲換算單位
from String (Date) 開始時間，以毫秒爲換算單位
desc String 鼠標懸停顯示文本
label String 甘特項顯示文本
customClass String 甘特項的自定義class
dataObj All 一個直接應用於甘特項的數據對象
代碼說明
jquery.cookie.js
用於cookie管理，如果需要在甘特圖中使用cookie則需要在頁面中引用該js文件，否則不需要引用。
jquery.fn.gantt.js
JQuery.Gantt組件的核心腳本文件，所有的甘特圖功能代碼都在這個文件中。
代碼結構解析：
$.fn.gantt = function (options)：甘特圖部件對象
基礎設置項
cookieKey：cookie的鍵
scales：時間範圍的級別
settings：部件設置集
source：數據源
itemsPerPage：分頁的每頁數據行數
months：列頭處月份名稱
dow：列頭處星期名稱
startPos：默認開始位置日期
navigate：底部導航，buttons爲按鈕式的，scroll爲滑塊式的
scale：甘特圖每一列的時間範圍
useCookie：是否使用cookie，如果使用需要引用jquery.cookie.js
maxScale：最大時間範圍
minScale：最小時間範圍
waitText：等待提示文本
onItemClick：有數據範圍內點擊事件
onAddClick：無數據範圍內點擊事件
onRender：渲染事件
scrollToToday：設置是否滾動到今天
選擇器方法（a：元素，i：索引，m：值）： $.extend($.expr[":"], {}); findday：以毫秒爲時間單位匹配一個指定的日期
findweek：以毫秒爲時間單位匹配一個指定的周
findmonth：以毫秒爲時間單位匹配一個指定的月
日期原型 Date.prototype.getWeekId：獲取weekid用於標識week的div的id特性，返回字符串，格式爲dh-YYYY-WW，其中的ww是一年中的第幾周 Date.prototype.genRepDate：按部件設置屬性中scale的值獲取時間範圍，以秒爲時間單位 Date.prototype.getDayOfYear：獲取日期在一年中的第幾天 Date.prototype.getWeekOfYear：獲取日期在一年中的第幾周 Date.prototype.getDaysInMonth：獲取日期所在月份的天數 Date.prototype.hasWeek：如果日期駐留在一週的邊界，返回真 Date.prototype.getDayForWeek：返回一週的開始日期的日期對象
Grid管理器（負責導航和渲染）：core
elementFromPoint：獲取位於指定點的最高處的元素
create：創建圖表
init：初始化視圖，計算行數、頁數、可見的開始時間與結束時間
render：渲染grid
leftPanel：創建左側Panel
dataPanel：創建右側數據Panel
rightPanel：創建右側頭部Panel
navigation：導航
createProgressBar：創建進度條
markNow：移除”wd“class添加”today“class到當前的scale模式
fillData：填充圖表，解析數據並填充到panel
navigateTo：導航到
navigatePage：導航到指定的頁面
zoomInOut：變更空間軸級次（zoom）
mouseScroll：通過鼠標移動圖表
wheelScroll：通過鼠標滾輪移動圖表
sliderScroll：通過滑塊控制圖表
scrollPanel：更新滾動panel的margin
synchronizeScroller：同步滾動
repositionLabel：重新定位數據標籤
waitToggle：切換等待
實用功能：tools
getMaxDate：返回最大可能的日期在scale值的標準下
getMinDate：返回最小可能的日期在scale值的標準下
parseDateRange：返回一個日期對象數組介於from和to之間，時間單位爲天
parseTimeRange：返回一個日期對象數組介於from和to之間，時間單位爲小時
parseWeeksRange：返回一個日期對象數組介於from和to，時間單位爲周
parseMonthsRange：返回一個日期對象數組介於from和to，時間單位爲月
dateDeserialize：從字符串反序列化成日期
genId：用日期創建ID
getCellSize：獲取當前單元格的大小
getRightPanelSize：獲取當前右panel的大小
getPageHeight：獲取當前頁面的高度
getProgressBarMargin：獲取當前進度條的margin大小
選項擴展：this.each(function () {};);
原文來自http://www.51diaodu.com/doc/1456