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?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen Sie, die labelWidth für die x-Achse.
Se die Flots Dokumentation: https://github.com/flot/flot/blob/master/API.md
wenn Sie möchten, zu beheben, der y-Achse Beschriftung der Ausgabe und wollen nicht zu haben, x-Achse Beschriftung gewickelt, css-Stil
white-space: nowrap;
helfen.Sehen http://jsfiddle.net/vincentwang/Y4KTT/