Columnrange
by Max Shu
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="max-width: 800px; min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true,
marginLeft: 300
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Математика и механика', 'Информатика и вычислительная техника', 'Информационная безопасность', 'Электроника,радиоэлектроника и системы связи', 'Психологические науки', 'Экономика и управление', 'Социология и социальная работа', 'Юриспруденция', 'Политические науки и регионоведение', 'Средства массовой информации и информационно-библиотечное дело', 'Языкознание и литературоведение', 'История и археология', 'Философия,этика и религиоведение', 'Искусствознание', 'Культуроведение и социокультурные проекты', 'Изобразительное искусство и прикладные виды искусств'
]
},
tooltip: {
valueSuffix: ' 000 руб.'
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.high == this.point.low) {
return this.y == this.point.high ? this.y + ' тыс. руб.': '';
} else {
return this.y == this.point.high ? this.point.low + '–' + this.y + ' тыс. руб.': '';
}
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Стоимость обучения',
data: [
[240, 300],
[240, 330],
[240, 240],
[240, 240],
[250, 250],
[340, 650],
[280, 280],
[350, 350],
[280, 550],
[270, 330],
[270, 270],
[240, 240],
...