Мужчины-женщины

by Max Shu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 300px; margin: 0 auto"></div>
<p style="margin: 0px 0 0 290px;"><button id="students_switch">Количество</button></p>

JavaScript

$(function () {
	$('#container').highcharts({
	title: {text: 'Структура фонда оплаты труда в НИУ ВШЭ (план), 2015 г.'},
	chart: {
		type: 'bar',
		marginLeft: 300
	},
	title: {
		text: 'Мужчины-женщины'
	},
	subtitle: {
		text: ''
	},
	xAxis: {
		categories: ['Численность ППС, Москва', 'Численность НС, Москва', 'Численность ППС, Санкт-Петербург', 'Численность НС, Санкт-Петербург', 'Численность ППС, Нижний Новгород', 'Численность НС, Нижний Новгород', 'Численность ППС, Пермь', 'Численность НС, Пермь'],
		labels : {
			formatter: function(){
				return this.value;
			}
		}
	},
	yAxis: {
		title: {
			text: ''
		},
	},
	tooltip: {
		pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y:,.0f} чел.</b> ({point.percentage:.1f}%)<br/>',
		shared: true
	},

	plotOptions: {
		bar: {
			stacking: 'normal',
		},
		series: {
			events: {
				legendItemClick: function () {return false;}
			}
		}
	},
	series: [{
		name: 'Мужчины',
		data: [713, 265, 96, 19, 65, 2, 38, 12]
	}, {
		name: 'Женщины',
		data: [800, 246, 144, 31, 148, 3, 82, 2]
	}, {
		showInLegend: false,
		stacking: 'percent',
		name: '  В процентах',
	}],
   legend: {
       reversed: false
   },
});
});
$(function () {
    // the button action
    var $button = $('#students_switch');
    var chart = $('#container').highcharts();
    $button.click(function () {
    	var series = chart.series[2];
    	if (series.visible) {
    		series.hide();
    		$button.html('В процентах');
    	} else {
    		series.show();
    		$button.html('Количество');
    	}
    });
});