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 set：http://jsfiddle.net/LCYwW/6/

Answer 2

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

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

这保留了图表的其他行为，例如标签的对齐方式。另请参阅此question。

Answer 3

在图表中添加marginLeft属性对我来说就像一个魅力。

chart: {
  type: 'bar',
  marginLeft: 200
}, ...

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

3 个答案: