Treemap Master's

by Max Shu

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://rawgithub.com/highslide-software/pattern-fill/master/pattern-fill.js"></script>

<div id="container"></div>

CSS

#container {
    width: 700px;
    height: 500px;
    // padding-right: 400px;
    margin: 0 auto;
}
.highcharts-container::before {
  width: 350px;
  height: 500px;
  content: '';
  background-image: url(https://dl.dropboxusercontent.com/u/527648/diplom%20cover.png);
  position: absolute;
  top: 0;
  left: 350px;
  z-index: -1;
}

JavaScript

$(function () {
	$('#container').highcharts({
		chart: {
			type: 'treemap',
			
			backgroundColor: 'transparent',
			spacingBottom: 0,
			spacingTop: 0,
			spacingLeft: 0,
			spacingRight: 350,

			width: null,
			height: null
		},

		title: {
			text: ''
		},

		series: [{
    	animation: false,
			// alternateStartingDirection: true,
			// layoutAlgorithm: 'strip',
			layoutStartingDirection: 'horizontal',
			data: [{
				name: 'Цикл дисциплин направлений',
				value: 10,
				color: '#76c44e',
				weight: 'около 12 ЗЕ',
				comment: '«Ядро» подготовки будущего профессионала',
				url: '#'
			}, {
				name: 'Цикл дисциплин программы<br>(включая специализацию), в том числе<br>дисциплина из пула Маголего',
				value: 35,
				color: '#2793bc',
				weight: 'около 48 ЗЕ',
				comment: 'Суть отдельной магистерской программы,<br>ее специфика с точки зрения формирования<br>профессиональных компетенций',
				url: 'http://www.hse.ru/org/hse/elective_courses/MG_OI',
			}, {
				name: 'Научно-исследовательская работа и практики',
				value: 50,
				color: '#eba44e',
				weight: 'около 60 ЗЕ',
				comment: 'Проведение исследований — академического<br>или прикладного формата, развитие аналитических<br>компетенций и применение теории на практике',
				url: '#'
			}, {
				name: 'Государственная итоговая аттестация',
				value: 5,
				color: '#943c97',
				weight: '6 ЗЕ',
				comment: 'Защита магистерской диссертации',
				url: '#'
			}]
		}],
		credits: {enabled: false},

		plotOptions: {
			series: {
				cursor: 'pointer',
				point: {
					events: {
						click: function () {
							location.href = this.options.url;
						}
					}
				},
				borderWidth: 0,
				dataLabels: {
					enabled: true,
					align: 'left',
					verticalAlign: 'top',
					style: {
						textShadow: 'none',
						fontWeight: 'normal',
						color: 'white',
					}
				},
			}
		},
		
		tooltip: {
			pointFormat: '<span style="color:{point.color}">{point.name}</span><br/><span...