Академическая мобильность

by Max Shu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 600px; margin: 0 auto"></div>

JavaScript

$(function () {
$('#container').highcharts({

	chart: {
		type: 'bar',
		// marginTop: 75,
	},

	title: {
		text: 'Международная академическая мобильность студентов, преподавателей и научных сотрудников НИУ ВШЭ',
        align: 'left'
	},
    subtitle: {
        text: 'Показана численность студентов ВШЭ, обучавшихся в зарубежных университетах, научно-педагогических работников, проходивших там стажировку (повышавших квалификацию), и иностранных студентов, обучавшихся в ВШЭ',
        align: 'left'
     },

	xAxis: {
		reversed: false,
		categories: ['09/10', '10/11', '11/12', '12/13', '13/14'],
        tickLength: 5,
	},

	yAxis: {
		reversedStacks: false,
		tickInterval: 200,
		title: {
			text: ''
		},
		stackLabels: {
			enabled: true,
			style: {
				color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray',
				fontWeight: 'normal',
			},
			formatter: function() {
				var flag = 1;
				var allSeries = this.axis.series;
				var allValues = '';
				for(var s in allSeries) {
					if (allSeries[s].visible && allSeries[s].stackKey == ('bar' + this.stack)) {
						allValues +=  ( flag ? '' : ' · ');
						flag = 0;
						allValues +=  '<span style="color: '+ allSeries[s].color + '">' + Highcharts.numberFormat(allSeries[s].yData[this.x], 0, ",", " ") + '</span>';
					}
				}
				return allValues;
			}
}
	},

	tooltip: {
		formatter: function () {
			var stackKey = this.series.stackKey;
			stackKey = stackKey.replace(/^bar/, '');
			return stackKey + '<br/><span style="color:' + this.series.color + '">' +
			this.series.name + ': ' + this.y + '</span><br/>';
		}
	},

	plotOptions: {
		bar: {
			stacking: 'normal'
		}
	},

	series: [
		{
			name: 'Иностранные студенты, краткосрочная мобильность',
			data: [66, 161, 212, 181, 190],
			stack: 'Иностранные студенты',
            color: '#EB4146'
		}, {
			name: 'Иностранные студенты, долгосрочная мобильность',
			data: [54, 95, 119, 194, 178],
			stack: 'Иностранные студенты',
            color: '#F38D90'
		},...