JS甘特图 JQuery.Ganttyy
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>注意若你引入的jquery为1.9+,则需要引入js/jquery-migrate-1.2.1.min.js,因为jquery1.9+取消了对$.browser的支持,若不引入升级包,则js运行出错
产生图表的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表示数据来源,其格式如下:
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(甘特图) 开发指南
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。