Diagramme im Web – zweiter Teil

Ich mach es kurz für heute. Was wir hier sehen ist ein 100% freiskalierbares Balkendiagramm, mit leicht geänderter Ausrichtung als das letzte. Was hier so einfach aussieht, hat diesmal wirklich etwas mehr Zeit in Anspruch genommen, dank einer nicht wirklich funktionierenden vertikalen Ausrichtung bei CSS-Formaten.

Wert 1
46%
Wert 2
24%
Wert 3
89%
Wert 4
62%
Wert 5
29%

Ich bin zufrieden mit dem Ergebnis. Leider ist das Markup diesmal etwas komplizierter geworden, primär eben weil im CSS schlecht bis garnicht vertikal zu positionieren ist. Problem war, dass ich mit CSS nur sehr schwer an einer Grundlinie (in diesem Falle der Definitionsliste) ausrichten kann, die Balken in dieser Art Diagramm aber eben nach oben wachsen sollen und nicht nach unten. Der Trick besteht diesmal darin, dass was optisch als Balken wahrgenommen wird, nicht auf dem eigentlich Wert der Liste zu legen. Was hier als Balken gesehen wird, ist das Ergebnis von überlagertem dt und dd-Tag der Definitionsliste.

Grafik zum besseren Verständnis vom Markup des Diagramms

Markup-Grafik Balkendiagramm

Die Farbe des Balken bringt also diesmal das dt-Tag und das dd-Tag deckt dieses ab. Um nun den darzustellenden Wert zu erzielen bekommt das dd-Tag diesmal eine Höhe, welche 100% minus des darzustellenden Wertes entspricht. Im Quellcode sieht das dann so aus:

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

Zwar erscheint nun mit passendem CSS der Balken, aber die einzelnen Werte und die Bezeichnung sind noch deplaziert. Hier kommt nun zusätzliches Markup in Form von span-Tags hinzu. Leider habe ich keine andere Lösung gefunden, die völlige Skalierbarkeit garantiert, aber dazu gleich mehr. Der Quellcode samt span-Tags sieht dann so aus.

<dt><span>Wert 4</span></dt>
<dd style="height:38%;"><span>62%</span></dd>

span

Die span-Tags nutze ich nun um die Werte dank z-index nach vorn zu holen und an die richtige vertikale Stelle zu schieben. Positionierung und Bemaßung dieses Diagramms findet nur mit Prozent-Werten statt, was eben den Vorteil hat, dass ich später die Liste insgesamt (dl-Tag) egal wie bemaßen kann und der Inhalt sich immer perfekt anpasst, egal ob das Diagramm 200 oder 2000 Pixel hoch/breit sein soll, alles passt sich automatisch an. Wer hier liesst wird sich sicherlich rudimentär mit CSS auskennen. Vertikale Anpassung ist in dem Fall kein Problem. Anspruchsvoller dagegen die Horizontale, da sich eben auch die Anzahl der Balken ändert. Es gibt ein paar Schlüsselwerte:

.content dl.data-2 dt,
.content dl.data-2 dd {
width:12%;
}
.content dl.data-2 dd {
margin:0 0 0 -12%;
}
.content dl.data-2 dt {
margin:0 0 0 4.7%;
}

Die 12% entsprechen jeweils der Breite und dem negativen Margin beide Elemente der Liste. Die 4.7% sind der horizontale Abstand zwischen den Balken des Diagramms. Ich wünschte ich könnte eine schöne mathematische Herleitung des Wertes bringen, aber irgendwie ist diese bei der Arbeit am Diagramm verloren gegangen.

Wichtig ist dennoch, dass man grundlegend zählen sollte wieviele Werte darzustellen sind, das ganze verdoppeln, Wert notieren und die 100% durch Wert-X teilen. Somit bekommt man einen recht guten Wert für die Breite der Balken. Die 100% ergeben dann jeweils X-Anzahl Balken und X-Anzahl Zwischenräume. In meinem Beispiel 512+54.7=83,5. Wie man sieht habe ich in meinem Beispiel noch etwas Luft nach oben.

Vor- und Nachteile

Problematisch hierbei ist eine Verteilung der Stildefinitionen auf CSS und Inline-Elemente. Dadurch erhält man bei wechselnenden Wertemengen auch immer jeweils separate CSS-Klassen bzw. IDs. Jedes Diagramm bekäme sein eigenes CSS-Format, was eigentlich dem Sinn von CSS etwas verfremdet.

Dem gegenüber steht jedoch eine Darstellung von Diagramm-Werten, die auch ohne CSS erschließbar bleiben und sich leicht für jedes andere Medium formatieren lassen.