Форма владения зданиями, 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: ''
		},

		xAxis: {
			reversed: false,
			categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014']
		},

		yAxis: {
            reversedStacks: false,
			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 '<b>' + stackKey + '</b><br/>' +
				this.series.name + ': ' + this.y + '<br/>' +
				'Всего: ' + this.point.stackTotal;
			}
		},

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

		series: [{
			name: 'Оперативное управление',
			data: [132550, 132550, 139575, 138071, 145096, 147543, 180397, 159195, 195438],
			stack: 'Учебно-лабораторные здания',
			color: '#293BA3',
		}, {
			name: 'Оперативное управление',
			data: [37345, 37345, 37345, 38162, 71232, 71232, 120668, 150592, 147757],
			stack: 'Общежития и гостиницы',
			color: '#293BA3',
			linkedTo: ':previous'
		}, {
			name: 'Оперативное управление',
			data: [15383, 22408, 31761, 64189, 57164, 67268, 81413, 117669, 121734],
			stack: 'Прочие здания',
			color: '#293BA3',
			linkedTo: ':previous'
		}, {
			name:...