Jquery 甘特圖 外掛程式 jQuery.Gantt

http://taitems.github.io/jQuery.Gantt/

參數	預設值	類型	說明
source	null	Array, String (url)	資料來源：json數組或者返回json的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; }		在空白欄框子點擊時執行的函數 第一個參數是點擊點對應時間的毫秒數，第二個參數對象的id
onRender	function () { return; }		甘特圖渲染完畢後執行的操作
useCookie	false		聲明是是否使用cookie記錄圖表的狀態（縮放單元、捲軸位置） 需要使用jquery.cookie.js才能使用該選項
scrollToToday	true	Boolean	是否滾動到當天

Source Configuration 資料來源配置格式

source: [{name: "標題",desc: "描述.",values: [ ... ]}]

參數	預設值	類型	說明
name	null	String	甘特圖左側顯示的每行所對應的標題——體文字部分
desc	null	String	左側說明的描述部分
values	null	Array	甘特圖單元所對應的時間段等資訊，在右側的儲存格顯示

Value Configuration 資料來源的json數值對

values: [{to: "/Date(1328832000000)/",from: "/Date(1333411200000)/",desc: "滑鼠移至上方時的標題文字",label: "甘特圖項目標題",customClass: "ganttRed",dataObj: foo.bar[i]}]

參數	類型	說明
to	String (Date)	結束時間（毫秒數，php返回時可以在時間戳記後添加3個0）
from	String (Date)	開始時間
desc	String	滑鼠移至上方到項目上個的提示文字Text that appears on hover, I think?
label	String	甘特圖項目的標題文字
customClass	String	添加到甘特圖項目的自訂類，可以用來標記甘特圖項目的顏色
dataObj	All	點擊時應用到甘特圖項目的data對象

$(function() {"use strict";$(".gantt").gantt({source: [{name: "Sprint 0",desc: "Analysis",values: [{from: "/Date(1320192000000)/",to: "/Date(1322401600000)/",label: "Requirement Gathering",customClass: "ganttRed"}]},{name: " ",desc: "Scoping",values: [{from: "/Date(1322611200000)/",to: "/Date(1323302400000)/",label: "Scoping",customClass: "ganttRed"}]},{name: "Sprint 1",desc: "Development",values: [{from: "/Date(1323802400000)/",to: "/Date(1325685200000)/",label: "Development",customClass: "ganttGreen"}]},{name: " ",desc: "Showcasing",values: [{from: "/Date(1325685200000)/",to: "/Date(1325695200000)/",label: "Showcasing",customClass: "ganttBlue"}]},{name: "Sprint 2",desc: "Development",values: [{from: "/Date(1326785200000)/",to: "/Date(1325785200000)/",label: "Development",customClass: "ganttGreen"}]},{name: " ",desc: "Showcasing",values: [{from: "/Date(1328785200000)/",to: "/Date(1328905200000)/",label: "Showcasing",customClass: "ganttBlue"}]},{name: "Release Stage",desc: "Training",values: [{from: "/Date(1330011200000)/",to: "/Date(1336611200000)/",label: "Training",customClass: "ganttOrange"}]},{name: " ",desc: "Deployment",values: [{from: "/Date(1336611200000)/",to: "/Date(1338711200000)/",label: "Deployment",customClass: "ganttOrange"}]},{name: " ",desc: "Warranty Period",values: [{from: "/Date(1336611200000)/",to: "/Date(1349711200000)/",label: "Warranty Period",customClass: "ganttOrange"}]}],navigate: "scroll",maxScale: "hours",itemsPerPage: 10,onItemClick: function(data) {alert("Item clicked - show some details");},onAddClick: function(dt, rowId) {alert("Empty space clicked - add an item!");},onRender: function() {if (window.console && typeof console.log === "function") {console.log("chart rendered");}}});$(".gantt").popover({selector: ".bar",title: "I'm a popover",content: "And I'm the content of said popover.",trigger: "hover"});prettyPrint();});