Обеспечение студентов площадями учебно-лабораторных зданий

by Max Shu

HTML

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

JavaScript

$(function () {
	$('#container').highcharts({
    plotOptions: {
        bar: {
            // stacking: 'normal',
        }
    },
    title: { text: 'Обеспечение студентов площадями учебно-лабораторных зданий' },
    subtitle: { text: 'Без учета арендованных учебно-лабораторных зданий' },

	chart: {
		type: 'bar',
		spacingRight: 100,
	},
	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 = [9.7, 9.3, 9, 8.4, 8.1, 7.4, 7.6, 7, 8.5];
				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: [11.3, 10.6, 10.2, 9.2, 8.2, 7.5, 7.3, 6.7, 8.4],
	}, {
		name: 'Нижний Новгород',
		data: [5.4, 5.3, 5.1, 6.1, 8.7, 7.2, 7.3, 7.3, 7.5],
	}, {
		name: 'Пермь',
		data: [4.6, 4.4, 4.4, 4.4, 5.4, 5.9, 5.5, 4.4, 6.3],
	}, {
		name: 'Санкт-Петербург',
		data: [12.4, 11.6, 11.6, 10.1, 9.5, 8.6, 16, 15.1, 15.9],
	},
	],
	tooltip: {
		headerFormat: '',
		pointFormat: '<span style="color:{series.color}">{series.name}: {point.y} кв. м на студента</span><br/>{point.name}'
	}
   })
});