Column chart with negative values and categories on xAxis in HighCharts

问题

Well, I'm using highcharts in web app. Here is task to show Demographical data in column chart like on image :

What I have for now is just next example : 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],
}]

});

Currently is problem with displaying categories in middle of graph with some space. In my example offset isn't generated according to data, so isn't for all cases

回答1:

You could use two y axes that will have defined position using top and height.

Demo: 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>

来源：https://stackoverflow.com/questions/42552499/column-chart-with-negative-values-and-categories-on-xaxis-in-highcharts

标签

javascript

css

Highcharts