☰ Tutorials

Einfaches Balkendiagramm mit SVG erstellen

Die Webprogrammierung ist sehr vielseitig. Wenn es um Diagramme erstellen geht, so gibt es viele Möglichkeiten. Eine davon ist das SVG Element. In diesem Artikel zeige ich dir, wie du mit SVG ein Balkendiagramm zeichnen kannst.

Diagramme erstellen - Möglichkeiten

Falls du weitere Möglichkeiten suchst, Diagramme zu erstellen, meine weiteren Tutorials:

Das SVG Element, zum grafischen darstellen

SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafik) und basiert auf XML (Extensible Markup Language), welches als HTML Tag verfügbar ist. Dieses wird als 
<pre><svg></svg></pre>

notiert und wird für zweidimensionale Grafiken genutzt. Anders wie im Canvas-Element, sind erstellte Zeichenobjekte direkt anwählbar und CSS kann auf Elemente zugreifen (sowie auch JavaScript).

In diesem Tutorial wollen wir diese Grafik erstellen:
SVG Balkendiagramm erstellen/zeichnen

SVG Balkendiagramm erstellen/zeichnen

Schritt 1: Die HTML-Datei

Als erstes erstellen wir uns ein Grundgerüst. Das ist die HTML-Seite mit den Platzhaltern für den weiteren Programmcode.
Erstelle dir eine neue .html Datei, z.B. svg-diagramm.html und füge folgenden Code hinzu:

HTML Code:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>SVG Diagramm</title></head><body><style type="text/css">	<!-- Platzhalter für CSS Code //--></style><svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">	<!-- Platzhalter für SVG Code //--></svg></body></html>


Erläuterung zum Code
Mit !DOCTYPE html nutzen wir den neusten Doctype für HTML (mehr Doctypes hier). Das Meta-Tag für Content-Type beinhaltet das Charset mit der ISO 8859-1, um Umlaute (äüö) und ß darstellen zu können.
Dann platzieren wir ein style-Bereich, für CSS. Das benötigen wir, um SVG mit seinen Elementen noch etwas stylischer zu gestalten.
Das svg-Element ist ebenfalls enthalten. Das Attribut xmlns verweist auf W3C (das Wordld Wide Web Consortium (WWWC bzw. W3C) mit der XML 1.0 Spezifikation. Die beiden Platzhalter ersetzen wir nun mit nachfolgenden Schritten.

Schritt 2: Balken erstellen

Ersetze den Platzhalter für SVG Code mit folgendem:

SVG-HTML Code:
<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" /><rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" /><rect x="50" y="95" width="90" height="20" rx="3" ry ="3" fill="#B4472A" />


Erläuterung zum Code:
Das < rect /> Element weist an, das ein rectangle (Rechteck) gezeichnet werden soll.
Die Attribute für rect:
  • x - Beginn auf der X-Achse (horizontale)
  • y - Beginn auf der Y-Achse (vertikale)
  • width - Breite des Balkens
  • height - Höhe des Balkens
  • rx und ry - Radius auf x-Achsebene bzw. y-Achsebene
  • fill - HTML Farbcode der Füllung (sprich: Farbe des Balkens)
Alle angegebenen Werte sind in Pixel. Die Angabe px für Pixel ist nicht notwendig. Möchtest du mm oder % nutzen, musst du das natürlich hinter einer Zahl notieren.

Das sieht dann schonmal gut aus:
SVG - die Balken sind da!

SVG - die Balken sind da!


Damit wollen wir uns aber noch nicht zufrieden geben - es fehlt die Beschriftung, also ein Text für jeden Balken und eine schmucke Trennlinie.

Schritt 3: Balken mit Text benamen + schmucke Trennlinie

Passe den SVG-HTML Code folgendermaßen an:

SVG-HTML Code (verändern):
<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>	<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" /><text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>	<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" /><text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>	<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" /><line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" />


Erläuterung zum Code:
Nun ist vor jedem Balken ein Text . In diesem Stil kommt man nicht mehr durcheinander, wenn man verschiedene Diagrammbalken benamt. Du kannst auch Leerzeilen lassen.
Ganz am Ende gibt es eine Linie welche dunkelgrau dargestellt wird und den Text optisch von den Balken abtrennen soll.

Neu sind nun ein paar Attribute:
  • font-size - Größe der Schriftart in Pixel
  • font-family - Schriftart/Schriftfamilie. Leerzeichen sind hier erlaubt, z.b. bei Times New Roman
  • stroke-width - Liniendicke
  • stroke - Farbe der Linie als HTML Code

Das Ergebnis ist ein fast vollwertiges Diagramm:
SVG Diagramm mit Balken und Text

SVG Diagramm mit Balken und Text


Nun möchten wir aber noch ein Highlight setzen: Rasterlinien und ein Mouse-Hover.

Schritt 4: Rasterlinien und Mouse-Over/Hover Effekt

Für die Rasterlinien benutze ich ein kleines Bild, welches mittels CSS in das SVG-Element eingefügt und in alle Richtungen wiederholt wird. Das ist einfacher, als etwas aufwendig zu berechnen und Hintergrundlinien zu zeichnen.
Du benötigst folgendes Bild:
SVG Rasterlinie

SVG Rasterlinie


Kannst du das linke kleine weiße Bildchen erkennen? Es ist 30x30 Pixel klein, oben und links ist eine graue Linie. In der Wiederholung des Bildes ergibt sich daraus ein 30x30 Pixel Raster. Rechtsklick darauf -> speichern unter auswählen. Speichere es da, wo auch deine HTML Datei liegt.

Nun ersetzen wir den Platzhalter CSS:
#statSvg{background-image:url('svg-rasterlinie.jpeg');}#statSvg rect{opacity: 0.9;}#statSvg rect:hover{opacity: 0.6;}


Erläuterung zum Code:
Unser SVG hat die id statSvg erhalten, dies sprechen wir in CSS mit #statSvg an.
opacity dient für die Durchsichtigkeit des Balkens. Bei 0.9 liegt diese bei 10%. Zeigt man mit der Maus auf einen Balken, wird dieser sogar 0.6 (40%) durchsichtig. Ein schöner effekt, wie ich finde.

Damit sind wir am Ende des Tutorials. Dein Diagramm sollte nun genau so aussehen:
SVG Balkendiagramm erstellen/zeichnen

SVG Balkendiagramm erstellen/zeichnen


Hier nochmal der gesamte Code zum Vergleich:
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>SVG Diagramm</title></head><body><style type="text/css">	#statSvg{background-image:url('svg-rasterlinie.jpeg');}	#statSvg rect{opacity: 0.9;}	#statSvg rect:hover{opacity: 0.6;}</style><svg id="statSvg" xmlns="http://www.w3.org/2000/svg" width="421" height="151">	<text x="10" y="50" font-size="12" font-family="Arial" fill="#404040">200</text>		<rect x="50" y="35" width="200" height="20" rx="3" ry="3" fill="#2A7BB4" />	<text x="10" y="80" font-size="12" font-family="Arial" fill="#404040">280</text>		<rect x="50" y="65" width="280" height="20" rx="3" ry="3" fill="#2A7BB4" />	<text x="10" y="110" font-size="12" font-family="Arial" fill="#404040">90</text>		<rect x="50" y="95" width="90" height="20" rx="3" ry="3" fill="#B4472A" />	<line x1="51" y1="10" x2="51" y2="140" stroke-width="2" stroke="#808080" /></svg></body>


Fandest du das Tutorial gut? Zeige es deinen Freunden und verteile es bei Facebook, Twitter, Google+ usw.. Du möchtest mehr solche Tutorial zum nachbauen? Schreib ein Kommentar mit deinem Wunsch!