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(甘特图) 开发指南


展开阅读全文
©️2020 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值