jQuery.Gantt 功能强大的甘特图图表插件 - 文章教程

jQuery.Gantt 功能强大的甘特图图表插件

发布于 2019-07-13 字数 9205 浏览 2203 评论 0

JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库,功能包括:读取JSON数据、结果分页、对每个任务用不同颜色显示、使用一个简短的描述作为提示、标注节假日等。

jQuery.Gantt 功能强大的甘特图图表插件

jQuery的甘特图是一个简单的图表,实现甘特图功能作为一个jQuery组件。

JQuery.Gantt特点

  • Read json data
  • Paging results
  • Display different colours for each task
  • Display short description as hints
  • Mark holidays

JQuery.Gantt兼容性

jQuery.Gantt能够在下面的浏览器中运行

  • Firefox 4+
  • Chrome 13+
  • Safari 5+
  • Opera 9+
  • IE 8+

jQuery.Gantt 功能强大的甘特图图表插件

使用 JQuery.Gantt

首先我们需要将下载到的源码中的CSS、IMG、JS等资源放入我们自己的项目中,然后在我们自己的页面中引用需要的资源文件。

CSS样式文件

<link rel="stylesheet" href="css/style.css" />

JS脚本文件

<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.fn.gantt.js" charset ="GB2312"></script>
<script src="js/jquery.cookie.js"></script>

注:如果需要甘特图中显示中文,则需要在js文件引用中加上charset特性并设置为GB2312,否则中文内容将显示为乱码。

页面布局

在需要显示甘特图的地方加入以下这个div。

<div class="gantt"></div>

初始化插件

$(".selector").gantt({
    source:"ajax/data.json",
    scale:"weeks",
    minScale:"weeks",
    maxScale:"months",
    onItemClick:function(data){
            alert("Item clicked - show some details");},
    onAddClick:function(dt, rowId){
            alert("Empty space clicked - add an item!");},
    onRender:function(){
            console.log("chart rendered");
    }
});

配置参数

参数 默认值 接收类型
source null Array, String (url)
itemsPerPage 7 Number
months [“January”, “February”, “March”, “April”,
“May”, “June”, “July”, “August”,
“September”, “October”, “November”,
“December”]
Array
dow [“S”, “M”, “T”, “W”, “T”, “F”, “S”] Array
navigate “buttons” String (“buttons”,”scroll”)
scale “days” String
maxScale “months” String
minScale “hours” String
waitText “Please Wait…” String
onItemClick: function (data) { return; } 有数据范围内的点击事件
onAddClick function (dt, rowId) { return; } 无数据范围内的点击事件
onRender function () { return; } 渲染事件
useCookie false 如果需要使用cookie则需要引用JS脚本文件:
jquery.cookie.js
scrollToToday true Boolean

Source 配置

source:[{
        name:"Example",
        desc:"Lorem ipsum dolor sit amet.",
        values:[...]}]
参数 默认值 接收类型 解释
name null String 每一行最左侧的一列以粗体显示
desc null String 每一行左侧第二列
values null Array 甘特图日期范围项

Value 配置

values:[{
  to:"/Date(1328832000000)/",
  from:"/Date(1333411200000)/",
  desc:"Something",
  label:"Example Value",
  customClass:"ganttRed",
  dataObj: foo.bar[i]
}]
参数 接收类型 解释
to String (Date) 结束时间,以毫秒为换算单位
from String (Date) 开始时间,以毫秒为换算单位
desc String 鼠标悬停显示文本
label String 甘特项显示文本
customClass String 甘特项的自定义class
dataObj All 一个直接应用于甘特项的数据对象

代码说明

jquery.cookie.js

用于 cookie 管理,如果需要在甘特图中使用cookie则需要在页面中引用该js文件,否则不需要引用。

jquery.fn.gantt.js

代码结构解析

JQuery.Gantt 组件的核心脚本文件,所有的甘特图功能代码都在这个文件中。

$.fn.gantt = function (options):甘特图部件对象

基础设置项

  • cookieKey:cookie的键
  • scales:时间范围的级别
  • settings:部件设置集
    • source:数据源
    • itemsPerPage:分页的每页数据行数
    • months:列头处月份名称
    • dow:列头处星期名称
    • startPos:默认开始位置日期
    • navigate:底部导航,buttons为按钮式的,scroll为滑块式的
    • scale:甘特图每一列的时间范围
    • useCookie:是否使用cookie,如果使用需要引用jquery.cookie.js
    • maxScale:最大时间范围
    • minScale:最小时间范围
    • waitText:等待提示文本
    • onItemClick:有数据范围内点击事件
    • onAddClick:无数据范围内点击事件
    • onRender:渲染事件
    • scrollToToday:设置是否滚动到今天

选择器方法(a:元素,i:索引,m:值): $.extend($.expr[“:”], {});

  • findday:以毫秒为时间单位匹配一个指定的日期
  • findweek:以毫秒为时间单位匹配一个指定的周
  • findmonth:以毫秒为时间单位匹配一个指定的月
  • 日期原型
    • Date.prototype.getWeekId:获取weekid用于标识week的div的id特性,返回字符串,格式为dh-YYYY-WW,其中的ww是一年中的第几周
    • Date.prototype.genRepDate:按部件设置属性中scale的值获取时间范围,以秒为时间单位
    • Date.prototype.getDayOfYear:获取日期在一年中的第几天
    • Date.prototype.getWeekOfYear:获取日期在一年中的第几周
    • Date.prototype.getDaysInMonth:获取日期所在月份的天数
    • Date.prototype.hasWeek:如果日期驻留在一周的边界,返回真
    • Date.prototype.getDayForWeek:返回一周的开始日期的日期对象

Grid管理器(负责导航和渲染):core

  • elementFromPoint:获取位于指定点的最高处的元素
  • create:创建图表
  • init:初始化视图,计算行数、页数、可见的开始时间与结束时间
  • render:渲染grid
  • leftPanel:创建左侧Panel
  • dataPanel:创建右侧数据Panel
  • rightPanel:创建右侧头部Panel
  • navigation:导航
  • createProgressBar:创建进度条
  • markNow:移除”wd“class添加”today“class到当前的scale模式
  • fillData:填充图表,解析数据并填充到panel
  • navigateTo:导航到
  • navigatePage:导航到指定的页面
  • zoomInOut:变更空间轴级次(zoom)
  • mouseScroll:通过鼠标移动图表
  • wheelScroll:通过鼠标滚轮移动图表
  • sliderScroll:通过滑块控制图表
  • scrollPanel:更新滚动panel的margin
  • synchronizeScroller:同步滚动
  • repositionLabel:重新定位数据标签
  • waitToggle:切换等待

实用功能:tools

  • getMaxDate:返回最大可能的日期在scale值的标准下
  • getMinDate:返回最小可能的日期在scale值的标准下
  • parseDateRange:返回一个日期对象数组介于from和to之间,时间单位为天
  • parseTimeRange:返回一个日期对象数组介于from和to之间,时间单位为小时
  • parseWeeksRange:返回一个日期对象数组介于from和to,时间单位为周
  • parseMonthsRange:返回一个日期对象数组介于from和to,时间单位为月
  • dateDeserialize:从字符串反序列化成日期
  • genId:用日期创建ID
  • getCellSize:获取当前单元格的大小
  • getRightPanelSize:获取当前右panel的大小
  • getPageHeight:获取当前页面的高度
  • getProgressBarMargin:获取当前进度条的margin大小

选项扩展:this.each(function () {};);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论