Рис. 1–4
by Max Shu
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/ru/custom/ru-all-disputed.js"></script>
1
<div id="container_1" class="container">…</div>
2
<div id="container_2" class="container">…</div>
3
<div id="container_3" class="container">…</div>
4
<div id="container_4" class="container">…</div>CSS
.splash__text {margin: 3.5em 4.7em 7em 4.7em;}
.container {
height: 500px;
min-width: 310px;
width: 100%;
margin: 0 auto;
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
.scope {
font-size:24px;
font-family: 'FuturaPTWebDemi', "Helvetica Neue", Arial, sans-serif;
}
.scope, .numbers {
}
.highcharts-tooltip>span {
padding: 10px;
white-space: normal !important;
width: 400px;
}
.icon {
width: 40px;
height: 40px;
position: absolute;
left: -35px;
top: 35px;
background: url(//hse.ru/mirror/pubs/share/174245803) no-repeat;
}
.icon.gmu {background-position: -40px 0;}
.icon.build {background-position: -80px 0;}
.icon.journal {background-position: -120px 0;}
.icon.history {background-position: -160px 0;}
.icon.lang {background-position: -200px 0;}
.icon.media {background-position: -240px 0;}
.icon.mngmnt {background-position: -280px 0;}
.icon.world {background-position: -320px 0;}
.icon.polit {background-position: -360px 0;}
.icon.appmath {background-position: -400px 0;}
.icon.psycho {background-position: -440px 0;}
.icon.social {background-position: -480px 0;}
.icon.international {background-position: -520px 0;}
.icon.philos {background-position: -560px 0;}
.icon.finance {background-position: -600px 0;}
.icon.economic {background-position: -640px 0;}
.icon.jury {background-position: -680px 0;}
.icon.math {background-position: -720px 0;}
.icon.logist {background-position: -760px 0;}JavaScript
$(function () {
var regions_data_1 = [{'name_ru': 'Алтайский край','hc-key': 'ru-ga','value': 29,'field1_name': 'Количество мест','field1_value': 69252,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 237310,'field3_name': 'Место','field3_value': '38–41'}, {'name_ru': 'Амурская область','hc-key': 'ru-am','value': 24,'field1_name': 'Количество мест','field1_value': 21928,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 92225,'field3_name': 'Место','field3_value': '62–68'}, {'name_ru': 'Архангельская область','hc-key': 'ru-ar','value': 24,'field1_name': 'Количество мест','field1_value': 25685,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 108872,'field3_name': 'Место','field3_value': '62–68'}, {'name_ru': 'Астраханская область','hc-key': 'ru-as','value': 36,'field1_name': 'Количество мест','field1_value': 42901,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 118878,'field3_name': 'Место','field3_value': '14–17'}, {'name_ru': 'Белгородская область','hc-key': 'ru-bl','value': 36,'field1_name': 'Количество мест','field1_value': 59208,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 163316,'field3_name': 'Место','field3_value': '14–17'}, {'name_ru': 'Брянская область','hc-key': 'ru-br','value': 31,'field1_name': 'Количество мест','field1_value': 39503,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 125519,'field3_name': 'Место','field3_value': '31–34'}, {'name_ru': 'Владимирская область','hc-key': 'ru-vl','value': 25,'field1_name': 'Количество мест','field1_value': 34946,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 137808,'field3_name': 'Место','field3_value': '57–61'}, {'name_ru': 'Волгоградская область','hc-key': 'ru-vg','value': 28,'field1_name': 'Количество мест','field1_value': 79187,'field2_name': 'Численность населения 17–25 лет, чел.','field2_value': 279435,'field3_name': 'Место','field3_value':...