30
12/2014
JS甘特图 JQuery.Gantt
JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排，也可以展示数据分布。
本人在原有基础上，修改了部分代码，较原有功能外，主要改进为：
1、修正“某一条数据为空时原有的代码js会报错的问题”。
2、修正“ie显示时进度条会闪烁的问题”。
3、json的数据不再为new Date(时间戳)的形式，直接为时间戳
下载地址为：http://download.csdn.net/detail/wangshaner1/8314349
页面展示为：
其中，框1为上下翻页，框2表示滚动到当前时间，框3为滚动条和滚动按钮，框4为显示粒度切换。
代码引入：
<link rel="stylesheet" href="css/style.css" /> <!--包中未包含jquery，你需要自行下载最新版的--> <script src="js/jquery-1.7.min.js"></script> <script src="js/jquery.fn.gantt.js"></script> <!--若为jquery1.9以上，还需要引入--> <script src="js/jquery-migrate-1.2.1.min.js"></script>
注意若你引入的jquery为1.9+，则需要引入js/jquery-migrate-1.2.1.min.js，因为jquery1.9+取消了对$.browser的支持，若不引入升级包，则js运行出错
产生图表的js代码如下：
$('选择器').gantt({
source: source, //显示的数据，见下面分析
navigate: "scroll", //显示成scroll还是buttons
months: ["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", //描述
label:"Example Value", //显示在进度条上的标签
customClass:"ganttRed", //显示的颜色，基本上都是gantt+"颜色名词"
dataObj: dataObj //onclick等事件传入的数据对象
}]
}
]其他的参数可参考[1]
参考：
[1] http://www.cnblogs.com/liusuqi/archive/2013/06/09/3129293.html，JQuery.Gantt（甘特图） 开发指南
转载请注明：康瑞部落 » JS甘特图 JQuery.Gantt
0 条评论