java实现甘特图实例_jquery 甘特图示例源码(gantt)

【实例简介】

【实例截图】

【核心代码】

body {

font-family: Helvetica, Arial, sans-serif;

font-size: 13px;

padding: 0 0 50px 0;

}

.contain {

width: 800px;

margin: 0 auto;

}

h1 {

margin: 40px 0 20px 0;

}

h2 {

font-size: 1.5em;

padding-bottom: 3px;

border-bottom: 1px solid #DDD;

margin-top: 50px;

margin-bottom: 25px;

}

table th:first-child {

width: 150px;

}

/* Bootstrap 3.x re-reset */

.fn-gantt *,

.fn-gantt *:after,

.fn-gantt *:before {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

$(function() {

$(function() {

$(".gantt").gantt({

source: [{

name: "喜欢",

desc: "",

values: [{

from: "2014-08-07",

to: "2014-08-07 23:00:00",

label: "喜欢",

customClass: "ganttRed"

}]

}, {

name: "订单",

desc: "",

values: [{

from: "2014-08-08",

to: "2014-08-15",

label: "订单",

customClass: "ganttRed"

}]

}, {

name: "晒单",

desc: "",

values: [{

from: "2014-08-18",

to: "2014-08-18",

label: "晒单",

customClass: "ganttGreen"

}]

}, {

name: "商品",

desc: "",

values: [{

from: "2014-08-19",

to: "2014-08-22",

label: "商品",

customClass: "ganttBlue"

}]

}, {

name: "微信支付",

desc: "",

values: [{

from: "2014-08-25",

to: "2014-08-29",

label: "微信支付",

customClass: "ganttGreen"

}]

}, {

name: "消息推送",

desc: "",

values: [{

from: "2014-09-01",

to: "2014-09-05",

label: "消息推送",

customClass: "ganttBlue"

}]

}],

navigate: "scroll",

maxScale: "hours",

itemsPerPage: 10,

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

dow : ["日", "一", "二", "三", "四", "五", "六"] ,

onItemClick: function(data) {

//alert("Item clicked - show some details");

},

onAddClick: function(dt, rowId) {

//alert("Empty space clicked - add an item!");

},

onRender: function() {

//if (window.console && typeof console.log === "function") {

//console.log("chart rendered");

//}

}

});

//$(".gantt").popover({

//selector: ".bar",

//title: "I'm a popover",

//content: "And I'm the content of said popover.",

//trigger: "hover"

//});

prettyPrint();

});

});