JQuery.Gantt（甘特圖）開發指南

阿新 • • 發佈：2019-02-04

JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴充套件功能的JS元件庫。

原始碼下載

前端頁面

- 資源引用

首先我們需要將下載到的原始碼中的CSS、IMG、JS等資源放入我們自己的專案中，然後在我們自己的頁面中引用需要的資原始檔。

- - CSS樣式檔案

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

JS指令碼檔案

<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>

注：如果需要甘特圖中顯示中文，則需要在js檔案引用中加上charset特性並設定為GB2312，否則中文內容將顯示為亂碼。

- 頁面佈局

在需要顯示甘特圖的地方加入以下這個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 () {};);

JQuery.Gantt（甘特圖）開發指南

JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴充套件功能的JS元件庫。原始碼下載前端頁面資源引用首先我們需要將下載到的原始碼中的CSS、IMG、JS等資源放入我們自己的專案中，然後在我們自己的頁面中引用需要的資原始檔。 CSS

專案管理（軟體開發）之甘特圖使用

作用：專案進度管理等工具：Visio 2013 效果圖：使用方法： 1. 新建一個Visio文件（檔案字尾：.vsdx） 2. 開啟該文件，類別選擇“日程安排”，模板選擇“甘特圖”，如圖： 3. 點選“確定”後，會進入一個預設選項配置介面，先點選“確定

跳出任務管理的泥沼，擁抱甘特圖的懷抱（完整版）

寫這篇文章，我不是要黑任何一個任務管理類的App或者方法論。相反，我是一個工具控，在試用各種任務管理類App上總是不遺餘力。常見的Things 3，Todoist，Teambition，Trello，Any.do，Doit.im我都試用過。最後，我選擇了Todoist，在Todoist上，我

實用程式碼Python（五）用Matplotlib畫甘特圖

說明使用Matplotlib畫甘特圖，思想是使用條形圖繪製。關鍵點，使用plt.barh(y,data,left=()) y是條形圖的位置，data是條形圖的大小，left是條形圖座標的距離。案例如下。測試程式碼 import matplotlib.pyplot as p

實用程式碼Python（七）甘特圖畫法

程式碼（gatt.py） def gatt(m, job, t): """甘特圖 m機器集 job工序順序集 t時間集 """ for j in range(len(m)): # 工序j i = m[j] - 1 # 機器編號i if j == 0: plt

華為項目管理的十大模版之甘特圖（純工具直接套用）

甘特圖業界 src nag ffffff watermark 下載地址管理 roc 華為項目管理的甘特圖被很多項目經理視為業界的模板，很多人都是挑不出啥毛病的。在自己不會用excel畫甘特圖的時候，就可以直接套用華為的項目管理十大模板，絕對能解決你當前的問題。所以小編就

俠仙客Silverlight/WPF工程管理甘特圖控制元件簡介(XiaXianKe Silverlight/WPF project management gantt chart control)

俠仙客甘特圖簡介　　該GanttControl(甘特圖空間)是一種可視的和功能豐富的Silverlight/ WPF控制元件，是視覺化工程任務管理的理想控制元件，內建有具有假期的日程安排、強制執行和視覺化的依賴約束等。包括左側的多列樹列表與右側的具有可縮

最短路徑之Dijkstra(迪傑斯特拉)演算法（無向圖）

簡介 Dijkstra(迪傑斯特拉)演算法是典型的單源最短路徑演算法，用於計算一個節點到其他所有節點的最短路徑。主要特點是以起始點為中心向外層層擴充套件，直到擴充套件到終點為止。由for迴圈可知，其

Gantt(甘特圖)與PERT(專案計劃評審技術)圖

在軟考考試題中，甘特圖和PERT圖經常出現。兩者無外乎就是針對考生對兩者的概念理解是否準確。甘特圖也就做進度管理圖。他是一種簡單的水平條形圖，它以日曆為基準描述專案任務，水平軸表示日

jQuery甘特圖/日程圖/橫道圖/外掛

基於JQ的一款靈活高效，支援自定義拓展的甘特圖/日程圖外掛支援月/周/小時等顯示方式支援拖動改變時間展開與收起新增/刪除，重新整理節假日高亮 clicked，dblClicked，changed事件 ... 呼叫方式： $("#ganttChart").ganttVi

FineReport新增多項目甘特圖示例及操作

finereport 技術 1.描述我們在做報表的時候，往往想體現其中隨著時間的變化而產生的項目進度的變化和其他相關的系統進展，每當這種時候甘特圖便是其中的不二之選。FineReport新增的多項目甘特圖可以說是滿足了大多數的需要。最近試了下FineReport甘特圖，新的甘特圖支持多項目，如下圖所示

vijos 1423 最短路or環（有向圖）

取消 main 必須測試主辦方 marker ons eof eap 最佳路線描述年久失修的賽道令國際汽聯十分不滿。汽聯命令主辦方立即對賽道進行調整，否則將取消其主辦權。主辦方當然必須馬上開始行動。賽道測評人員經過了三天三夜的數據采集，

PO BO VO DTO POJO DAO概念及其作用（附轉換圖）

blog 數據 ges http 作用分享 dao 記錄 logs po 數據庫中的一條記錄。 do PO —>DO—>DTO—>VOPO BO VO DTO POJO DAO概念及其作用（附轉換圖）

NYOJ 題目42 一筆畫問題（歐拉圖）

light ear ims ++ ring 推斷 post else tar 一筆畫問題時間限制：3000 ms | 內存限制：65535 KB 難度：4 描寫敘述 zyc從小就比較喜歡玩一些小遊戲。當中就包含畫一筆畫。他想請你幫他寫一個程序。推斷一個

簡單的跑馬燈效果（輪播圖）

font script meta 圖片 ive abs height 單單 none 邏輯簡介：想要圖片或者是文字向左移動，那肯定得用到定時器，那麽移動那就必然是距離左邊的left值在改變；核心問題就是通過定時器來改變ul距離left的值；本姑娘就是簡簡單單直直接接，上代碼

握手API網關（7）開發指南-API參考

custom psd title control test 機制找不到 con 列表一、簡介用戶可以使用開發指南介紹的 API 對 API 網關服務進行相關操作。術語表術語全稱中文說明 Region 地域用戶開放API，需選擇API在API網關的部署地

CSS3——animation的基礎（輪播圖）

ase rect 次數 bsp dir 前端 bic 圖片 out 作為前端剛入門的小菜鳥，只想記錄一下每天的小收獲對於animation動畫 1.實現動畫效果的組成：（1）通過類似Flash的關鍵幀來聲明一個動畫（2）在animation屬性中調用關鍵幀聲明的動畫

c語言程序設計第3周編程作業（數字特征）

對數 bsp idt 作業表格技術分享很快 lec .com 題目內容：對數字求特征值是常用的編碼算法，奇偶特征是一種簡單的特征值。對於一個整數，從個位開始對每一位數字編號，個位是1號，十位是2號，以此類推。這個整數在第n位上的數字記作x，如果x和n的奇偶性相同，

python學習（二十四）開發接口

接口 quest HERE cut eth 學習 ret false 數據庫模擬一些接口，在接口沒有開發成功前，可以用它來測試用來查詢數據 1、第一個接口 import flask,json #__name__,代表當前這個python文件 server=flask.

linux（烏班圖）下執行pip沒有問題，執行sudo pip報錯的問題

變量 www rec res line bubuko 原來後來 inux 最近剛裝好linux的虛擬機，在裝一個套件時提示權限不足，於是添加上了 sudo 命令，結果直接報以下錯誤， Traceback (most recent call last): File "/u

JQuery.Gantt（甘特圖） 開發指南

相關推薦

JQuery.Gantt（甘特圖）開發指南