使用jQueryGantt实现进度甘特图

  由于项目需要，需要做一个进度甘特图。要求使用jQueryGantt来实现，在网上看了很多博客，终于找了几篇比较有用的。但是仅仅靠这几篇文章和一个demo无法满足项目的需求，所以研究了下jQueryGantt的源码，根据项目需求进行了一些改动。由于网上对于jQueryGantt的文章较少，很多都不完整，所以特此写下这篇文章进行记录，顺便分享有需要的人。

1.jQueryGantt下载

官方演示地址：http://taitems.github.io/jQuery.Gantt
我此次使用的是Github上一位网友发布的一个版本：https://github.com/ybx13579/jQuery.Gantt
这是他写的一份指南：https://blog.csdn.net/yangbingx/article/details/73470030
非常感谢，大家喜欢的记得给他一个star。

2.运行

这里的说明并不是很详细，具体参考test1文件夹中的index.html
将css，js，img放入工程项目中，并参考test1/index.html 中的引入。

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

之后在html页面上写一个div

复制相应的js方法

JQueryGantt需要的Json数据格式

[

                {
                    name: "task1",
                    desc: "",
                    values: [{
                        from: "/Date(1320192000000)/", //这里需要的时间为毫秒
            //。计算方式为时间变量减去时间初始值（1970-1-1）的差值换算为毫秒
                          to: "/Date(1320592000000)/",
                        label: "这是label",
                        customClass: "ganttRed" //这里是这条记录的在甘特图上的颜色
                    }]
                }, {
                    name: "task2",
                    desc: "这是描述",
                    values: [{
                        from: "/Date(1322611200000)/",
                        to: "/Date(1323302400000)/",
                        label: "",
                        customClass: "ganttGreen"
                    }]
                }]

如果你是使用的Java来编写的话，我这里提供一下后台处理json数据的思路。
首先，最外层的是一个List集合。然后里面的name,desc,values使用Map进行封装。而values里面又是一个集合，所以values整个呢诶容是一个List集合。而内部的from,to,label等参数又需要使用Map以[key,value]的形式保存。所以又要封装一个Map。

灵魂画手已上线

image.png

看了看自己画的图，还是贴代码吧。。。

//SpringMvc Framwork
@RequestMapping(value = "ganttData", method = RequestMethod.POST)
    @ResponseBody
    public String ganttData(String id) throws Exception {
          //查询出需要的多条进度数据
            List scheduleDataList = scheduleMgrService.selectScheduleDataListByPid(pt);
            //用于保存整个数据集
            List