jquery 甘特圖是一款基于 jQuery 的甘特圖插件。它提供了一種簡(jiǎn)單的方式來可視化任何時(shí)間段內(nèi)的進(jìn)程，如項(xiàng)目進(jìn)度、任務(wù)列表等等。

使用 jquery 甘特圖需要有一定的 HTML 和 JavaScript 知識(shí)。首先，需要?jiǎng)?chuàng)建一個(gè)包含甘特圖的 div 元素。然后，通過 JavaScript 設(shè)置甘特圖需要的參數(shù)，如任務(wù)列表、開始時(shí)間、結(jié)束時(shí)間、進(jìn)度等等。

<div id="gantt"></div>
<script>
$(function() {
// 任務(wù)列表數(shù)據(jù)
var tasks = [
{
name: "任務(wù)1", // 任務(wù)名稱
start: new Date(2022, 0, 1), // 任務(wù)開始時(shí)間
end: new Date(2022, 0, 10), // 任務(wù)結(jié)束時(shí)間
progress: 50 // 任務(wù)完成百分比
},
// ...
];
$("#gantt").gantt({
source: tasks, // 數(shù)據(jù)源，即任務(wù)列表數(shù)據(jù)
scale: "days", // 時(shí)間刻度，可選 "weeks"、"months"、"years"
minScale: "days", // 最小時(shí)間刻度，同 scale
maxScale: "months", // 最大時(shí)間刻度，同 scale
startDate: new Date(2022, 0, 1), // 甘特圖開始時(shí)間
endDate: new Date(2022, 0, 31), // 甘特圖結(jié)束時(shí)間
scrollToToday: true, // 是否滾動(dòng)到當(dāng)前時(shí)間點(diǎn)
onItemClick: function(data) {
// 點(diǎn)擊事件回調(diào)函數(shù)
console.log(data);
}
});
});
</script>

上面的代碼是最基本的 jquery 甘特圖示例。其中，tasks 數(shù)組表示任務(wù)列表數(shù)據(jù)，包含每個(gè)任務(wù)的名稱、開始時(shí)間、結(jié)束時(shí)間和完成百分比。通過傳遞這個(gè)數(shù)據(jù)源，可以讓插件自動(dòng)繪制出甘特圖。

另外，還可以設(shè)置時(shí)間刻度、甘特圖開始和結(jié)束時(shí)間、是否滾動(dòng)到當(dāng)前時(shí)間點(diǎn)等等。此外，還可以通過回調(diào)函數(shù)來處理點(diǎn)擊任務(wù)的事件。

總之，使用 jquery 甘特圖可以很方便地創(chuàng)建出美觀、直觀的甘特圖，幫助管理任務(wù)、項(xiàng)目進(jìn)度等等。