Обеспеченность учебно-лабораторными площадями, 2006–2014 гг., кв. м на студента

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',
	},
    plotOptions: {
        bar: {
            //stacking: 'normal',
        }
    },
	title: {
		text: 'Обеспеченность учебно-лабораторными площадями, 2006–2014 гг., кв. м на студента'
	},

	subtitle: {
		text: '(приведенный контингент)'
	},

	yAxis: {
		stackLabels: {
			formatter: function() {
				var flag = 1;
				var allSeries = this.axis.series;
				var allValues = '';
				for(var s in allSeries) {
					if (allSeries[s].visible) {
						allValues +=  ( flag ? '' : ' · ');
						flag = 0;
						allValues +=  '<span style="color: '+ allSeries[s].color + '">' + Highcharts.numberFormat(allSeries[s].yData[this.x], 1, ",", " ") + '</span>';
					}
				}
				return allValues;
			}
		}
	},
	xAxis: {
		labels: {
			formatter: function() {
				var index = this.axis.categories.indexOf(this.value);
				var allSeries = this.axis.series;
				var totalAmount = 0;
				var totals = [11.5, 10.9, 10.6, 9.9, 9.3, 8.6, 9.3, 8.1, 10.3];
				var totalAmount = 0;
				for(var s in allSeries) {
					totalAmount = totals[index];
				}
				return this.value + ' <span style="fill:black;font-weight:bold">' + Highcharts.numberFormat(totalAmount, 1,',',' ') + '<span>';
			},
		},
		reversed: false,
		categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'],
	},
	series: [
	{
		name: 'Москва и область',
		data: [14.0, 13.1, 12.5, 11.1, 9.8, 9.2, 9.3, 8.0, 10.5],
	}, {
		name: 'Санкт-Петербург',
		data: [12.9, 12.0, 12.0, 10.5, 9.8, 8.9, 18.2, 17.4, 18.3],
	}, {
		name: 'Нижний Новгород',
		data: [5.4, 5.3, 5.1, 6.4, 9.0, 7.5, 7.6, 7.5, 7.8],
	}, {
		name: 'Пермь',
		data: [4.6, 4.4, 4.4, 6.1, 5.4, 5.9, 5.5, 4.4, 6.3],
	},
	].reverse(),
	tooltip: {
        shared: true,
		headerFormat: '',
		pointFormat: '<span style="color:{series.color}">{series.name}: {point.y} кв. м</span><br/>{point.name}'
	},
    legend: {
        reversed: true
    }
})
});