使用jQuery.Gantt实现任务甘特图

由于项目需要，要以甘特图的形式来体现任务的完成进度，所以我从网上下载了了jQuery.Gantt的源码，并在此基础上做了部分修改以满足项目需求。

下面是最终实现效果：
一：
首先我们拿到源码以后，把CSS、img、JS等资源放入我们自己的项目中，然后在具体的页面引用需要的资源：
css样式引用：

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

< js脚本引用：

     <script src="js/jquery-2.1.4.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/jquery.fn.gantt.js" charset ="GB2312">></script>
     <script src="js/prettify.min.js"></script>

为了防止中文乱码，引用js文件的时候上charset特性并设置为GB2312。

最后在需要展现甘特图的地方加上以下div：

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

展示的时候可以给甘特图套上一个div：

<div class="gantt_ot" style="width:800px; margin:100px auto;">
    <div class="gantt"></div>
 </div>

长宽根据实际情况来定；

下面是具体显示的js：

   $(document).ready(function() {
   $.ajax({
	url : contextPath + "/pro/ganttChart/", //请求后台，并返回甘特图需要的json数据
	type : "post",
	data : "proId=" + proId,
	dataType : "JSON",
	cache : false, //关闭AJAX缓存
	success : function(data) {

		//初始化gantt
		$(".gant