Tortenlieferant

Interaktive Diagramme mit dem JavaScript Framework Raphael

Interaktive Diagramme sind bisher eine Domäne von Adobe Flash. Einen alternativen Weg zeigt Ihnen dieser Workshop mit dem JavaScript Framework Raphael.

Autor: Andreas Hitzig • 29.3.2011 • ca. 3:55 Min

internet, webdesign, raphael, javascript, diagramme, framework, workshop — Tortenlieferant: JavaScript

Inhalt

Interaktive Diagramme mit dem JavaScript Framework Raphael
Schrift anpassen

Mehr und mehr Entwickler suchen eine Alternative zu Adobe Flash, damit auch die populären Endgeräte von Apple bedient werden können. Steve Jobs beharrt auf seiner Position und hält die Flash-Technologie für fehleranfällig. Das JavaScript Framework schließt diese Lücke elegant und bietet die ...

Der Raphael-Ansatz

Das Framework bedient sich Scalable Vector Graphics (SVG) zur Beschreibung der Diagramme. Dabei handelt es sich um ein XML-basiertes Format, das sich DOM-Knoten bedient. Mithilfe von CSS können diese das Diagramm an Ihre Vorstellungen anpassen und mithilfe von JavaScript verleihen Sie den visualisierten Daten noch zusätzliche Interaktivität.SVG wird heute von allen gängigen Browsern direkt unterstützt - die einzige Ausnahme bildet der Internet Explorer mit einer eigenen Technik zur Darstellung von Vektorgrafiken. Dafür setzt der IE die Vector Markup Language (VML) ein. Dank Raphael müssen Sie sich jedoch nicht mit diesen Unterschieden herumschlagen. Das Framework nimmt Ihnen einen Großteil der technischen Arbeit ab. Die integrierten APIs unterstützen bei der Darstellung von Grafiken, der Integration von Schriften, bei Animationen und dem Einfärben der Objekte.

Integration des Frameworks

Nachdem Sie die aktuelle Version des Frameworks von der Entwicklerseite heruntergeladen haben, speichern Sie die Skriptdatei auf Ihrem Webserver ab und integrieren diese per <script>-Tag in Ihre Webseite.

<script src="g.raphael.js" type=
"text/javascript" charset="utf-8"></script>

Die grafische Bibliothek

Raphael bietet Ihnen bereits im Standard eine größere graphische Bibliothek namens gRaphael (g.raphaeljs.com/ ) an, mit der Sie Ihre Diagramme über die integrierten Funktionen zeichnen können. Diese basiert auf der graphischen Bibliothek von Raphael und erlaubt Ihnen mit geringen Mitteln Diagramme und Grafiken zu erstellen, allerdings sind diese über die Funktionen der Plugins eingeschränkt. Die entsprechende Bibliothek zum Download samt Plugins finden Sie online unter github.com/DmitryBaranovskiy/g.raphael/blob/master/g.raphael-min.js?raw=true .Für die Darstellung des Beispiels benötigen Sie die Standard-Bibliothek von Raphael, die grafische Zusatzbibliothek gRaphael sowie das entsprechende Plugin, beispielsweise für die Tortengrafik. Diese binden Sie entsprechend ein.

<script src="raphael.js" type="text/
javascript" charset="utf-8"></script><script src="g.raphael.js" type=
"text/javascript" charset=
"utf-8"></script><script src="g.pie.js" type=
"text/javascript" charset=
"utf-8"></script>

Anschließend können Sie mit dem Zeichnen des Diagramms beginnen. Für ein einfaches Tortendiagramm sind lediglich zwei Codezeilen notwendig. In der ersten definieren Sie den Container, in welchem das Objekt dargestellt werden soll.

var r = Raphael(10, 50, 640,
480);

Der Container startet bei den Koordinaten x=10 und y=50 und besitzt eine Breite von 640 Pixeln und eine Höhe von 480 Pixeln. Mit der Variablen r greifen Sie in der Folge auf den Container zu und definieren die darin enthaltenen Inhalte.

r.g.piechart(320, 240, 150, [40, 20,
13, 32, 5, 1, 2]);

Zum Zeichnen eines Tortendiagramms benötigen Sie die x- und y-Koordinate des Mittelpunkts sowie den Radius. Das Beispiel definiert die x-Koordinate des Mittelpunkts bei 320, die y-Koordinate entsprechend bei 240 Pixel, ausgehend vom Container. Der Radius des Kreises beträgt 150 Pixel.Im Array gespeichert finden Sie die Werte, die dargestellt werden sollen. Dabei handelt es sich um insgesamt sieben Tortenstücke. Die angegebenen Zahlen entsprechen den absoluten Werten - gRaphael übernimmt automatisch die Berechnung der Winkel der Kuchenstücke. Das Ergebnis ist ein zweidimensionales Kuchendiagramm mit sieben Stücken, die automatisch angeordnet und eingefärbt sind.

Tortendiagramm mit Legende

Mehr Interaktion bekommen Sie mit dem nächsten Beispiel, einem Tortendiagramm mit Legende. Sobald Sie ein Tortenstück berühren, wird dieses ein wenig vergrößert und auch der zugehörige Text der Legende größer dargestellt.

var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin
Sans', Fontin-Sans, sans-serif";
r.g.text(320, 50, "Formel 1 Saison
2010").attr({"font-size": 20});

Als Erstes wird ein Container vom Typ Raphael erstellt. Im nächsten Schritt weisen Sie dem Container über txtattr.font Schriftgröße und Schriftart zu.

Das Tortendiagramm soll eine Beschriftung "Formel 1 Saison 2010" erhalten. Diese startet 320 Pixel vom linken Rand des Containers entfernt und 50 Pixel vom oberen Rand. Damit die Überschrift klar zu erkennen ist, wird die Schriftgröße auf 20 Pixel gesetzt.Die Inhalte des Diagramms übergeben Sie, wie bereits im ersten Beispiel mithilfe der Funktion piechart(). Neu hinzugekommen sind die Legende sowie deren Position. Diese werden als zusätzliche Parameter bei der Generierung des Diagramms mitgegeben.

var pie = r.g.piechart(320, 240, 150,
[256, 252, 242, 240, 214, 144, 142,
136, 72, 221], {
legend: ["Vettel", "Alonso", "Webber",
"Hamilton", "Button", "Massa",
"Rosberg", "Kubica", "Schumacher",
"Andere"],
legendpos: "west"});

Durch diese Erweiterung haben Sie ein Diagramm mit Legende, jedoch noch ohne dynamische Elemente. Diese kommen erst mit der folgenden Erweiterung hinzu.

pie.hover(function () {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx,
this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].scale(1.5);
this.label[1].attr({"font-weight":
800});
}
}, function () {
this.sector.animate({scale: [1, 1,
this.cx, this.cy]}, 500, "bounce");
if (this.label) {
this.label[0].animate({scale: 1},
500, "bounce");
this.label[1].attr({"font-weight":
400});
}
});