Question

感谢您的帮助。我有一段时间试图让某些事情发挥作用，这让我陷入了困境。

如this jsfiddle（下面复制的代码）所示，我有一个带有非常长标签的条形图。

我希望做什么我最大化图表的标签部分，以便标签不会换行，同时减少实际数据图表的大小。

作为一个例子;在jsfiddle中，标签可能是总宽度的30％，条形数据是70％。知道我的数据后，标签将占据宽度的80％，数据将占最后的20％。

思考？谢谢，史蒂文。

$(function () {

$('#container').highcharts({
    chart: { type: 'bar' },
    xAxis: {           
        labels: {
            style: {
                "textOverflow": "none",
            }
    } ,
    categories: ['Jan is the first month of the year and if you have a problem with that', 'Feb is the second']
    },
    series: [{  data: [29.9, 71.5] }]
});
});

Answer 1

好吧，看起来我得到了我想要的东西。希望这有助于其他人。

我的关键是在图表上设置maringLeft属性：

chart: {
      type: 'bar',
      marginLeft: 460
},

这一点，以及修改宽度，＆＃39; min-width＆＃39;并在标签上使用HTML和xAxis的标签样式（条形图）

xAxis: {
        categories: ['Short Name', 'Much Longer Location Name and if it is true then cool and if you want'],
         labels: {
            style: {
                width: '400px',
                'min-width': '350px'
            },
            useHTML : true
        }
    },

谢谢，史蒂文。

Highcharts：条形图：标签宽度：nowrap

1 个答案: