Question

好吧，我在网络应用中使用高图。以下是在柱状图中显示人口统计数据的任务，如图像：

我现在所拥有的只是下一个例子：http://jsfiddle.net/futw5e8k/1/

"Album": {
      "$albumId" : {
        "$pushKey" : {
          ".read":"data.child('collaboratorsIDS').val().contains(auth.uid)"
        }
      }

目前在图形中间显示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不是根据数据生成的，因此不适用于所有情况

Answer 1

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

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

＆＃13;

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],
    }]
});

＆＃13;

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

＆＃13;

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

1 个答案: