JS甘特图 JQuery.Ganttyy

标签：工具   jquery   

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库。它既可以图形化行程安排，也可以展示数据分布。

本人在原有基础上，修改了部分代码，较原有功能外，主要改进为：

1、修正“某一条数据为空时原有的代码js会报错的问题”。

2、修正“ie显示时进度条会闪烁的问题”。

3、json的数据不再为new Date(时间戳)的形式，直接为时间戳

下载地址为：待定

页面展示为：

其中，框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>

产生图表的js代码如下：

$('选择器').gantt({
<span style="white-space:pre">	</span>source: source,<span style="white-space:pre">			</span>//显示的数据，见下面分析
<span style="white-space:pre">	</span>navigate: "scroll",	//显示成scroll还是buttons
<span style="white-space:pre">	</span>months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],<span style="white-space:pre">	</span>//月份显示的语言
<span style="white-space:pre">	</span>dow: ["S", "M", "T", "W", "T", "F", "S"],<span style="white-space:pre">	</span>//星期显示的语言
<span style="white-space:pre">	</span>scale: "weeks",<span style="white-space:pre">					</span>//默认显示的粒度
<span style="white-space:pre">	</span>maxScale: "months",<span style="white-space:pre">				</span>//最大显示的粒度
<span style="white-space:pre">	</span>minScale: "days",<span style="white-space:pre">				</span>//最小显示的粒度
<span style="white-space:pre">	</span>itemsPerPage: 18,<span style="white-space:pre">				</span>//每页显示的数目
<span style="white-space:pre">	</span>onItemClick: function(data) {<span style="white-space:pre">			</span>//进度条显示的单击事件,data参见source定义
	<span style="white-space:pre">	</span>//alert("Item clicked - show some details" + data);
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>onAddClick: function(dt, rowId) {<span style="white-space:pre">		</span>//图表空白处的单击事件
						
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>onRender: function() {<span style="white-space:pre">				</span>//渲染时的事件
						
<span style="white-space:pre">	</span>}
});

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.Ganttyy

标签：工具   jquery   

原文地址：http://blog.csdn.net/kangrydotnet/article/details/42265539