jQuery flot：带很长轴标签的条形图

Question

我试图用jQuery插件flot实现一个条形图。我必须在x轴上显示标签而不是数字，这些标签可能会很长。

我能够旋转使用CSS标签，使他们不重叠：

.flot-x-axis div.flot-tick-label { 
    /* Rotate Axis Labels */ 
    transform: translateX(50%) rotate(20deg); /* CSS3 */ 
    transform-origin: 0 0; 

    -ms-transform: translateX(50%) rotate(20deg); /* IE */ 
    -ms-transform-origin: 0 0; 

    -moz-transform: translateX(50%) rotate(20deg); /* Firefox */ 
    -moz-transform-origin: 0 0; 

    -webkit-transform: translateX(50%) rotate(20deg); /* Safari and Chrome */ 
    -webkit-transform-origin: 0 0; 

    -o-transform: translateX(50%) rotate(20deg); /* Opera */ 
    -o-transform-origin: 0 0; 
} 

然而，采用这种解决方案我得到y轴和标签之间的unestetical空的空间。请参阅http://jsfiddle.net/QQkfy/2/

这可能是因为标签最初（即CSS前修改）居中在小节下。任何想法我怎么能克服这个问题？

Answer 1

尝试更改x轴的labelWidth。 硒的弗洛文档：https://github.com/flot/flot/blob/master/API.md

xaxis: { 
    tickLength: 0, 
    ticks: ticks, 
    min: -0.5, 
    max: 6.5, 
    labelWidth: 30 
} 

Answer 2

，如果你要修复y轴标签的问题，但不希望有x轴标签包裹，CSS样式 white-space: nowrap;会有所帮助。

请参阅http://jsfiddle.net/vincentwang/Y4KTT/