高图表 - 修复 xAxis 类别的宽度(并将它们换行)

Question

我有一个条形图，其中包含一些较长的xAxis类别（URL）。我想设置这些类别的显示区域的宽度并相应地换行。就目前而言，类别迫使我的图表区域向右走得太远。

这是我的代码：

$(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 ;                    
            }
        },

更新的小提琴。