Treemap

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: 5,
				color: '#76c44e',
				weight: '12 ЗЕ',
				comment: 'Формирование целостной картины<br>мира, фундамент высшего образования,<br>развитие кругозора',
				url: 'http://bing.com/search?q=foo'
			}, {
				name: 'Профессиональный цикл',
				value: 62,
				color: '#1d51a4',
				weight: 'около 148 ЗЕ',
				comment: 'Формирование знаний и компетенций<br>в рамках выбранного направления подготовки<br>и профиля будущей профессиональной деятельности',
				url: 'http://bing.com/search?q=foo'
			}, {
				name: 'Дополнительный профиль',
				value: 8,
				color: '#2793bc',
				weight: '20 ЗЕ',
				comment: 'Возможность расширить или дополнить<br>свои профессиональные навыки, получить<br>междисциплинарную подготовку',
				url: 'http://bing.com/search?q=foo'
			}, {
				name: 'Научно-исследовательская, проектная деятельность и практики',
				value: 20,
				color: '#eba44e',
				weight: 'не менее 48 ЗЕ',
				comment: 'Применение полученных знаний и умений на практике,<br>развитие академических или прикладных (проектных)<br>компетенций и soft skills («мягких навыков»)',
				url: 'http://bing.com/search?q=foo'
			}, {
				name: 'Государственная итоговая аттестация',
				value: 5,
				color: '#943c97',
				weight: '6–12 ЗЕ',
				comment: 'Проверка всего, чему научился.<br>Выполнение квалификационной работы<br>бакалаврского уровня',
				url: 'http://bing.com/search?q=foo'
			}, {
				name: 'Английский язык',
				value: 6,
				weight: '16 ЗЕ',
				comment: 'Сверх объема образовательной программы<br>(14 ЗЕ на 1-2 курсе + 2 ЗЕ...