对齐 x 轴类别 - Highcharts
Align x-axis categories - Highcharts
我在 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>
使用 Black Label 的 grouped_categories Highcharts 插件,您可以完成 x 轴类别的分组。
只需更改以下内容:
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', ],
},
对此:
xAxis: {
categories: [{
name: "Canada",
categories: [ "2013", "2014E" ]
}, {
name: "Brazil",
categories: [ "2013", "2014E" ]
}, {
name: "Russia",
categories: [ "2013", "2014E" ]
}, {
name: "China",
categories: [ "2013", "2014E" ]
}, {
name: "UK",
categories: [ "2013", "2014E" ]
}, {
name: "India",
categories: [ "2013", "2014E" ]
}, {
name: "Germany",
categories: [ "2013", "2014E" ]
}],
},
此外,不要忘记包含 grouped-categories.js
script。
演示
$(function () {
function sorter(a, b) {
return a[0] - b[0];
}
$('#container').highcharts({
title: {
text: ''
},
xAxis: {
categories: [{
name: "Canada",
categories: [ "2013", "2014E" ]
}, {
name: "Brazil",
categories: [ "2013", "2014E" ]
}, {
name: "Russia",
categories: [ "2013", "2014E" ]
}, {
name: "China",
categories: [ "2013", "2014E" ]
}, {
name: "UK",
categories: [ "2013", "2014E" ]
}, {
name: "India",
categories: [ "2013", "2014E" ]
}, {
name: "Germany",
categories: [ "2013", "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>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
我在 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>
使用 Black Label 的 grouped_categories Highcharts 插件,您可以完成 x 轴类别的分组。
只需更改以下内容:
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', ],
},
对此:
xAxis: {
categories: [{
name: "Canada",
categories: [ "2013", "2014E" ]
}, {
name: "Brazil",
categories: [ "2013", "2014E" ]
}, {
name: "Russia",
categories: [ "2013", "2014E" ]
}, {
name: "China",
categories: [ "2013", "2014E" ]
}, {
name: "UK",
categories: [ "2013", "2014E" ]
}, {
name: "India",
categories: [ "2013", "2014E" ]
}, {
name: "Germany",
categories: [ "2013", "2014E" ]
}],
},
此外,不要忘记包含 grouped-categories.js
script。
演示
$(function () {
function sorter(a, b) {
return a[0] - b[0];
}
$('#container').highcharts({
title: {
text: ''
},
xAxis: {
categories: [{
name: "Canada",
categories: [ "2013", "2014E" ]
}, {
name: "Brazil",
categories: [ "2013", "2014E" ]
}, {
name: "Russia",
categories: [ "2013", "2014E" ]
}, {
name: "China",
categories: [ "2013", "2014E" ]
}, {
name: "UK",
categories: [ "2013", "2014E" ]
}, {
name: "India",
categories: [ "2013", "2014E" ]
}, {
name: "Germany",
categories: [ "2013", "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>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>