对齐 x 轴类别 - 高图表

Question

我在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>

这是上面代码的JSFiddle。

Answer 1

使用 Black Label 的 Highcharts grouped_categories插件，您可以完成 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脚本。

---

演示

$(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>