高级时间线图 | JShare

/**
 * This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock. 
 * It also shows custom graphics drawn in the chart area on chart load.
 */
/**
 * Fires on chart load, called from the chart.events.load option.
 */
function onChartLoad() {
	var centerX = 140,
		centerY = 110,
		path = [],
		angle,
		radius,
		badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
		spike;
	if (this.chartWidth < 530) {
		return;
	}
	// Draw the spiked disc
	for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
		radius = spike ? 80 : 70;
		path.push(
			'L',
			centerX + radius * Math.cos(angle),
			centerY + radius * Math.sin(angle)
		);
		spike = !spike;
	}
	path[0] = 'M';
	path.push('z');
	this.renderer.path(path)
		.attr({
		fill: badgeColor,
		zIndex: 6
	})
		.add();
	// Employee image overlay
	var empImage = this.renderer.path(path)
	.attr({
		zIndex: 7,
		opacity: 0,
		stroke: badgeColor,
		'stroke-width': 1
	})
	.add();
	// Big 5
	var big5 = this.renderer.text('5')
	.attr({
		zIndex: 6
	})
	.css({
		color: 'white',
		fontSize: '100px',
		fontStyle: 'italic',
		fontFamily: "'Brush Script MT', sans-serif"
	})
	.add();
	big5.attr({ 
		x: centerX - big5.getBBox().width / 2,
		y: centerY + 14
	});
	// Draw the label
	var label = this.renderer.text('Highcharts 周年')
	.attr({
		zIndex: 6
	})
	.css({
		color: '#FFFFFF'
	})
	.add()
	var left = centerX - label.getBBox().width / 2,
		right = centerX + label.getBBox().width / 2;
	label.attr({
		x: left,
		y: centerY + 44
	});
	// The band
	left = centerX - 90;
	right = centerX + 90;
	this.renderer.path([
		'M', left, centerY + 30,
		'L', right, centerY + 30,
		right, centerY + 50,
		left, centerY + 50,
		'z',
		'M', left, centerY + 40,
		'L', left - 20, centerY + 40,
		left - 10, centerY + 50,
		left - 20, centerY + 60,
		left + 10, centerY + 60,
		left, centerY + 50,
		left + 10, centerY + 60,
		left + 10, centerY + 50,
		left, centerY + 50,
		'z',
		'M', right, centerY + 40,
		'L', right + 20, centerY + 40,
		right + 10, centerY + 50,
		right + 20, centerY + 60,
		right - 10, centerY + 60,
		right, centerY + 50,
		right - 10, centerY + 60,
		right - 10, centerY + 50,
		right, centerY + 50,
		'z',
	])
		.attr({
		fill: badgeColor,
		stroke: '#FFFFFF',
		'stroke-width': 1,
		zIndex: 5
	})
		.add();
	// 2009-2014
	var years = this.renderer.text('2009-2014')
	.attr({
		zIndex: 6
	})
	.css({
		color: '#FFFFFF',
		fontStyle: 'italic',
		fontSize: '10px'
	})
	.add();
	years.attr({
		x: centerX - years.getBBox().width / 2,
		y: centerY + 62
	});
	// Prepare mouseover
	var renderer = this.renderer;
	if (renderer.defs) { // is SVG
		console.log('isSVG')
		Highcharts.each(this.get('employees').points, function (i, point) {
			console.log(i, point)
			if (point.image) {
				var pattern = renderer.createElement('pattern').attr({
					id: 'pattern-' + point.image,
					patternUnits: 'userSpaceOnUse',
					width: 400,
					height: 400
				}).add(renderer.defs);
				renderer.image(
					//'http://www.highcharts.com/joomla/components/com_about/assets/images/' + point.image + '.jpg',
					'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
					centerX - 80,
					centerY - 80,
					160,
					213
				).add(pattern);
				Highcharts.addEvent(point, 'mouseOver', function () {
					empImage.attr({
						fill: 'url(#pattern-' + point.image + ')'
					})
						.animate({ opacity: 1 }, { duration : 500 })
				});
				Highcharts.addEvent(point, 'mouseOut', function () {
					empImage.animate({ opacity: 0 }, { duration : 500 });
				});
			}
		});
	}    
}
var options = {
	chart: {
		events: {
			load: onChartLoad
		}
	},        
	xAxis: {
		type: 'datetime',
		minTickInterval: 365 * 24 * 36e5,
		labels: {
			align: 'left'
		},
		plotBands: [{
			from: Date.UTC(2009, 10, 27),
			to: Date.UTC(2010, 11, 1),
			color: '#EFFFFF',
			label: {
				text: '<em>办事处:</em><br> Torstein的地下室',
				style: {
					color: '#999999'
				},
				y: 180
			}
		}, {
			from: Date.UTC(2010, 11, 1),
			to: Date.UTC(2013, 9, 1),
			color: '#FFFFEF',
			label: {
				text: '<em>办事处:</em><br> Tomtebu',
				style: {
					color: '#999999'
				},
				y: 30
			}
		}, {
			from: Date.UTC(2013, 9, 1),
			to: Date.UTC(2014, 10, 27),
			color: '#FFEFFF',
			label: {
				text: '<em>办事处:</em><br> VikØrsta',
				style: {
					color: '#999999'
				},
				y: 30
			}
		}]
	},
	title: {
		text: 'Highsoft 公司发展历程'
	},
	tooltip: {
		style: {
			width: '250px'
		}
	},
	yAxis: [{
		max: 100,
		labels: {
			enabled: false
		},
		title: {
			text: ''
		},
		gridLineColor: 'rgba(0, 0, 0, 0.07)'
	}, {
		allowDecimals: false,
		max: 15,
		labels: {
			style: {
				color: Highcharts.getOptions().colors[2]
			}
		},
		title: {
			text: '雇员',
			style: {
				color: Highcharts.getOptions().colors[2]
			}
		},
		opposite: true,
		gridLineWidth: 0
	}],
	plotOptions: {
		series: {
			marker: {
				enabled: false,
				symbol: 'circle',
				radius: 2
			},
			fillOpacity: 0.5
		},
		flags: {
			tooltip: {
				xDateFormat: '%B %e, %Y'
			}
		}
	},
	series: [{
		type: 'line',
		id: 'google-trends',
		dashStyle: 'dash',
		name: 'Google search for <em>highcharts</em>',
		data: [{ x: 1258322400000, /* November 2009 */ y: 0}, { x: 1260961200000, y: 5}, { x: 1263639600000, y: 7}, { x: 1266188400000, y: 5}, { x: 1268740800000, y: 6}, { x: 1271368800000, y: 8}, { x: 1274004000000, y: 11}, { x: 1276639200000, y: 9}, { x: 1279274400000, y: 12}, { x: 1281952800000, y: 13}, { x: 1284588000000, y: 17}, { x: 1287223200000, y: 17}, { x: 1289858400000, y: 18}, { x: 1292497200000, y: 20}, { x: 1295175600000, y: 20}, { x: 1297724400000, y: 27}, { x: 1300276800000, y: 32}, { x: 1302904800000, y: 29}, { x: 1305540000000, y: 34}, { x: 1308175200000, y: 34}, { x: 1310810400000, y: 36}, { x: 1313488800000, y: 43}, { x: 1316124000000, y: 44}, { x: 1318759200000, y: 42}, { x: 1321394400000, y: 47}, { x: 1324033200000, y: 46}, { x: 1326711600000, y: 50}, { x: 1329303600000, y: 57}, { x: 1331899200000, y: 54}, { x: 1334527200000, y: 59}, { x: 1337162400000, y: 62}, { x: 1339797600000, y: 66}, { x: 1342432800000, y: 61}, { x: 1345111200000, y: 68}, { x: 1347746400000, y: 67}, { x: 1350381600000, y: 73}, { x: 1353016800000, y: 63}, { x: 1355655600000, y: 54}, { x: 1358334000000, y: 67}, { x: 1360882800000, y: 74}, { x: 1363435200000, y: 81}, { x: 1366063200000, y: 89}, { x: 1368698400000, y: 83}, { x: 1371333600000, y: 88}, { x: 1373968800000, y: 86}, { x: 1376647200000, y: 81}, { x: 1379282400000, y: 83}, { x: 1381917600000, y: 95}, { x: 1384552800000, y: 86}, { x: 1387191600000, y: 83}, { x: 1389870000000, y: 89}, { x: 1392418800000, y: 90}, { x: 1394971200000, y: 94}, { x: 1397599200000, y: 100}, { x: 1400234400000, y: 100}, { x: 1402869600000, y: 99}, { x: 1405504800000, y: 99}, { x: 1408183200000, y: 93}, { x: 1410818400000, y: 97}, { x: 1413453600000, y: 98}],
		tooltip: {
			xDateFormat: '%B %Y',
			valueSuffix: ' % of best month'
		}
	}, {
		name: '收入',
		id: 'revenue',
		type: 'area',
		data: [[1257033600000,2],[1259625600000,3],[1262304000000,2],[1264982400000,3],[1267401600000,4],[1270080000000,4],[1272672000000,4],[1275350400000,4],[1277942400000,5],[1280620800000,7],[1283299200000,6],[1285891200000,9],[1288569600000,10],[1291161600000,8],[1293840000000,10],[1296518400000,13],[1298937600000,15],[1301616000000,14],[1304208000000,15],[1306886400000,16],[1309478400000,22],[1312156800000,19],[1314835200000,20],[1317427200000,32],[1320105600000,34],[1322697600000,36],[1325376000000,34],[1328054400000,40],[1330560000000,37],[1333238400000,35],[1335830400000,40],[1338508800000,38],[1341100800000,39],[1343779200000,43],[1346457600000,49],[1349049600000,43],[1351728000000,54],[1354320000000,44],[1356998400000,43],[1359676800000,43],[1362096000000,52],[1364774400000,52],[1367366400000,56],[1370044800000,62],[1372636800000,66],[1375315200000,62],[1377993600000,63],[1380585600000,60],[1383264000000,60],[1385856000000,58],[1388534400000,65],[1391212800000,52],[1393632000000,72],[1396310400000,57],[1398902400000,70],[1401580800000,63],[1404172800000,65],[1406851200000,65],[1409529600000,89],[1412121600000,100]],
		tooltip: {
			xDateFormat: '%B %Y',
			valueSuffix: ' % of best month'
		}
	}, {
		yAxis: 1,
		name: 'Highsoft 员工',
		id: 'employees',
		type: 'area',
		step: 'left',
		tooltip: {
			headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
			pointFormat: '{point.name}<br><b>{point.y}</b>',
			valueSuffix: ' employees'
		},
		data: [
			{ x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein 一个人工作', image: 'Torstein' },
			{ x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe 加入', image: 'Grethe' },
			{ x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik 加入', image: null },
			{ x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert 加入', image: 'Gert' },
			{ x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde 加入', image: 'Hilde' },
			{ x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro 加入', image: 'Guro' },
			{ x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
			{ x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn 加入', image: 'AnneJorunn' },
			{ x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. 加入', image: null },
			{ x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild 加入', image: 'JonArild' },
			{ x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein 加入', image: 'Oystein' },
			{ x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane 加入', image: 'Stephane' },
			{ x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita 加入', image: 'Anita' },
			{ x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
		]
	}]
};
// Add flags for important milestones. This requires Highstock.
if (Highcharts.seriesTypes.flags) {
	options.series.push({
		type: 'flags',
		name: 'Cloud',
		color: '#333333',
		shape: 'squarepin',
		y: -80,
		data: [
			{ x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
		],
		showInLegend: false
	}, {
		type: '旗帜',
		name: 'Highmaps',
		color: '#333333',
		shape: 'squarepin',
		y: -55,
		data: [
			{ x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
		],
		showInLegend: false            
	}, {
		type: '旗帜',
		name: 'Highcharts',
		color: '#333333',
		shape: 'circlepin',
		data: [
			{ x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
			{ x: Date.UTC(2010, 6, 13), text: '从画布移植到svg呈现', title: '2.0' },
			{ x: Date.UTC(2010, 10, 23), text: '动态调整大小和缩放到文本标签', title: '2.1' },
			{ x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' },
			{ x: Date.UTC(2012, 7, 24), text: '压力表，极图和系列图', title: '2.3' },
			{ x: Date.UTC(2013, 2, 22), text: '支持多点触控，更多系列图', title: '3.0' },
			{ x: Date.UTC(2014, 3, 22), text: '3D 图, 时尚', title: '4.0' }
		],
		showInLegend: false
	}, {
		type: '旗帜',
		name: 'Events',
		color: '#333333',
		fillColor: 'rgba(255,255,255,0.8)',
		data: [
			{ x: Date.UTC(2012, 10, 1), text: 'Highsoft 在 Norway 荣获 "Entrepeneur of the Year"', title: 'Award' },
			{ x: Date.UTC(2012, 11, 25), text: 'Packt 出版社出版<em>Learning Highcharts by Example</em>. 从那时起, 许多关于Highcharts的书陆续出现.', title: 'First book' },
			{ x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
			{ x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
		],
		onSeries: 'revenue',
		showInLegend: false
	});
}
var chart = Highcharts.chart('container', options);

<div id="container" style="min-width:400px;height:400px"></div>

{"doctype":0,"resouces":"3,7,https://code.hcharts.cn/plugins/zh_cn.js","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

高级时间线图 | JShare

模板（查看所有模板）