项目管理 | JShare

var today = new Date(),
	day = 1000 * 60 * 60 * 24,
	// Utility functions
	dateFormat = Highcharts.dateFormat,
	defined = Highcharts.defined,
	isObject = Highcharts.isObject,
	reduce = Highcharts.reduce;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();
Highcharts.ganttChart('container', {
	series: [{
		name: 'Offices',
		data: [{
			name: 'New offices',
			id: 'new_offices',
			owner: 'Peter'
		}, {
			name: 'Prepare office building',
			id: 'prepare_building',
			parent: 'new_offices',
			start: today - (2 * day),
			end: today + (6 * day),
			completed: {
				amount: 0.2
			},
			owner: 'Linda'
		}, {
			name: 'Inspect building',
			id: 'inspect_building',
			dependency: 'prepare_building',
			parent: 'new_offices',
			start: today + 6 * day,
			end: today + 8 * day,
			owner: 'Ivy'
		}, {
			name: 'Passed inspection',
			id: 'passed_inspection',
			dependency: 'inspect_building',
			parent: 'new_offices',
			start: today + 9.5 * day,
			milestone: true,
			owner: 'Peter'
		}, {
			name: 'Relocate',
			id: 'relocate',
			dependency: 'passed_inspection',
			parent: 'new_offices',
			owner: 'Josh'
		}, {
			name: 'Relocate staff',
			id: 'relocate_staff',
			parent: 'relocate',
			start: today + 10 * day,
			end: today + 11 * day,
			owner: 'Mark'
		}, {
			name: 'Relocate test facility',
			dependency: 'relocate_staff',
			parent: 'relocate',
			start: today + 11 * day,
			end: today + 13 * day,
			owner: 'Anne'
		}, {
			name: 'Relocate cantina',
			dependency: 'relocate_staff',
			parent: 'relocate',
			start: today + 11 * day,
			end: today + 14 * day
		}]
	}, {
		name: 'Product',
		data: [{
			name: 'New product launch',
			id: 'new_product',
			owner: 'Peter'
		}, {
			name: 'Development',
			id: 'development',
			parent: 'new_product',
			start: today - day,
			end: today + (11 * day),
			completed: {
				amount: 0.6,
				fill: '#e80'
			},
			owner: 'Susan'
		}, {
			name: 'Beta',
			id: 'beta',
			dependency: 'development',
			parent: 'new_product',
			start: today + 12.5 * day,
			milestone: true,
			owner: 'Peter'
		}, {
			name: 'Final development',
			id: 'finalize',
			dependency: 'beta',
			parent: 'new_product',
			start: today + 13 * day,
			end: today + 17 * day
		}, {
			name: 'Launch',
			dependency: 'finalize',
			parent: 'new_product',
			start: today + 17.5 * day,
			milestone: true,
			owner: 'Peter'
		}]
	}],
	tooltip: {
		pointFormatter: function () {
			var point = this,
				format = '%e. %b',
				options = point.options,
				completed = options.completed,
				amount = isObject(completed) ? completed.amount : completed,
				status = ((amount || 0) * 100) + '%',
				lines;
			lines = [{
				value: point.name,
				style: 'font-weight: bold;'
			}, {
				title: 'Start',
				value: dateFormat(format, point.start)
			}, {
				visible: !options.milestone,
				title: 'End',
				value: dateFormat(format, point.end)
			}, {
				title: 'Completed',
				value: status
			}, {
				title: 'Owner',
				value: options.owner || 'unassigned'
			}];
			return reduce(lines, function (str, line) {
				var s = '',
					style = (
						defined(line.style) ? line.style : 'font-size: 0.8em;'
					);
				if (line.visible !== false) {
					s = (
						'<span style="' + style + '">' +
						(defined(line.title) ? line.title + ': ' : '') +
						(defined(line.value) ? line.value : '') +
						'</span><br/>'
					);
				}
				return str + s;
			}, '');
		}
	},
	title: {
		text: 'Gantt Project Management'
	},
	xAxis: {
		currentDateIndicator: true,
		min: today - 3 * day,
		max: today + 18 * day
	},
	yAxis:{
		max:5,
		scrollbar:{
			enabled:true
		}
	}
});

<div id="container"></div>

#container {
	max-width: 800px;
	margin: 1em auto;
}

{"doctype":0,"resouces":"7,58,107","options":"{\"editor\":{\"saveLayout\":true,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":\"2\",\"layoutOptions\":\"{\\\"0\\\":{\\\"1\\\":\\\"0\\\",\\\"2\\\":\\\"0\\\",\\\"3\\\":\\\"1\\\",\\\"t\\\":\\\"0\\\",\\\"p\\\":\\\"1\\\",\\\"blockedPopoutsThrowError\\\":\\\"0\\\",\\\"closePopoutsOnUnload\\\":\\\"0\\\",\\\"showPopoutIcon\\\":\\\"1\\\",\\\"showMaximiseIcon\\\":\\\"0\\\",\\\"showCloseIcon\\\":\\\"1\\\",\\\"responsiveMode\\\":\\\"onload\\\",\\\"tabOverlapAllowance\\\":0,\\\"reorderOnTabMenuClick\\\":\\\"0\\\",\\\"tabControlOffset\\\":10},\\\"4\\\":{\\\"5\\\":2,\\\"6\\\":100,\\\"7\\\":300,\\\"8\\\":24,\\\"9\\\":300,\\\"u\\\":15,\\\"a\\\":200},\\\"b\\\":{\\\"c\\\":\\\"6\\\",\\\"d\\\":\\\"最大化\\\",\\\"e\\\":\\\"恢复大小\\\",\\\"f\\\":\\\"9\\\",\\\"popin\\\":\\\"pop in\\\",\\\"tabDropdown\\\":\\\"additional tabs\\\"},\\\"g\\\":[{\\\"l\\\":\\\"2\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"g\\\":[{\\\"l\\\":\\\"3\\\",\\\"m\\\":50,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"k\\\":32.30884557721139,\\\"g\\\":[{\\\"l\\\":\\\"4\\\",\\\"m\\\":11.711711711711713,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"o\\\":\\\"HTML\\\",\\\"h\\\":\\\"editor\\\",\\\"i\\\":{\\\"name\\\":\\\"html\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]},{\\\"l\\\":\\\"4\\\",\\\"m\\\":74.32432432432434,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"JavaScript\\\",\\\"i\\\":{\\\"name\\\":\\\"javascript\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]},{\\\"l\\\":\\\"4\\\",\\\"m\\\":13.963963963963966,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"CSS\\\",\\\"i\\\":{\\\"name\\\":\\\"css\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]}]},{\\\"l\\\":\\\"2\\\",\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"k\\\":67.69115442278861,\\\"g\\\":[{\\\"l\\\":\\\"4\\\",\\\"k\\\":100,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"Result\\\",\\\"i\\\":{\\\"name\\\":\\\"result\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]}]}]}],\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"q\\\":[],\\\"maximisedItemId\\\":{}}\"}}","meta":null}

项目管理 | JShare

模板（查看所有模板）