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

點擊下載jQuery Gantt Package正式版

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

下面是最終實現(xiàn)效果：

首先我們拿到源碼以后，把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特性并設(shè)置為GB2312。

最后在需要展現(xiàn)甘特圖的地方加上以下div：

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

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

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

長寬根據(jù)實際情況來定；

下面是具體顯示的js：

JQueryGantt需要的Json數(shù)據(jù)格式（data）：

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

具體的參數(shù)含義：

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

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

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

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

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

修改settings，將dow和months里面的參數(shù)改成對應(yīng)的中文就行了。

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

代碼說明：

jquery.cookie.js：

• 用于cookie管理，如果需要在甘特圖中使用cookie則需要在頁面中引用該js文件，否則不需要引用。

jquery.fn.gantt.js：

• JQuery.Gantt組件的核心腳本文件，所有的甘特圖功能代碼都在這個文件中。

代碼結(jié)構(gòu)解析：

• $.fn.gantt = function (options)：甘特圖部件對象

基礎(chǔ)屬性：

• cookieKey：cookie的鍵
• scales：時間范圍的級別
• settings：部件設(shè)置集
• source：數(shù)據(jù)源
• itemsPerPage：分頁的每頁數(shù)據(jù)行數(shù)
• months：列頭處月份名稱
• dow：列頭處星期名稱
• startPos：默認開始位置日期
• navigate：底部導(dǎo)航，buttons為按鈕式的，scroll為滑塊式的
• scale：甘特圖每一列的時間范圍
• useCookie：是否使用cookie，如果使用需要引用jquery.cookie.js
• maxScale：最大時間范圍
• minScale：最小時間范圍
• waitText：等待提示文本
• onItemClick：有數(shù)據(jù)范圍內(nèi)點擊事件
• onAddClick：無數(shù)據(jù)范圍內(nèi)點擊事件
• onRender：渲染事件
• scrollToToday：設(shè)置是否滾動到今天
• 自定義選擇器方法（a：元素，i：索引，m：值）： .extend( .extend(.extend(.expr[":"], {});
• findday：以毫秒為時間單位匹配一個指定的日期
• findweek：以毫秒為時間單位匹配一個指定的周
• findmonth：以毫秒為時間單位匹配一個指定的月

• Date.prototype.getWeekId：獲取weekid用于標識week的div的id特性，返回字符串，格式為dh-YYYY-WW，其中的ww是一年中的第幾周
• Date.prototype.genRepDate：按部件設(shè)置屬性中scale的值獲取時間范圍，以秒為時間單位
• Date.prototype.getDayOfYear：獲取日期在一年中的第幾天
• Date.prototype.getWeekOfYear：獲取日期在一年中的第幾周
• Date.prototype.getDaysInMonth：獲取日期所在月份的天數(shù)
• Date.prototype.hasWeek：如果日期駐留在一周的邊界，返回真
• Date.prototype.getDayForWeek：返回一周的開始日期的日期對象
• Grid管理器（負責(zé)導(dǎo)航和渲染）：core
• elementFromPoint：獲取位于指定點的最高處的元素
• create：創(chuàng)建圖表
• init：初始化視圖，計算行數(shù)、頁數(shù)、可見的開始時間與結(jié)束時間
• render：渲染grid
• leftPanel：創(chuàng)建左側(cè)Panel
• dataPanel：創(chuàng)建右側(cè)數(shù)據(jù)Panel
• rightPanel：創(chuàng)建右側(cè)頭部Panel
• navigation：導(dǎo)航
• createProgressBar：創(chuàng)建進度條
• markNow：移除”wd“class添加”today“class到當(dāng)前的scale模式
• fillData：填充圖表，解析數(shù)據(jù)并填充到panel
• navigateTo：導(dǎo)航到
• navigatePage：導(dǎo)航到指定的頁面
• zoomInOut：變更空間軸級次（zoom）
• mouseScroll：通過鼠標移動圖表
• wheelScroll：通過鼠標滾輪移動圖表
• sliderScroll：通過滑塊控制圖表
• scrollPanel：更新滾動panel的margin
• synchronizeScroller：同步滾動
• repositionLabel：重新定位數(shù)據(jù)標簽
• waitToggle：切換等待
• 實用工具類功能：tools
• getMaxDate：返回最大可能的日期在scale值的標準下
• getMinDate：返回最小可能的日期在scale值的標準下
• parseDateRange：返回一個日期對象數(shù)組介于from和to之間，時間單位為天
• parseTimeRange：返回一個日期對象數(shù)組介于from和to之間，時間單位為小時
• parseWeeksRange：返回一個日期對象數(shù)組介于from和to，時間單位為周
• parseMonthsRange：返回一個日期對象數(shù)組介于from和to，時間單位為月
• dateDeserialize：從字符串反序列化成日期
• genId：用日期創(chuàng)建ID
• getCellSize：獲取當(dāng)前單元格的大小
• getRightPanelSize：獲取當(dāng)前右panel的大小
• getPageHeight：獲取當(dāng)前頁面的高度
• getProgressBarMargin：獲取當(dāng)前進度條的margin大小
• 甘特圖組件對象遍歷器（負責(zé)執(zhí)行初始化操作）：this.each(function () {}?;

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

相關(guān)產(chǎn)品推薦：

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

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

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