Balken-Diagramme im Web-Design

• Do, 26. April 2007,
• 844 Wörter,
• 14 Kommentare,
• Tags:
• Diagramme,
• Tutorial,
• Webstandards

Reine Neu­gier, ein ent­ste­hen­der Ein­trag zu WoW und viele schlechte fremde Bei­spiele, sind Grund für das fol­gende kleine Tuto­rial. Dia­gramme im Web redu­zie­ren sich zu 90% auf hübsch gemachte Bild-Daten. Meist hoch­kom­pro­mierte Jpegs aus höchst­kom­pli­zier­ten Excel-Diagrammen. Sol­che Daten sind zum einen lang­wei­lig und zum ande­ren nicht wirk­lich barie­re­frei zugäng­lich. Das möchte ich nun hier­mit ändern.

Ich gebe zu, dass ich hier mit dem Titel Dia­gramme einen Bruch­teil aller mög­li­chen Diagramm-Arten ver­ar­beite: Bal­ken­dia­gramme. Der Grund ist sim­pel. Zum einen deckt man mit die­ser Art fast alle mög­li­chen dar­zu­stel­len­den Daten ab und diese Art eig­net sich per­fekt, um sie ein­fach, sau­ber und den­noch ansehn­lich mit HTML und CSS dar­zu­stel­len.

Struk­tur

Die erste wich­tige Frage lau­tet, wie baue ich ein Balken-Diagramm inhalt­lich kor­rekt, zugäng­lich und valide auf, um es anschlie­ßend mög­lichst varia­bel mit CSS zu sty­len?

Optisch sehr gelun­gen sind für mei­nen Geschmack, Dia­gramme auf den Produkt-Seiten von Apple. Ein Augen­schmauß, der seine Schwä­chen im HTML ver­steckt. Neh­men wir die­ses Bei­spiel. Wer in den Quell­code schaut, ent­deckt Gutes und Schlech­tes. Apple’s Web­de­si­gner struk­tu­rie­ren hier aus­la­dend mit Div- und span-Elementen inner­halb einer Definitions-Liste. Andere Lösun­gen für Dia­gramme setz­ten eben­falls auf kom­pli­zierte Span-Div-Gebilde oder auch die immer belieb­ten nor­ma­len Lis­ten.

Bei­spiel für die Anwen­dung von Dia­gram­men im Web: Apple Pro­duk­seite zum Mac­Pro

Wer hier öfters liest, wird mit­be­kom­men haben, dass ich immer für mög­lichst ein­fa­che und effek­tive Lösun­gen bin. Zwar ist mein Bei­spiel sicher­lich schon zu ein­fach, aber es zeigt hof­fent­lich die grund­le­gende Her­an­ge­hens­weise. Meine Wahl für die HTML-Struktur eines sol­chen Dia­gramms fällt wie auch bei Apple auf eine Definitions-Liste.

Frag­lich ist, ob eine sol­che Liste inhat­lich auch kor­rekt für diese Art der Daten ist. Für mei­nen Geschmack ist es das geeig­netste Ele­ment zur Dar­stel­lung von Diagramm-Daten. Inhat­lich hat man einen Namen samt Wert und diese Zuord­nung ist auch vom W3C aus­drück­lich gestat­tet.

Defi­ni­tion lists vary only slightly from other types of lists in that list items con­sist of two parts: a term and a descrip­tion. The term is given by the DT ele­ment and is restric­ted to inline con­tent. The descrip­tion is given with a DD ele­ment that con­tains block-level con­tent.

[…]

Ano­ther app­li­ca­tion of DL, for example, is for mar­king up dia­lo­gues, with each DT naming a speaker, and each DD con­tai­ning his or her words.

Solch eine Defi­ni­ti­ons­liste hat zwei wesent­li­che Vor­teile: sie bie­tet sowohl von in Struk­tur als auch vom Inhalt, zwei zusam­men­ge­hö­rige Tags: dt und dd. Für ein sol­ches Bal­ken­dia­gramm des­halb per­fekt geeig­net, um jeweils den Namen und Wert der dar­zu­stel­len­den Daten zu tra­gen.

<dl class="data-1">
<dt>Wert 1</dt>
<dd>46%</dd>

<dt>Wert 2</dt>
<dd>24%</dd>

<dt>Wert 3</dt>
<dd>89%</dd>

<dt>Wert 4</dt>
<dd>62%</dd>

<dt>Wert 5</dt>
<dd>29%</dd>
</dl>

Viel ein­fa­cher kann man sol­che Daten sicher­lich nicht mit HTML umset­zen. Mit solch einer Struk­tur habe ich erst­mal alles was ich brau­che: eine dl-Liste samt einer Klasse und jeweils pas­sen­den dl- und dd-Tags. Spans und Divs sind erst­mal über­flüs­sig, was nicht über­flüs­sig ist, sind noch ein paar zusätz­li­che style-Definitionen inner­halb der dd-Tags, da diese spä­ter den eigent­li­chen Bal­ken dar­stel­len sol­len.

<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>
</dl>

Ein so ein­fa­che Stuk­tur lässt sich beson­ders auch ohne CSS ohne Bil­der oder sons­ti­ges sinn­voll aus­wer­ten, jeder Wert besitzt eine eigene Angabe. Wir nen­nen sowas barie­re­frei. Diese Infor­ma­tio­nen funk­tio­nie­ren schon jetzt, was fehlt ist nur noch eine bes­sere Visua­li­sie­rung. Hier kommt wie immer CSS ins Spiel.

CSS

Auch das CSS ist wirk­lich ein­fach gestrikt. Ich defi­niere eine Breite für das DL-Tag, floate anschlie­ßend sowohl dt- als auch dd-Tags, lasse dt-Tag den Float clea­ren und ver­passe bei­den dann etwas Farbe und Kante. Zur bes­se­ren Über­sicht hier jeweils nur die wich­tigs­ten CSS-Zeilen:

dl.data-1 {
margin:20px 20px 10px 20px;
overflow:auto;
}
dl.data-1 dt {
border-right:0;
height:18px;
clear:left;
float:left;
text-align:center;
width:15%;
}
dl.data-1 dd {
text-align:center;
font-weight:bold;
float:left;
clear:none;
height:18px;
}

Da ent­steht nun ein klei­nes Pro­blem, sofern ich mein dt-Tag direkt neben dem dd- floa­ten möchte. Das dt-Tag braucht zum Floa­ten eine feste Breite, die dd-Tags dane­ben varie­ren aber in der Breite, durch die inline-style-Definitionen aus dem Schritt zuvor. Es gilt nun eine Lösung zu fin­den, die dem dt-Tag eine fixe Breite ermög­licht, ohne jedoch über die 100% der Gesamt­breite der Liste zu stos­sen. Ange­nom­men ich gebe den dt-Tags eine feste Breite von 20%, dann habe ich ein Pro­blem mit dem 3ten Wert im Dia­gramm, wel­ches eine Breite von 89% dar­stel­len soll. 20% + 89% = 109%. Ups.

An die­ser Stelle lobe ich mir, dass zumin­des­tens ein paar Dinge aus dem guten alten furcht­ba­ren Mathematik-Unterricht hän­gen geblie­ben sind. Die Lösung besteht darin, der style-Breite den Wert der dt-Breite abzu­zie­hen und schon kom­men wir wie­der auf die maxi­ma­len 100%. Ange­nom­men ich möchte dem dt-Tag eine Breite von 15% geben, dann ändern sich die style-Werte wie folgt:

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

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

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

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

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

dt- und dd-Tag besit­zen nun zusam­men die end­gül­tige Breite, des dar­zu­stel­len­den Wer­tes. Der Rest ist ein klei­ner farb­li­cher Anstrich.

Bei­spiel Dia­gramm

Wert 1

46%

Wert 2

24%

Wert 3

89%

Wert 4

62%

Wert 5

29%

Zuge­ge­ben die­ses Dia­gramm besitzt ein paar Ein­schrän­kun­gen, die in einem zwei­ten Teil hierzu behan­delt wer­den. Was ich hier zei­gen wollte war die Ein­fach­heit von Balken-Diagrammen mit vali­dem HTML und CSS, ohne auf­ge­blähte Struk­tur oder gar Gra­fi­ken. Das Thema bie­tet noch viel mehr… des­halb bis zum zwei­ten Teil.

Zum gleichen Thema

• Stolpersteine bei Grundrastern für WebseitenWeb Design

• 1024.3 - Chaos in EchtzeitFundstücke

• Lightbox-Skript bei AJAX-InhaltenFundstücke

• PNG TrainingTutorials

• Tutorial zur individuellen Gestaltung von Wordpress-EinträgenCSS

• Klassenverteilung bei World of Warcraft - Juli 2008World of Warcraft

• Balken-Diagramme im Web-Design 2.0CSS