2013-08-07 3 views
8

Gibt es eine Möglichkeit, die tatsächliche Größe des Diagramms (ohne seine Beschriftungen) festzulegen?jQuery Flot: Breite des Diagramms einstellen (ohne Etiketten)

Ich habe einen Container, der 880 Pixel breit ist und ich möchte, dass das Diagramm genau darauf ausgerichtet ist und die Achsen eher herausragen. Im Moment wird natürlich Polsterung verwendet, damit die Achsen in den vorgesehenen Bereich passen.

Ich fiedelte mit festen LabelWidth Optionen und negative Ränder auf den Container angewendet, aber das brachte mich nirgends nützlich.

Antwort

6

Um die Achsen herausragen zu lassen, können Sie die labelWidth und labelHeight der Achsen (y bzw. x) auf einen negativen Wert setzen und dem Container einen Rand geben, damit draußen genügend Platz ist.

CSS:

#placeholder { 
    border 2px solid red; 
    margin: 30px; 
} 

Flot Optionen:

var options = { 
    xaxis: { labelHeight: -10 }, 
    yaxis: { labelWidth: -10 } 
} 

Es gibt immer noch eine Lücke zwischen dem Behälterrand und dem Grundstück, wie Sie in jsFiddle sehen können. Sie können dies mit der Eigenschaft minBorderMargin des Rasters steuern, aber der Plot-Rahmen wird nicht vollständig ausgeblendet. Daher sollten Sie den Raster borderWidth auf 0 oder borderColor setzen. Ich aktualisierte die jsFiddle damit.

+0

Dies scheint nur mit v0.7 zu funktionieren, die zwei Jahre alt ist. Ich brauchte nur eine Stunde, um herauszufinden, was der Unterschied zwischen deinem und meinem Code ist, bis ich merke, dass du 0,7 verwendest. :-P Aber danke, dass du mir geholfen hast; tatsächlich half 'minBorderMargin' mir, das Stück im Flotkern zu verfolgen, das für das verantwortlich ist, was ich wollte! Siehe meine Antwort. – maryisdead

+0

@maryisdead Ups, tut mir leid, ich benutze immer die Version, die von meiner Linux-Distribution bereitgestellt wird, die zufällig 0.7 ist. Wie auch immer, ich bin froh, dass es immer noch nützlich war. Es gibt kein Problem mit der Beantwortung Ihrer eigenen Frage, ganz im Gegenteil. Sie sollten es auch als akzeptiert markieren. –

+0

sprach zu bald! 'xaxis.reserveSpace' funktioniert nicht. Ich schien noch 0,7 im Cache meines Browsers zu haben. 'reserveSpace' scheint auch in 0.7 zu funktionieren, funktioniert aber nur in 0.8.1, wenn für diese spezifische Achse keine Daten vorhanden sind. Hart ausgefallen! Lösche meine Antwort ... – maryisdead