Highcharts - 修复xAxis类别的宽度（并包装它们）

Question

我有bar chart个更长的xAxis类别（网址）。我想为这些类别设置显示区域的宽度，并相应地进行换行。目前看来，这些类别迫使我的图表区域向右偏远。

这是我的代码：

$(function () {
$('#container').highcharts({
    chart:{
        type:'bar',
        height:1500
    },
    title:{text:false},
    legend:{enabled:false},
    xAxis:{
        title:{text:null},
        categories:[
            'javascript:%3B',
            'http:\/\/www.feathersflights.com\/',
            'http:\/\/www.feathersflights.com\/search\/label\/sewing101',
            'http:\/\/www.feathersflights.com\/search\/label\/You%20Flew%3A%20Sewing%20Linkup',
            'http:\/\/www.feathersflights.com\/p\/tutorials-and-past-projects.html',
            'https:\/\/www.facebook.com\/feathersflights',
            'https:\/\/twitter.com\/feathersflights',
            'http:\/\/pinterest.com\/feathersflights\/',
            'http:\/\/instagram.com\/feathersflights#',
            'https:\/\/plus.google.com\/u\/0\/101032706297651559107',
            'http:\/\/www.bloglovin.com\/blog\/2866677\/feathers-flights-a-creative-sewing',
            'mailto:feathersflights%40gmail.com',
            'http:\/\/feeds.feedburner.com\/FeathersFlights',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DHTML%26widgetId%3DHTML6%26action%3DeditWidget%26sectionId%3Dheader-right',
            'http:\/\/www.feathersflights.com\/p\/about.html',
            'http:\/\/www.feathersflights.com\/p\/cant-live-without.html',
            'http:\/\/www.feathersflights.com\/p\/sponsor.html',
            'http:\/\/feathersflights.bigcartel.com\/',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DHTML%26widgetId%3DHTML7%26action%3DeditWidget%26sectionId%3Dcrosscol',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DHTML%26widgetId%3DHTML4%26action%3DeditWidget%26sectionId%3Dsidebar-right-1',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DHTML%26widgetId%3DHTML15%26action%3DeditWidget%26sectionId%3Dsidebar-right-1',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DText%26widgetId%3DText2%26action%3DeditWidget%26sectionId%3Dsidebar-right-1',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DCustomSearch%26widgetId%3DCustomSearch1%26action%3DeditWidget%26sectionId%3Dsidebar-right-1',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DText%26widgetId%3DText3%26action%3DeditWidget%26sectionId%3Dsidebar-right-1',
            'http:\/\/www.blogger.com\/rearrange?blogID%3D7070182830087816119%26widgetType%3DFollowers%26widgetId%3DFollowers1%26action%3DeditWidget%26sectionId%3Dsidebar-right-1'
        ]
    },
    yAxis:{
        min:0,
        title:{text:"Number of Links"},
        labels:{style:{width:'1000px'}
    }
},
tooltip:{
    formatter:function() {
        return '' + this.series.name +': '+ this.y;
    }
},
plotOptions:{
    bar:{
        dataLabels:{
            enabled:1
        }
    }
},
credits:{enabled:false},
series:[
    {
        name:'Number of Links',
        data:[86,61,35,34,32,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
        color:'#F79646'
    }
]
});

}）;

链接到JSFiddle上的图表：

http://jsfiddle.net/vCrc7/1/

有什么建议吗？

Answer 1

你可以强行打破长串。例如，这会每25个字符插入一个<br/>：

        labels:{
            formatter: function(){
                var rV = '';
                var someCat = this.value;
                while (someCat .length > 0) {
                  rV += someCat.substring(0, 25) + '<br/>';
                  someCat = someCat.substring(25);
                }
                return rV ;                    
            }
        },

更新了fiddle。