У меня есть несколько проблем с визуализацией двух столбцов в каждой стране в диаграмме столбцов Highcharts.Выравнивать категории оси x - Highcharts
Как исправить эту проблему и показать название страны для всех столбцов?
$(function() {
function sorter(a, b) {
return a[0] - b[0];
}
$('#container').highcharts({
title: {
text: ''
},
xAxis: {
categories: [
'2013<br>Canada',
'2014E',
'2013<br>Brazil',
'2014E',
'2013<br>Russia',
'2014E',
'2013<br>China',
'2014E',
'2013<br>UK',
'2014E',
'2013<br>India',
'2014E',
'2013<br>Germany',
'2014E', ],
},
legend: {
enabled: false
},
chart: {
type: 'column'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Growth in medical premiums above rate of general inflation',
data: [10.1, 9.7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#77bbf1'
}, {
name: 'General Inflation',
data: [1.1, 1.6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#2f78b2'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 6.8, 8.2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#f47467'
}, {
name: 'General Inflation',
data: [0, 0, 6.4, 5.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#bf2e1f'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 0, 0, 3.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#5ed2a2'
}, {
name: 'General Inflation',
data: [0, 0, 0, 0, 6.7, 5.7, 0, 0, 0, 0, 0, 0, 0, 0],
color: '#108354'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 0, 0, 0, 0, 5, 5.4, 0, 0, 0, 0, 0, 0],
color: '#f9dd6e'
}, {
name: 'General Inflation',
data: [0, 0, 0, 0, 0, 0, 2.8, 2.9, 0, 0, 0, 0, 0, 0],
color: '#d7a50c'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 2.4, 3.8, 0, 0, 0, 0],
color: '#BAD272'
}, {
name: 'General Inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 2.7, 2.3, 0, 0, 0, 0],
color: '#708829'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.5, 2.3, 0, 0],
color: '#2da775'
}, {
name: 'General Inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10.9, 8.9, 0, 0],
color: '#108354'
}, {
name: 'Growth in medical premiums above rate of general inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.5, 1.2],
color: '#e14d3e'
}, {
name: 'General Inflation',
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1.6, 1.8],
color: '#bf2e1f'
}],
yAxis: {
title: {
text: 'GDP, current prices, US$ tn',
rotation: 270,
margin: 10,
x: -10
},
labels: {
formatter: function() {
return this.value + '';
}
}
},
tooltip: {
valueSuffix: ' US$ tn'
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Here is JSFiddle for the code above.
Простой дает прибегая к помощи ваш ответ. Вы это проверили? http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories – akaya