3

谁能推荐一种将 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
            }
        }
    }
});
4

3 回答 3

13

如果打开 useHTML，您可以更好地控制标签。

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

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

您可能还必须为 yAxis 设置最小值和最大值以保持数据成比例。

摆弄 yAxis 最大设置：http: //jsfiddle.net/LCYwW/6/

于 2013-08-29T18:38:59.627 回答
5

还要考虑，使用图表：marginLeft属性为标签设置固定宽度：

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

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

于 2015-06-06T12:04:39.400 回答
0

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

chart: {
  type: 'bar',
  marginLeft: 200
}, ...
于 2018-03-08T19:39:17.627 回答