javascript - HighCharts 中 xAxis 上具有负值和类别的柱形图

Question

好吧，我在网络应用程序中使用 highcharts。这是在柱形图中显示人口统计数据的任务，如图像所示:

我现在只有下一个例子:http://jsfiddle.net/futw5e8k/1/

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: 'Total fruit consumtion, grouped by gender'
},

xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
    offset: -150
},

yAxis: {
    allowDecimals: false,
    title: {
        text: 'Number of fruits'
    }
},

tooltip: {
    formatter: function () {
        return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
    }
},

plotOptions: {
    column: {
        stacking: 'normal'
    }
},

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2],
}, {
    name: 'Joe',
    data: [-3, -4, -4, -2, -5],
}]

});

目前在图表中间显示 categories 时存在一些空间问题。在我的示例中，offset 不是根据数据生成的，因此并非适用于所有情况

Answer 1

您可以使用两个 y 轴，它们将使用 top 和 height 定义位置。

演示:http://jsfiddle.net/futw5e8k/2/

Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total fruit consumtion, grouped by gender'
    },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
        offset: -150,
        lineWidth: 0,
        tickWidth: 0
    },

    yAxis: [{
        allowDecimals: false,
        title: {
            text: 'Number of fruits',
            y: 100,
            x: -10
        },
        top: 50,
        height: 124
    },{
    		title: {
        	text: null
        },
        top: 200,
        height: 150,
        offset: 0
    }],

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },

    series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2],
    }, {
        name: 'Joe',
        yAxis: 1,
        data: [-3, -4, -4, -2, -5],
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>