Balken-Diagramme im Web-Design
Reine Neugier, ein entstehender Eintrag zu WoW und viele schlechte fremde Beispiele, sind Grund für das folgende kleine Tutorial. Diagramme im Web reduzieren sich zu 90% auf hübsch gemachte Bild-Daten. Meist hochkompromierte Jpegs aus höchstkomplizierten Excel-Diagrammen. Solche Daten sind zum einen langweilig und zum anderen nicht wirklich barierefrei zugänglich. Das möchte ich nun hiermit ändern.
Ich gebe zu, dass ich hier mit dem Titel Diagramme einen Bruchteil aller möglichen Diagramm-Arten verarbeite: Balkendiagramme. Der Grund ist simpel. Zum einen deckt man mit dieser Art fast alle möglichen darzustellenden Daten ab und diese Art eignet sich perfekt, um sie einfach, sauber und dennoch ansehnlich mit HTML und CSS darzustellen.
Struktur
Die erste wichtige Frage lautet, wie baue ich ein Balken-Diagramm inhaltlich korrekt, zugänglich und valide auf, um es anschließend möglichst variabel mit CSS zu stylen?
Optisch sehr gelungen sind für meinen Geschmack, Diagramme auf den Produkt-Seiten von Apple. Ein Augenschmauß, der seine Schwächen im HTML versteckt. Nehmen wir dieses Beispiel. Wer in den Quellcode schaut, entdeckt Gutes und Schlechtes. Apple’s Webdesigner strukturieren hier ausladend mit Div- und span-Elementen innerhalb einer Definitions-Liste. Andere Lösungen für Diagramme setzten ebenfalls auf komplizierte Span-Div-Gebilde oder auch die immer beliebten normalen Listen.
Wer hier öfters liest, wird mitbekommen haben, dass ich immer für möglichst einfache und effektive Lösungen bin. Zwar ist mein Beispiel sicherlich schon zu einfach, aber es zeigt hoffentlich die grundlegende Herangehensweise. Meine Wahl für die HTML-Struktur eines solchen Diagramms fällt wie auch bei Apple auf eine Definitions-Liste.
Fraglich ist, ob eine solche Liste inhatlich auch korrekt für diese Art der Daten ist. Für meinen Geschmack ist es das geeignetste Element zur Darstellung von Diagramm-Daten. Inhatlich hat man einen Namen samt Wert und diese Zuordnung ist auch vom W3C ausdrücklich gestattet.
Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.
[…]
Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.
Solch eine Definitionsliste hat zwei wesentliche Vorteile: sie bietet sowohl von in Struktur als auch vom Inhalt, zwei zusammengehörige Tags: dt und dd. Für ein solches Balkendiagramm deshalb perfekt geeignet, um jeweils den Namen und Wert der darzustellenden Daten zu tragen.
<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 einfacher kann man solche Daten sicherlich nicht mit HTML umsetzen. Mit solch einer Struktur habe ich erstmal alles was ich brauche: eine dl-Liste samt einer Klasse und jeweils passenden dl- und dd-Tags. Spans und Divs sind erstmal überflüssig, was nicht überflüssig ist, sind noch ein paar zusätzliche style-Definitionen innerhalb der dd-Tags, da diese später den eigentlichen Balken 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> </dl>
Ein so einfache Stuktur lässt sich besonders auch ohne CSS ohne Bilder oder sonstiges sinnvoll auswerten, jeder Wert besitzt eine eigene Angabe. Wir nennen sowas barierefrei. Diese Informationen funktionieren schon jetzt, was fehlt ist nur noch eine bessere Visualisierung. Hier kommt wie immer CSS ins Spiel.
CSS
Auch das CSS ist wirklich einfach gestrikt. Ich definiere eine Breite für das DL-Tag, floate anschließend sowohl dt- als auch dd-Tags, lasse dt-Tag den Float clearen und verpasse beiden dann etwas Farbe und Kante. Zur besseren Übersicht hier jeweils nur die wichtigsten 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 entsteht nun ein kleines Problem, sofern ich mein dt-Tag direkt neben dem dd- floaten möchte. Das dt-Tag braucht zum Floaten eine feste Breite, die dd-Tags daneben varieren aber in der Breite, durch die inline-style-Definitionen aus dem Schritt zuvor. Es gilt nun eine Lösung zu finden, die dem dt-Tag eine fixe Breite ermöglicht, ohne jedoch über die 100% der Gesamtbreite der Liste zu stossen. Angenommen ich gebe den dt-Tags eine feste Breite von 20%, dann habe ich ein Problem mit dem 3ten Wert im Diagramm, welches eine Breite von 89% darstellen soll. 20% + 89% = 109%. Ups.
An dieser Stelle lobe ich mir, dass zumindestens ein paar Dinge aus dem guten alten furchtbaren Mathematik-Unterricht hängen geblieben sind. Die Lösung besteht darin, der style-Breite den Wert der dt-Breite abzuziehen und schon kommen wir wieder auf die maximalen 100%. Angenommen 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 besitzen nun zusammen die endgültige Breite, des darzustellenden Wertes. Der Rest ist ein kleiner farblicher Anstrich.
Beispiel Diagramm
- Wert 1
- 46%
- Wert 2
- 24%
- Wert 3
- 89%
- Wert 4
- 62%
- Wert 5
- 29%
Zugegeben dieses Diagramm besitzt ein paar Einschränkungen, die in einem zweiten Teil hierzu behandelt werden. Was ich hier zeigen wollte war die Einfachheit von Balken-Diagrammen mit validem HTML und CSS, ohne aufgeblähte Struktur oder gar Grafiken. Das Thema bietet noch viel mehr… deshalb bis zum zweiten Teil.
14 Kommentare
Für diesen Eintrag wurden die Kommentare geschlossen.
global $hemingway ?>Gutes Beispiel, aber wäre es nicht von Vorteil es so anzulegen, dass der Balkenbereich der den Prozentwert enthält auch tatsächlich die Weite in genau dieses Wertes bekommt. Also Wert 1 mit 46% bekommt eine Weite für dd mit 46%. Dazu noch ein netter 3D Effekt ( Schatten, Licht etc. ). Bin gespannt auf Teil2!
Das wäre die einfachste Visualisierung, eigentlich schon fast zu einfach, drum musste ich es wieder unnötig kompliziert machen. Floatet man die DDs nicht bzw. lässt links clearen, dann erreicht man genau diesen Effekt. So macht es halt Apple, siehe der Screenshot oben.
Wow! Das hat mich auch schon lange interessiert. =) Vielen Dank!
Ein schönes Beispiel mit sauberem Code. Nur, so halt nicht direkt druckbar – zumindest nicht mit den Standard-Browsereinstellungen. Deswegen müssen wir dann doch meist wieder img-Tags einsetzen.
Thema Drucken von Web-Inhalten:
Die eigentliche Zahl der Nutzer, die wirklich noch ein Blatt-Papier in der Hand halten müssen ist hoffentlich/sicherlich gering. Um dennoch eine Lösung zu bieten, wäre es einfach, ein Bild in den Code miteinzufügen – z.B. als letztes Element der Liste – und es für die Darstellung des Non-Print-Stylesheets auszublenden bzw. nur im Print-Style anzuzeigen.
Was spricht eigentlich gerade bei Diagrammen gegen Bilder die z.B. piegraph erzeugt wurden? Es ist super kompatibel und da Diagramme ja so wie so Bildern sind, spricht nichts dagegen, die nicht umständlich in XHTML/CSS nachzubauen. Oder nicht?
Ups, ich meinte das hier: http://www.aditus.nu/jpgraph/
Es sind halt nur Bild-Daten, du kannst sie anschauen und… naja das war es dann schon. Anschauen und gut.
Wenn du diese Daten nicht mit dem Auge betrachten kannst existieren sie nicht. Anders dagegen mit echt strukturierten Daten, die über verschiedene Wege auslebar, darstellbar und verarbeitbar sind.
Möchte ich zum Beispiel die Daten in den Bildern deiner Beispiel-Seite hier bei mir darstellen, so muss ich die Bilder nehmen. Existierten diese Daten in der Form wie ich es hier beschreibe, könnte ich Daten filtern oder gar so darstellen, dass sie eben nicht mein Layout zerstören.
Der Umgang mit echten Listen ist halt viel flexibler als mit einem Bild. Wenn du die Möglichkeit hast, dann deaktiviere mal die Bild-Darstellung in deinem Browser und vergleiche dann diese Seite hier mit deinem Beispiel. Mein Diagramm wirst du weiterhin sehen, diese dort nicht mehr.
sono eccitato circa questo luogo, buon lavoro!:)
Interessanter Ansatz, der sich gut mit dem Balkendiagramm-Beispiel in Webdesign mit CSS ergänzt – dort wurden ganz bewusst eine Tabelle sowie Bild-Elemente eingesetzt, um auf Implikationen hinzuweisen. Sowohl der Definitionslisten- als auch der Tabelleneinsatz können interessanterweise kritisiert, aber auch als legitim angesehen werden.
Ich werde das alles nie verstehen!?! xDDDDD Ich weiß nix mit den dingern anzufangen!?!
die technik hat sich vor kurzem für mich als sehr nützlich erwiesen 🙂
Wie kann ich denn Balken 1,3,5… eine andere Farbe zuweisen als Balken 2,4,6…?
Geht das auch mit CSS? Wenn ja – wie mache ich das?
Sehr gute Frage und Anlass mal diesen Artikel zu aktualisieren. Ich beantworte die Frage mal kurz hier, ausführlicher demnächst in einem neuen Artikel. CSS3′ neue Selektoren, machen das Gestalten einzelner Balken leichter als je zuvor. Deine Frage ist schnell beantwortet. :nth-of-type ermöglicht Elemente über einfache Variablen zu adressieren. Beispiel: