首页 > 其他分享> > jQueryGantt甘特图的使用与说明（含自定义修改内容）

jQueryGantt甘特图的使用与说明（含自定义修改内容）

2021-04-01 15:29:22 作者：互联网

项目需要，在网上找了许多开源免费的甘特图资源考虑到自定义拓展和应用的难易程度最后原则了jQueryGantt甘特图，接下来就记录一下自己的使用过程。本文章主要包括以下内容：

文章目录

1.jQueryGantt下载
2.jQueryGantt的引用与说明（解决中文日期utf-8编码格式乱码问题）
3.样式的优化

1.jQueryGantt下载

这里感谢一下这位朋友的分享 JQuery.Gantt（甘特图）开发指南 , 附下载资源
我就是下载了他的资源并对test1的 js和css进行了扩展 test2的效果图也不错有兴趣的朋友可以自己扩展一下。

2.jQueryGantt的引用与说明（解决中文日期utf-8编码格式乱码问题）

js、css的引用很简单，参考test1中的index.html就可以，把js、css、img都引用到自己的项目中即可。
这里重点想说的就是中文乱码问题，上面的文章告诉我们在js文件引用中加上charset特性并设置为GB2312来解决这个问题。但是我习惯用utf-8编码，所以就事先修改原js的编码格式再进行修改：
1.首先用记事本打开jquery.fn.gantt.js；
2.另存为，选择“带有BOM的UTF-8”编码方式
在这里插入图片描述

这个方法同理可以解决各种需要转编码格式的问题。
jquery.fn.gantt.js文件中$.fn.gantt = function (options)中修改以下部分，即可显示中文月份与日期

dow: ["日", "一", "二", "三", "四", "五", "六"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],

接下来是html部分：

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

直接一个div引用，因为自己想要一个平铺布满这个屏幕的甘特图所以对于样式进行了一点点的优化，具体可参考下一部分。

引用jQueryGantt的js方法：
配合我的效果图对数据源格式进行说明
在这里插入图片描述

//初始化gantt
   $(".gantt").gantt({
   //source：甘特图数据源 
       source: [
           {
               name: "100002",
               desc: "32一体化传感器（电子式）",
               values: [{
                   from: dateFormatter("2021-03-05"), //时间单位为毫秒 但是我的数据格式都是“YYYY-MM-DD”,所以写了一个dateFormatter方法转换一下
                   to: dateFormatter("2021-03-24"),
                   label: "20",
                   customClass: "ganttRed", //甘特图数据条的颜色，有ganttRed ganttGreen ganttOrange ganttBlue（默认），可自定义在css中扩展
                   dataObj: {id:"0001"} //onItemClick方法中的data  我也是看了源码之后才知道有dataObj这个属性
               }, {
                   from: dateFormatter("2021-03-26"),
                   to: dateFormatter("2021-03-30"),
                   label: "5",
                   customClass: "ganttBlue",
                   dataObj: {id:"0002"}
               }]
           },
           {
               name: "100002",
               desc: "32一体化传感器（电子式）",
               values: [{
                   from: dateFormatter("2021-04-10"),
                   to: dateFormatter("2021-04-30"),
                   label: "21",
                   customClass: "ganttGreen",
                   dataObj: {

                   }
               }]
           }
       ],  
       navigate: 'scroll',//底部使用的是拖拽进度还是按钮：scroll和buttons
       scale: "days",// 设置默认比例，选项：months  weeks days  hours
       maxScale: "months",//最大比例，选项如上
       minScale: "days",//最小比例，选项如上
       itemsPerPage: 999,//甘特图每页的信息数量
       onItemClick: function (data) {
           console.log(data);//这里的data就是source values中的dataObj
       },
       onAddClick: function () {//无数据范围内的点击事件
           return;
       },
       onRender: function () {//渲染事件
           
       }
   });

dateFormatter方法

function dateFormatter(date) {
     var newDate = new Date(date).getTime();
     return "/Date(" + newDate + ")/";
 }

3.样式的优化

（1）甘特图数据条的颜色扩展
style.css：找到以下部分在其下面扩展自己的颜色 .fn-label为甘特图数据条上的文字

.fn-gantt .ganttOrange {
    background-color: #FCD29A;
}
.fn-gantt .ganttOrange .fn-label {
    color: #714715 !important;
}

（2）设置甘特图的最小高度并让底部条一直显示在底部
当甘特图数据很少的时候甘特图的整个div高度就很小看起来效果不太好所以想设置一个最小高度，设置好后又发现底部条显示在甘特图的底部而不是整个容器的底部所以又进行了调整
style.css：

.gantt {
    width: 100%;
    /*margin: 20px auto;*/
    border: 2px solid #ddd;
    position: relative;
    -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.gantt:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

.fn-gantt {
    width: 100%;
    min-height: 500px;
    position: relative;
}

.fn-gantt *,
.fn-gantt *:after,
.fn-gantt *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fn-gantt .fn-content {
    padding-bottom: 50px;
}

（3）左侧信息的宽度
本身的左侧的宽度太小不符合项目需求所以修改了一下
style.css：

/* === LEFT PANEL === */

.fn-gantt .leftPanel {
    float: left;
    width: 400px;
    overflow: hidden;
    border-right: 1px solid #DDD;
    position: relative;
    z-index: 20;
}

.fn-gantt .leftPanel .fn-label {
    display: inline-block;
    margin: 0 0 0 5px;
    color: #484A4D;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.fn-gantt .leftPanel .row {
    border-bottom: 1px solid #DDD;
}
.fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
    float: left;
    height: 24px;
    width: 50%;
    background-color: #f6f6f6;
}

.fn-gantt .leftPanel .name {
    font-weight: bold;
}

.fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
    width: 100%;
}

.fn-gantt .leftPanel .spacer {
    background-color: #f6f6f6;
    width: 100%;
}

最后我自己的效果图在这里插入图片描述
OK！以上就是我这次使用jQueryGantt遇到的问题及解决办法，其实有时间还是建议大家看看js源码真的让我学习到很多，最后愿我这篇文章给大家带来帮助，有什么问题欢迎留言，大家互相学习~

标签：box,自定义,jQueryGantt,甘特图,js,gantt,border,fn
来源： https://blog.csdn.net/kitty_ELF/article/details/115372372