Balken-Diagramme im Web-Design 2.0

Do, 07. Januar 2010,
620 Wörter,
0 Kommentare,
Tags:
CSS,
Diagramme,
Webdesign

Das Tutorial zum Balkendiagramm gehört zu den stillen Klickfallen der Seite. Über Google kamen dann doch mehr Besucher auf die Seite, als gedacht. Ein Kommentar hat das Thema wieder aktuell werden lassen und ist für mich Anlass, das Thema mal zu überarbeiten. Ich präsentiere Balkendiagramm 2.0 oder so ähnlich.

Ich bleibe bei der HTML-Struktur. Eine Definitionsliste bietet sich hier mehr an, als eine normale Liste, die ich bei anderen Lösungen oft sehe. Es gibt allerdings vor und Nachteile, besonders mit Blick auf Internet Explorer, der jedoch schneller und schneller an Popularität verliert. Eine Definitionsliste hat den großen Vorteil gleich zwei HTML-Tags für einen Wert zu bieten. In einer normalen Liste wird zusätzlich oft mit spans-Tags gearbeitet, um mehr Struktur zu bekommen. Eine dl-Liste braucht sowas nicht. Der große Nachteil lässt sich aber nicht verschweigen. In einer dl-Liste existieren zwar zwei separate Tags, aber diese sind nicht logisch miteinander vom Rest der Liste abgetrennt. Kein Problem für moderne Browser, aber IE kommt wieder und wieder durcheinander, wenn man einzelne Elemente der Liste floatet. Wenn ich Vor- und Nachteile abwiege, bleiben klar mehr Argument für eine dl-Liste übrig. Drum ändern sich am HTML fast nichts.

“D’oh”

Der größte Makel meiner bisheringen Lösung war der Unterschied zwischen echtem Wert der Liste und Breitenwert des HTML-Elements. Wenn ein Element einen Wert von 89% darstellen soll, dann sollte es auch 89% breit sein. Alles andere ist unlogisch und war nur ein Herumarbeiten um das eigentliche Problem. Dieser Makel ist nun behoben. DD-Tags sind nun so breit, wie der Wert den sie darstellen sollen.

<dl class="data-1">
<dt>Wert 1</dt>
<dd style="width:46%;">46%</dd>

<dt>Wert 2</dt>
<dd style="width:24%;">24%</dd>

<dt>Wert 3</dt>
<dd style="width:89%;">89%</dd>

<dt>Wert 4</dt>
<dd style="width:62%;">62%</dd>

<dt>Wert 5</dt>
<dd style="width:29%;">29%</dd>

<dt>Wert 6</dt>
<dd style="width:81%;">81%</dd>

<dt>Wert 7</dt>
<dd style="width:41%;">41%</dd>

<dt>Wert 8</dt>
<dd style="width:72%;">72%</dd>

<dt>Wert 9</dt>
<dd style="width:19%;">19%</dd>

<dt>Wert 10</dt>
<dd style="width:56%;">56%</dd>
</dl>

Zweites Problem war bisher der mögliche Platz für das Label. Hier habe ich zwei Fliegen mit einer Klappe erwischt. Zum einen sind Label und Wert nun so positioniert, dass sie völlig (fast) unabhängig voneinander positioniert werden, was zum Zweiten dem Label endlos viel Platz verschafft.

Skizze Diagramm Aufbau

Die Details sind wichtig, aber es sind wenige. Label (dt) und Wert (dd) sind nun übereinander positioniert, Z-Index sei Dank. Trickreich ist nur eine Sache und zwar die Einrückung der Schrift des Labels, zwar im CSS dokumentiert, aber hier noch exlizit erwähnt. Linker Margin-Wert und Breite des dt-Elements, entsprechen summiert dem negativen linken Margin des dd-Elements. In meinem Beispiel sind es 25% (24% width + 1% margin-left). Die Prozentzahlen zeigen es schon, das Diagramm skaliert mit der Breite einer Seite mit.

Es existiert noch ein winziger Fehler, oder vielleicht sogar zwei. Border und padding des dd-Elements fügen dem Wert ein paar Pixel in der Breite hinzu, die kombiniert mit dem darzustellenden Wert, immer ein paar Pixel mehr darstellen, als eigentlich richtig wäre. Ich nenne es mal “künstlerische Freiheit” und effektiv sind es in meinem Beispiel jeweils 6 Pixel zu viel, ein Wert der zu verschmerzen ist.

CSS3

So ein Diagramm schreit förmlich nach neuen CSS3 Werkzeugen. Neue Pseudo-Selektoren lassen jeden einzelnen Wert im Diagramm adressieren, ohne zusätzliches HTML in die Liste zu schreiben. Optisch lassen sich abgerundete Ecken, wie auch Verläufe integrieren.

Solide

Schaue ich mir alle Fehler und Stärken der Lösung an, komme ich zu einem sehr soliden Ergebnis. Das HTML ist sehr sauber und entspricht der Semantik einer Definitionsliste, der Fehlerquotient liegt im Rahmen, es gibt genug Freiheiten für CSS und die Lösung skaliert relativ gut auf gängigen Browsern. Es soll nur ein Vorschlag sein, einer der sich wunderbar erweitern lässt, um seine Schwächen auszumerzen. Ideal wäre ein zusätzliches Tag im dt-Tag, um den Inhalt absolut zu positionieren, relativ zum dt-Tag. So bekommt man völlige Freiheit bei Länge der Label und Relation zum darzustellenden Wert. Lange Labels für kleine Werte sind ein Problem, dass sich so lösen lässt.

coldheat