jQuery Gantt控件是一個真正的跨平臺，基于HTML5 / jQuery的本地實現，具有2個不同的gantt小部件，可滿足您所有基于gantt的可視化需求。還帶有ASP.NET WebControl和MVC擴展，可輕松集成到現有應用中。

點擊下載jQuery Gantt Package正式版

要怎么用jQuery Gantt Package來顯示任務的完成進度呢？現在就跟著小編來了解一下吧！

下面是最終實現效果：

首先我們拿到源碼以后，把CSS、img、JS等資源放入我們自己的項目中，然后在具體的頁面引用需要的資源：

css樣式引用：

   <link rel="stylesheet" href="css/style.css" />
   <link rel="stylesheet" href="css/bootstrap.min.css" />
   <link rel="stylesheet" href="css/prettify.min.css" />

< js腳本引用：

     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery.fn.gantt.js" charset ="GB2312">></script>
     <script src="js/prettify.min.js"></script>

為了防止中文亂碼，引用js文件的時候上charset特性并設置為GB2312。

最后在需要展現甘特圖的地方加上以下div：

   <div class="gantt"></div>

展示的時候可以給甘特圖套上一個div：

<div class="gantt_ot" style="width:800px; margin:100px auto;">
    <div class="gantt"></div>
 </div>

長寬根據實際情況來定；

下面是具體顯示的js：

JQueryGantt需要的Json數據格式（data）：

 {
                name: "任務",
                desc: "任務描述",
                values: [{
                    from: "/Date(1320192000000)/", 
                      to: "/Date(1320592000000)/",
                    label: "",
                    customClass: "ganttRed" /
                }]
            }

具體的參數含義：

最后就是可能會根據具體的需求做一些源碼的修改，下面提一下我修改過的幾個地方：

1、因為在 初始化gantt的時候可以設置scale（ 設置默認比例。這里總共有四個參數：months weeks days hours.） 參數來設定相應的比例。如果你任務的時間間隔太短，會造成甘特圖無法平鋪完整，如下圖：

這個時候可以對jquery.fn.gantt.js里的getMaxDate和getMinDate兩個方法做部分修改,也就是下面兩段代碼：

根據你所用的scale比例做對應的修改，我定義的days，所以 將maxDate這里改成了30，maxDate.setDate(maxDate.getDate() + 30),改后的效果：

2、可以看到，源碼里面甘特圖上的月份，周都是英文，如果你需要顯示中文的話，還是修改jquery.fn.gantt.js里的方法

修改settings，將dow和months里面的參數改成對應的中文就行了。

補充部分源碼方法及代碼說明：

代碼說明：

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( .extend(.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 () {}?;

本教程內容就是這樣了，希望對您有所幫助~感興趣的朋友可以下載jQuery Gantt Package試用版免費體驗~

相關產品推薦：

VARCHART XGantt是一個功能全面的交互式甘特圖控件，其模塊化的設計讓您可以創建滿足您和您的客戶所需求的應用程序。（我們領先的甘特圖控件VARCHART XGantt可用于.NET，ActiveX應用程序。）除此之外，同時還具有一個穩定可靠的甘特圖工具，在編寫第一行代碼之前，您就可以知道是否可以滿足客戶的需求。

EV-APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。

AnyGantt是完全跨瀏覽器和跨平臺的，可用于ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails或簡單的HTML頁面。有了AnyGantt你可以從任何地方可視化數據：從文本、Excel、CSV格式中的文件到MySQL、MS SQL以及Oracle數據庫服務器。