jQuery flot: çok uzun eksen etiketli çubuk diyagramı

Question

jQuery-plugin flot ile bir çubuk diyagramı uygulamaya çalışıyorum. X ekseninde rakamlar yerine etiketler göstermem gerekiyor ve bu etiketler çok uzun olabilir.

Onların örtüşmeyen böylece CSS kullanarak etiketleri döndürmek mümkün duyuyorum:

.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; 
} 

Ancak, y ekseni ve etiketler arasında bir unestetical boş bir alan elde Bu çözüm kullanarak. Etiketin orijinal olarak (yani ön-CSS modifikasyonları) çubukların altında ortalanmış olması muhtemeldir. Herhangi bir Fikir Bu sorunu nasıl aşabilirim?

Answer 1

x ekseninin etiketini değiştirmeyi deneyin. Se Flots belgeleri: https://github.com/flot/flot/blob/master/API.md

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

Answer 2

Eğer y ekseni etiketin Sorunu düzeltmek istiyorum ve x ekseni etiketi sarılmış olması istemiyorsanız, css stil white-space: nowrap; yardımcı olacaktır.

Bkz. http://jsfiddle.net/vincentwang/Y4KTT/