样式模式（ CSS 设置样式） | JShare

var today = new Date(),
	day = 1000 * 60 * 60 * 24;
// Set to 00:00:00:000 today
today.setUTCHours(0);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
// THE CHART
Highcharts.ganttChart('container', {
	title: {
		text: 'Highcharts Gantt in Styled Mode'
	},
	subtitle: {
		text: 'Purely CSS-driven design'
	},
	xAxis: {
		min: today.getTime() - (2 * day),
		max: today.getTime() + (32 * day)
	},
	series: [{
		name: 'Project 1',
		data: [{
			name: 'Planning',
			id: 'planning',
			start: today.getTime(),
			end: today.getTime() + (20 * day)
		}, {
			name: 'Requirements',
			id: 'requirements',
			parent: 'planning',
			start: today.getTime(),
			end: today.getTime() + (5 * day)
		}, {
			name: 'Design',
			id: 'design',
			dependency: 'requirements',
			parent: 'planning',
			start: today.getTime() + (3 * day),
			end: today.getTime() + (20 * day)
		}, {
			name: 'Layout',
			id: 'layout',
			parent: 'design',
			start: today.getTime() + (3 * day),
			end: today.getTime() + (10 * day)
		}, {
			name: 'Graphics',
			parent: 'design',
			dependency: 'layout',
			start: today.getTime() + (10 * day),
			end: today.getTime() + (20 * day)
		}, {
			name: 'Develop',
			id: 'develop',
			start: today.getTime() + (5 * day),
			end: today.getTime() + (30 * day)
		}, {
			name: 'Create unit tests',
			id: 'unit_tests',
			dependency: 'requirements',
			parent: 'develop',
			start: today.getTime() + (5 * day),
			end: today.getTime() + (8 * day)
		}, {
			name: 'Implement',
			id: 'implement',
			dependency: 'unit_tests',
			parent: 'develop',
			start: today.getTime() + (8 * day),
			end: today.getTime() + (30 * day)
		}]
	}]
});

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

@import 'https://img.hcharts.cn/gantt/css/highcharts.css';
#container {
	max-width: 800px;
	margin: 1em auto;
}
.highcharts-treegrid-node-level-1 {
	font-size: 13px;
	font-weight: bold;
	fill: black;
}

{"doctype":0,"resouces":"107,7","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\\\":50,\\\"g\\\":[{\\\"l\\\":\\\"4\\\",\\\"m\\\":12.04954954954955,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"o\\\":\\\"HTML\\\",\\\"h\\\":\\\"editor\\\",\\\"i\\\":{\\\"name\\\":\\\"html\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]},{\\\"l\\\":\\\"4\\\",\\\"m\\\":37.22247528427304,\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\",\\\"o\\\":\\\"\\\",\\\"s\\\":0,\\\"g\\\":[{\\\"l\\\":\\\"5\\\",\\\"h\\\":\\\"editor\\\",\\\"o\\\":\\\"JavaScript\\\",\\\"i\\\":{\\\"name\\\":\\\"javascript\\\"},\\\"n\\\":\\\"0\\\",\\\"t\\\":\\\"0\\\"}]},{\\\"l\\\":\\\"4\\\",\\\"m\\\":50.72797516617742,\\\"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\\\":50,\\\"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":""}

样式模式（ CSS 设置样式） | JShare

模板（查看所有模板）