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.

  1. Interaktive Diagramme mit dem JavaScript Framework Raphael
  2. Schrift anpassen
internet, webdesign, raphael, javascript, diagramme, framework, workshop

© Internet Magazin

Tortenlieferant: JavaScript

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 Möglichkeit, eine plattform- und browserübergreifende Lösung zu schaffen.

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.

internet, webdesign, raphael, javascript, diagramme, framework, workshop

© Internet Magazin

Etwas aufwendiger ist die Erstellung eines interaktiven Tortendiagramms nur auf Basis von Raphael.

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});
}
});

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…