近年來，隨著互聯(lián)網(wǎng)的蓬勃發(fā)展，各種在線工具不斷涌現(xiàn)。其中，一些可以幫助我們更好地管理日程安排或者項目進(jìn)度的工具，備受大家的歡迎。今天，我們要介紹的就是一個基于jQuery的甘特圖插件——jquery.gantt。 首先來看一段示例代碼：

$("#myGanttChart").gantt({
source: [
{
name: "任務(wù)1",
desc: "處理主控系統(tǒng)問題",
values: [{
from: "/Date(1320192000000)/",
to: "/Date(1322401600000)/",
label: "任務(wù)1-診斷",
customClass: "ganttRed"
}]
},
{
name: "任務(wù)2",
desc: "升級數(shù)據(jù)庫",
values: [{
from: "/Date(1322611200000)/",
to: "/Date(1323302400000)/",
label: "任務(wù)2-設(shè)計",
customClass: "ganttGreen"
}]
},
{
name: "任務(wù)3",
desc: "制作軟件測試計劃",
values: [{
from: "/Date(1323802400000)/",
to: "/Date(1325685200000)/",
label: "任務(wù)3-測試",
customClass: "ganttBlue"
}]
}
],
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 10,
});

上述代碼中，我們通過調(diào)用jquery.gantt插件的gantt()方法為指定的DOM元素（id為myGanttChart）創(chuàng)建了一個甘特圖。我們向參數(shù)source中傳入了一個JSON對象，來定義了三個任務(wù)，并為它們的不同階段定義了自定義的CSS樣式。在其他參數(shù)中，我們指定了頁面導(dǎo)航方式（navigate）、時間刻度的最大最小范圍（maxScale和minScale）、以及每頁顯示數(shù)量（itemsPerPage）等。 除了通過靜態(tài)數(shù)據(jù)渲染甘特圖，jquery.gantt還支持通過Ajax動態(tài)獲取數(shù)據(jù)并生成甘特圖。對于大型項目，這種方式非常方便實用。 總之，jquery.gantt是一個易于使用且功能強(qiáng)大的甘特圖插件，它可以幫助我們更好地管理日程安排和項目進(jìn)度。如果您需要使用甘特圖來幫助自己的工作，不妨試試jquery.gantt吧！