master

分支 (1)

管理

管理

master

gantt
/
index.html

<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/prettify.css" />
		<style type="text/css">
			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;
			}
		</style>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.fn.gantt.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/prettify.js"></script>
	</head>
	<body>
		<div class="gantt"></div>
		<script type="text/javascript">
			$(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();

				});

			});
		</script>
	</body>
</html>