"Umfragebalken" wie am besten erstellen?
 

Moin,

ihr kennt ja alle bei Umfragen diese Balken, die in % und mit passender Länge irgendwelche Ergebnisse anzeigen.

Da dies ja dynamisch erstellt wird, überlege ich mir gerade, wie ich diese Balken am besten erzeuge via CSS.

Die "simple" Variante wäre ein billiges DIV mit Farbfüllung, in das ich pro Balken direkt die Breite reinsetze, z.B.

<div style="width: 24px;>12%</div>
<div style="width: 12px;>6%</div>

Das ist allerdings alles andere als "schön".

Eine andere Methode wäre es, ein Bild zu nehmen und das entsprechend zu strecken, also

<img src="balkenbild.png" width="132" height="12" />
<img src="balkenbild.png" width="64" height="12" />

Wie würdet ihr es machen vom Markup + CSS her?

ich würde wohl ne ul nehmen.
Die li's bekommen jeweils eine andere id, mit der ich unterschiedlich gestalten kann. ;)

Die Anzahl der Antworten ist allerdings variabel. Wie willst du das dann "individuell" machen, zumal die Balkenlänge ebenso variabel ist?

dann hab ich dich falsch verstanden.
Das gehört dann wohl eher in den Scriptbereich. ;)

Was spricht denn gegen die Methode des gestreckten Bildes? Könnte doch eine kleine, einfarbige Grafik sein. Das hat den Vorteil, dass es nur ein Request benötigt, im Cache bleibt und beliebig skalierbar ist.

Dagegen spricht nix, ich sammle nur weitere Ideen ;)

Hab' gerade mal danach gesucht und bin sofort auf diesen Link gestossen: 16 Usable CSS Graph and Bar Chart Tutorials and Techniques - Speckyboy Design Magazine

Da sind ein paar Charts aufgelistet, leider funktioniert nicht mehr jeder Link, aber ich denke für ein paar Ideen reicht's. :)

Generell würde ich die Balken eher in ein Element wrappen, welches dann die Ausmaße in z.B. Pixel erhält, aber die Balken selbst per Prozentangaben ausrichten, wäre wohl deutlich schöner, wenn das Diagramm in den Ausmaßen geändert werden soll, einfach den Wrapper anpassen und fertig. :)

Merci :)

Ich würde es auch mit einer Liste versuchen. Die Innen- und Aussenabstände würde ich zurücksetzen und der Liste <ul> eine bestimmte Breite verpassen. Die einzelnen Punkte <li> sind dann jeweils mit einem Hintergrundbild bestückt und die berechneten Prozente werden als Längenangabe und Text benutzt.

Zu Beispiel:

So zumindest würde ich es machen. Ich schaue immer darauf, dass die berechneten Prozente mit den Längenangaben bei der Darstellung übereinstimmen. So erspare ich mir eine Berechnung. Ein Problem ist allerdings: Was mache ich, wenn CSS ausgeschaltet ist? Dann musst du wohl den Umweg über die Bilder machen.