jQuery flot: Balken-Diagramm mit sehr langen Achsenbeschriftungen

Ich versuche zu implementieren ist ein Balkendiagramm mit dem jQuery-plugin flot. Ich habe zu zeigen, Etiketten anstelle von zahlen auf der x-Achse, und diese Etiketten können sehr lang sein.

Ich bin in der Lage zu drehen, die Beschriftungen mit CSS zu, 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 bekomme ich eine unestetical leeren Raum zwischen den y-Achsen und deren Beschriftungen. Sehen http://jsfiddle.net/QQkfy/2/

Dies ist wahrscheinlich, weil die label sind ursprünglich (D. H. pre-CSS-Modifikationen) mittig unter dem Balken. Irgendwelche Ideen, wie könnte ich dieses problem umgehen?

Schreibe einen Kommentar