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

這保留了圖表的其他行為，例如標簽的對齊。 另見這個問題 。

Answer 3

在圖表中添加marginLeft屬性對我來說就像一個魅力。

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