JS甘特圖 JQuery.Gantt

JS甘特圖 JQuery.Gantt

JQuery.Gantt是一個開源的基於JQuery庫的用於實現甘特圖效果的可擴充功能的JS組件庫。它既可以圖形化行程安排，也可以展示資料分布。

本人在原有基礎上，修改了部分代碼，較原有功能外，主要改進為：

1、修正“某一條資料為空白時原有的代碼js會報錯的問題”。

2、修正“ie顯示時進度條會閃爍的問題”。

3、json的資料不再為new Date(時間戳記)的形式，直接為時間戳記

 

頁面展示為：

其中，框1為上下翻頁，框2表示滾動到目前時間，框3為捲軸和滾動按鈕，框4為顯示粒度切換。

代碼引入：

 

注意若你引入的jquery為1.9+，則需要引入js/jquery-migrate-1.2.1.min.js，因為jquery1.9+取消了對$.browser的支援，若不引入升級包，則js運行出錯

 

產生圖表的js代碼如下：

 

$('選取器').gantt({source: source,//顯示的資料，見下面分析navigate: scroll,//顯示成scroll還是buttonsmonths: [January, February, March, April, May, June, July, August, September, October, November, December],//月份顯示的語言dow: [S, M, T, W, T, F, S],//星期顯示的語言scale: weeks,//預設顯示的粒度maxScale: months,//最大顯示的粒度minScale: days,//最小顯示的粒度itemsPerPage: 18,//每頁顯示的數目onItemClick: function(data) {//進度條顯示的單擊事件,data參見source定義//alert(Item clicked - show some details + data);},onAddClick: function(dt, rowId) {//圖表空白處的單擊事件},onRender: function() {//渲染時的事件}});

上面source表示資料來源，其格式如下：

 

 

source:[{        name:Example,//一行的標題        desc:Something,//某行的描述        values:[{from:1333411200000,//起始時間，13位時間戳記,這裡不同於原版/Date(1333411200000)/to:1328832000000,//終止時間，13位時間戳記,這裡不同於原版/Date(1333411200000)/desc:Something,//描述 www.bkjia.comlabel:Example Value,//顯示在進度條上的標籤customClass:ganttRed,//顯示的顏色，基本上都是gantt+顏色名詞dataObj: dataObj//onclick等事件傳入的資料對象}]}]

 

其他的參數可參考[1]