Highcharts - Bar - 将X轴宽度和图表区域宽度设置为常量

Question

任何人都可以推荐一种在条形图的多个实例中将X轴设置为恒定宽度的方法吗？

看到这个jsFiddle:http: //jsfiddle.net/LCYwW/1/

第一个图表是将2个位置的数据放在单个图表中的示例.在这种情况下,Highcharts会自动调整X轴宽度以适应两个位置标签.

但是,我需要将这两个位置分隔成单独的图表,但是对于两个图表,保持相同比例的X轴与条形区域宽度.请参见示例中的图表2和3.在这种情况下,Highcharts选择的X轴宽度仅适用于单个位置,而2个图表在堆叠时不会排列.

有没有办法让各个图表保持相同的比例？我尝试设置xAxis.labels.style.width属性,它做了一些事情,但似乎没有具体的宽度.见http://jsfiddle.net/LCYwW/3/

这个例子在jsFiddle中最容易看到,但SO要求我发布代码:

 $('#containerAll').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}, {"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}, {"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Short Name', 'Much Longer Location Name']   
    }
});


$('#container1').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"58.1%","y":0.581}]
    },
        {
            name: 'Female',
            data: [{"name":"58.5%","y":0.585}]   
        }
    ],
    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

 $('#container2').highcharts({
    chart:{
        type: 'bar'
    },
    series: [
        {
        name: 'Male',
        data: [{"name":"18.1%","y":0.181}]
    },
        {
            name: 'Female',
            data: [{"name":"28.5%","y":0.285}]   
        }
    ],
    xAxis: {
        categories: ['Much Longer Location Name'],
        labels: {
            style: {
                width: 200
            }
        }
    }
});

Answer 1

如果打开useHTML,您可以更好地控制标签.

    xAxis: {
        categories: ['Short Name'],
        labels: {
            style: {
                width: '100px',
                'min-width': '100px'
            },
            useHTML : true
        }
    }

http://jsfiddle.net/LCYwW/5/

您还可能需要为yAxis设置最小值和最大值以保持数据的比例.

摆弄yAxis max套装:http://jsfiddle.net/LCYwW/6/

Answer 2

还要考虑使用chart:marginLeft属性为标签设置固定宽度:

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar',
            marginLeft: 160
        },
        // ...
    })
});

这保留了图表的其他行为,例如标签的对齐.另见这个问题.