Flot - Wie mache ich die Yaxis-Label-Position in der Mitte des horizontalen Balkendiagramms?

Question

Ich habe ein Flot-Balkendiagramm mit negativen und positiven Werten, so dass ich das Diagramm wie ein Tornado-Diagramm (einige knifflige Weise) aussehen lassen kann, und dann das Problem ist, kann ich die Yaxis-Label-Position nicht in der Mitte festlegen des Diagramms. Hier

ist der Beispielcode meines Codes: http://fiddle.jshell.net/ha2egeuk/31/

Hier ist der einfache Code, den ich für sie auf der Mitte machen verwenden:

.flot-y-axis > .tickLabel{ 
    left: 277px !important; 
} 

Das Problem ist, habe ich es ist statisch. Wie man es automatisch zentriert?

Answer 1

Um die y-Achse Beschriftungen in der Leinwand zu zentrieren, Sie so etwas wie diese verwenden:

.flot-y-axis > .tickLabel{ 
    left: calc(50% - 50px) !important; 
    text-align: center !important; 
    width: 100px; // set to a size large enought for all labels ans use half of this in the calculation for the left option 
} 

Hier eine aktualisierte Geige mit den oben genannten Stilen: dass http://fiddle.jshell.net/ha2egeuk/32/

Das Problem Geige ist, dass das Diagramm nicht die volle Breite des Canvas (die auf der linken Seite des Fensters im Gegensatz zu dem Diagramm selbst beginnt) verwendet. Die Beschriftungen sind also in der Zeichenfläche zentriert, aber nicht im Diagramm.

Ich habe die Ursache für diese Diskrepanz nicht gefunden. Wenn Sie jedoch ein Diagramm haben, das die gesamte Zeichenfläche ausfüllt, funktioniert die obige Lösung.

Answer 2

Versuchen Sie dieses CSS.

.flot-y-axis > .tickLabel { left:45% !important; } 

Answer 3

In meinem Fall hatte ich nur eine Leinwand, keine zusätzlichen CSS-Klassen mit zu arbeiten.

es gelöst mit:

yaxis: { 
    tickLength: 10, 
    tickColor: '#fff' 
}