jQuery flot: diagramma a barre con etichette ad asse molto lungo

Question

Sto cercando di implementare un diagramma a barre con il flottaggio jQuery-plugin. Devo mostrare etichette anziché numeri sull'asse x e queste etichette possono essere molto lunghe.

sono in grado di ruotare le etichette utilizzando CSS, in modo che non si sovrappongano:

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

Tuttavia, usando questa soluzione ottengo uno spazio vuoto unestetical tra l'asse y e delle relative etichette. Vedi http://jsfiddle.net/QQkfy/2/

Ciò è probabilmente dovuto al fatto che l'etichetta è originariamente (ovvero le modifiche pre-CSS) centrate sotto le barre. Qualche idea come potrei superare questo problema?

Answer 1

Provare a cambiare la larghezza dell'etichetta per l'asse x. Se la documentazione Flots: https://github.com/flot/flot/blob/master/API.md

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

Answer 2

se si vuole risolvere il problema del etichetta dell'asse Y e non si vuole avere l'etichetta di asse x avvolto, css stile white-space: nowrap; aiuterà.

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