jQuery Gantt Chart 網頁上顯示甘特圖

要展示甘特圖的時候通常都會遇到一些軟體上的問題，例如：沒有裝軟體或者是畫面太小展示出來看不清楚等等的。 jQuery Gantt Chart 是一個網頁做成就不會有電腦是沒有軟體的問題了。資料主要的數據可以使用 JSON 格式檔案還包含結果分頁、對每個任務使用不同顏色來表示、使用簡短描述作為提示、標註節日等等的功能。

使用說明：
第一步 先載入程式需要用到的檔案
//使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//載入 Gantt Chart 的主程式碼
<script src="js/jquery.fn.gantt.min.js" type="text/javascript"></script>
//載入 Gantt Chart 的樣式
 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

第二步 接下來在HTML劃出要顯示甘特圖的範圍
<div class="gantt"></div>
<div class="gantt2"></div>

第三步 使用 JavaScript 讓套件
$(function () {
  $(".gantt1").gantt({
    source: "JSON 檔案的連結"
  });
  //或者使用
  var data = [{ "name": "Step A "
    ,"desc": "→ Step B"
    ,"values":
      [{ "id"          : "b0"
        , "from"       : "/Date(1320182000000)/"
        , "to"         : "/Date(1320301600000)/"
        , "desc"       : "Id: 0<br/>Name: Step A"
        , "label"      : "Step 1"
        , "customClass": "ganttRed"
      }]
  }];
  $(".gantt2").gantt({
    source: data
  });
});

附上可修改參數

參數	說明
source	資料或資料來源
itemsPerPage	在一個頁面上顯示多少項目
months	陣列,其中包含的月份
dow	陣列,其中包含的週數
navigate	導航類型 buttons(按鈕),scroll(滾輪)
scale	初始規模 hours,days,weeks,months
maxScale	最大規模
minScale	最小規模
holidays	陣列,假期的陣列

作者網站：http://mbielanczuk.com/jquery-gantt/
檔案大小：97.4 KB (包含範例)
檔案下載：https://github.com/mbielanczuk/jQuery.Gantt/zipball/master
檔案備份：下載