2012-08-30 8 views
5

Ich versuche, die Daten am unteren Rand meiner Grafik so zu drehen, dass sie vertikal oder horizontal erscheinen. Ich verwende flot-tickrotor, aber es scheint nicht richtig zu funktionieren.Flottichetiketten drehen

xaxis: { 
    rotateTicks: 110, 
    mode: "time", 
    timeformat: "%m/%d", 
    minTickSize: [7, "day"], 
    ticks: cpudatearray 
} 

Das Endergebnis ist nicht korrekt, es scheint alles durcheinander. enter image description here

+0

Irgendwelche Ideen für eine Lösung dafür? – Blake

Antwort

9

Vielleicht haben Sie mehr Glück haben nur diese mit CSS Handhabung stattdessen die Stecker der Verwendung in:

#flotPlaceholder div.xAxis div.tickLabel 
{  
    transform: rotate(-90deg); 
    -ms-transform:rotate(-90deg); /* IE 9 */ 
    -moz-transform:rotate(-90deg); /* Firefox */ 
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */ 
    -o-transform:rotate(-90deg); /* Opera */ 
    /*rotation-point:50% 50%;*/ /* CSS3 */ 
    /*rotation:270deg;*/ /* CSS3 */ 
} 

Offensichtlich den Winkel ändern, um was auch immer es ist, Sie zu erreichen versuchen. Wenn Sie dies für die Y-Achse verwenden möchten, ändern Sie einfach den div.xAxis Selektor.

Ergebnis nach der Prüfung in meiner eigenen flechten Graph: enter image description here

+0

Danke für die Antworten - Die Diagramme müssen im IE8 angezeigt werden, also glaube ich nicht, dass das funktionieren wird. – Blake

+3

Für ältere IE-Versionen könnten Sie versuchen, 'filter: progid: DXImageTransform.Microsoft.BasicImage (rotation = 3);' (oder möglicherweise '-ms-filter:') zu verwenden. Siehe [Antwort] (http://stackoverflow.com/questions/9051030/roting-text-with-css-and-ie) und diese [MS-Referenz] (http://msdn.microsoft.com/en -us/library/ms532918.aspx) –

+0

Eine andere Option wäre das Laden von [jqueryrotate] (http://code.google.com/p/jqueryrotate/) und nachdem die Flotation abgeschlossen ist, können Sie '$ (# flotPlaceholder div.xAxis div.tickLabel "). rotiere (270)'. Beachten Sie, dass ich dieses Paket nicht verwendet habe, und seine Dokumentation besagt, dass nur die neuere Version 3 das Drehen aller Elementtypen unterstützt. Ältere Versionen funktionieren anscheinend nur mit Bildern. Nur eine andere Option, die ich überfiel, schien interessant. –

1

@ Brendan Antwort sieht aus wie könnte es ziemlich gut funktionieren, aber bevor Sie das umsetzen, würde ich prüfen, ob dies etwas, das Sie wirklich tun wollen aus eine Usability-Perspektive.

Wenn die maximale Textlänge, die Sie anzeigen, 5 Zeichen beträgt (aus Ihrer Frage, eine 'MM DD' Zeichenfolge), wären Ihre Diagramme wahrscheinlich leichter zu lesen, wenn Sie nur jeden dritten 'Tick' (oder aber viele machen Sinn für Ihre Daten).

Ich habe eine ähnliche Übung mit meinen Charts in einer Dashboard-ähnlichen Anwendung durchgeführt. Die Benutzer bestanden darauf, dass sie für jedes Ergebnis ein X-Label benötigten, aber da das Diagramm 96 Ticks aufwies, erzeugte dies ziemlich viel Text, nachdem ich sie um 90 Grad gedreht hatte, so wie Sie es versuchen. Als ich ihnen für jeden sechsten Punkt ein Modell mit einem horizontalen X-Label zeigte, bevorzugten sie diese Option, und das war es, was wir für die gelieferte Lösung taten. (Your Mileage May Vary ..)

+0

Ich stimme Ihnen mit einer Präferenz für die Abstände der Etiketten zu, wie Sie sehen, ist der Fall für meine Handlung mit Etiketten alle 3 Monate (das ist in der Produktion, obwohl ohne die Rotation). Allerdings ist diese Design-Wahl bis @ Blake-Adams. Vielleicht hat er andere Gründe für die Rotation. Oder vielleicht müssen die Benutzer nur die gedrehte Version neben der gespreizten Version sehen, um zu entscheiden, dass sie es auch besser mögen;) –

+0

Einverstanden. Meine Absicht war nicht zu implizieren, dass Ihre Lösung falsch war (sie beantwortet die Frage doch). Ich wollte nur eine Design-Überlegung hervorheben, an die @ blake-adams vielleicht nicht gedacht hat (da ich eine sehr ähnliche Grafik hatte). –