jQuery flot: Balkendiagramm mit sehr langen Achsenbeschriftungen

Question

Ich versuche ein Balkendiagramm mit dem jQuery-plugin flot zu implementieren. Ich muss Labels anstelle von Zahlen auf der X-Achse zeigen, und diese Labels können sehr lang sein.

Ich bin in der Lage, die Etiketten mit Hilfe von CSS zu drehen, so dass sie sich nicht überlappen:

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

jedoch mit dieser Lösung, die ich einen unestetical leeren Raum zwischen der y-Achse und den Etiketten erhalten. Siehe http://jsfiddle.net/QQkfy/2/

Dies ist wahrscheinlich, weil die Beschriftung ursprünglich (d. H. Vor-CSS-Modifikationen) unter den Balken zentriert sind. Irgendwelche Ideen, wie könnte ich dieses Problem überwinden?

Answer 1

Versuchen Sie, die labelWidth für die x-Achse zu ändern. Du die Flots Dokumentation: https://github.com/flot/flot/blob/master/API.md

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

Answer 2

, wenn Sie das y-Achse Etikett Problem beheben wollen und wollen nicht x-Achse Etikett umwickelt, CSS Stil white-space: nowrap; helfen haben.

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