Aufbau des Beispiels

(Auszug aus "Das Einsteigerseminar SVG — Webgrafiken mit XML" von Helma Spona)

Das nachfolgend vorgestellte Beispiel besteht aus einer HTML-Seite, in die zweimal die gleiche SVG-Grafik eingefügt wird. Die beiden <EMBED>-Tags werden mit dem id-Attribut benannt und zu jedem Diagramm gibt es eine XML-Datei. Diese Datei enthält die Einstellungen für die Formatierung der Grafik. Mit einem JavaScript werden dann beim Laden der HTML-Seite die XML-Dateien geöffnet, die Werte ausgelesen und den Diagrammen zugewiesen. Voraussetzung dafür ist, dass der Browser ActiveX-Objekte erzeugen kann. Derzeit erlaubt das nur der Internet Explorer für Windows. Da aber der Zugriff auf die SVG-Dateien in der HTML-Seite den gleichen Einschränkungen unterliegt, ist das kein Problem. Weil aber XML-Dateien verarbeitet werden müssen, benötigen Sie den Internet Explorer 5.0 oder höher, da nur er das XML-DOM für die XML-Dateien zur Verfügung stellt.

Die SVG-Grafik, die in die Seite eingefügt wird, stellt ein Balkendiagramm dar, das maximal vier Balken, Achsenbeschriftungen, einen Titel und eine Legende enthält.

Abbildung: Verwendete SVG-Grafik vor der Formatierung per Skript.

Das Skript sorgt dann dafür, dass die Grafik gemäß der Angaben in der XML-Datei formatiert wird. Auch die Werte für die Datenreihen und deren Beschriftungen werden durch die XML-Datei bestimmt. Nach der Formatierung durch das Skript könnte die Grafik dann wie folgt aussehen:

Abbildung: Ergebnis des Skriptes.

   

<< zurück

vor >>