Tortenlieferant

Schrift anpassen

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

© Internet Magazin

gRaphael eignet sich sehr gut für interaktive Diagramme mit Legenden.

Beim Auslösen des Hover-Ereignisses des Diagramms wird als Erstes über die stop- Funktion die aktuelle Animation beendet. Anschließend wird das aktuell im Zugriff befindliche Tortenstück über die Funktion scale() um 10 Prozent vergrößert. Dies geschieht mithilfe des Skalierungsfaktors für den x- und y-Wert. Zusätzlich werden der Funktion optional die x- und y-Position des Zentrums des Elements mitgegeben.Neben dem Tortenelement soll, wie bereits erwähnt, auch das aktuell aktive Element innerhalb der Legende hervorgehoben werden. Auch an dieser Stelle beenden Sie als Erstes die aktive Animation des Texts und vergrößern anschließend den Text mithilfe der Skalierung um 10 Prozent.

Schrift anpassen

Zum Abschluss wird dem Text nun über die Funktion attr() noch direkt die Schriftstärke zugewiesen. Hierzu bedienen Sie sich am besten des CSS-Elements fontweight und setzen die Stärke über einen beschreibenden Text wie bold, bolder oder lighter. Alternativ zu dieser Vorgehensweise können Sie die Schriftstärke auch über den nummerischen Wert setzen. Dieser startet bei 100 für extra dünn und geht bis 900 für extra fett.Wird der hover-Effekt beendet, soll das Tortenstück wieder die Ausgangsgröße bekommen und der Text sich wieder normal in die Übersicht der Legende einreihen. Dazu werden die zuvor getätigten Veränderungen in der zweiten Funktion wieder rückgängig gemacht.

Der alternative Ansatz

Sie benötigen jedoch nicht zwingend die zusätzliche Bibliothek zur Darstellung von Tortengrafiken. Raphael kann auch ohne dieses Plugins interaktive Diagramme zeichnen. Allerdings ist dazu ein wenig mehr Aufwand notwendig. In den Demos (raphaeljs.com/pie.html ) wird gezeigt, wie Sie nur mit den Funktionen der Raphael- Bibliothek eine Tortengrafik erzeugen.

Inhalte

Die Ausgangsbasis stellt eine reine HTML-Tabelle dar, in der die prozentualen Anteile sowie die Beschriftungen hinterlegt werden.

<table><tr><th>Vettel</th><td>13,3%</td></tr><tr><th>Alonso</th><td>13,1%</td></tr>
...</table>

Die Hauptarbeit wird jedoch innerhalb einer separaten JavaScript-Datei erledigt. In dieser befindet sich die Funktion pieChart(), welche das Zeichnen des Diagramms übernimmt. Diese besitzt insgesamt sechs Parameter, mit denen Sie die Generierung steuern: die x- und y-Koordinaten für den Mittelpunkt des Diagramms - diese Daten sind relative Daten und beziehen sich auf den Container, in dem das Objekt beherbergt wird.Anschließend folgt der Radius, laut mathematischer Definition die Hälfte des Durchmessers. Aus der Tabelle werden der prozentuale Wert sowie die Beschriftung des Tortenstücks übergeben. Der letzte Wert beschreibt die Farbe der Trennlinien des Diagramms. Zum Auslesen der Tabelle können Sie sich einer einfachen Funktion bedienen, welche die Werte abschließend an pieChart() übergibt.

function (raphael) {
$(function () {
var values = [],
labels = [];
$("tr").each(function () {
values.push(parseInt($("td", this).
text(), 10));
labels.push($("th", this).text());
});
$("table").hide();
raphael("holder", 700, 700).pie
Chart(350, 350, 200, values, labels,
"#fff");
});
})

Nachdem die Werte der einzelnen Tabellenzellen ausgelesen sind und in die beiden Arrays values und labels übergeben wurden, findet zum Abschluss der Aufruf der Funktion pieChart mit den sechs Parametern statt. Das Diagramm hat den Mittelpunkt beim Punkt mit dem x- und y-Wert 350. Der Radius des Kreises beträgt 200 Pixel.

Die Funktion pieChart()

Zum Zeichnen der Tortenstücke benötigen Sie ein wenig mathematische Vorüberlegungen. Aufgrund der eingesetzten Technologien von SVG und VML erfolgt die Definition von Tortenstücken über Knotenpunkte, die anschließend miteinander verbunden werden.Raphael bietet Ihnen einige Standardelemente, wie einen Kreis oder ein Rechteck zum Definieren von Figuren. Das Element Tortenstück ist allerdings nicht verfügbar, weshalb Sie dafür eine eigene Funktion benötigen. Die Funktion sector() stellt alle notwendigen Berechnungen zur Verfügung und liefert den Pfad, welcher für die Darstellung des Tortenstücks gezeichnet werden muss.

function sector(cx, cy, r,
startAngle, endAngle, params) {
var x1 = cx + r * Math.cos
(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle *
rad),
y1 = cy + r * Math.sin(-startAngle *
rad),
y2 = cy + r * Math.sin(-endAngle *
rad);
return paper.path(["M", cx, cy, "L",
x1, y1, "A", r, r, 0, +(endAngle -
startAngle > 180), 0, x2, y2, "z"]).
attr(params);
}

SVG-Kurzübersicht

Das Zeichnen von Objekten mit Raphael lehnt sich stark an die Syntax von SVG an. Haben Sie diese erst einmal verinnerlicht, sind auch eigene Objekte keine größere Herausforderung mehr. Anhand eines einfachen Beispiels wird deutlich, welche Struktur SVG zur Definition von Objekten nutzt:M 200, 200 L 400, 200 400, 400 200, 400 ZFür das Zeichnen sind die Koordinaten der vier Eckpunkte notwendig. Mit M 200, 200 ziehen Sie zum Startpunkt mit den Koordinaten (200|200). M beschreibt dabei die Aktion - move - und die beiden Zahlenwerte beschreiben die x- und y-Koordinaten.Anschließend zeichnen Sie drei Linien und verbinden somit die weiteren Punkte P2 (400|200), P3 (400|400) sowie P4(200|400). Dazu wird der Befehl L für line oder Linie verwendet.Zurück zum Ziel gelangen Sie über den Befehl Z, wobei dieser automatisch auch das Zeichnen einer weiteren Linie impliziert. Das Ergebnis ist ein geschlossenes Rechteck, das die angegebenen vier Punkte verbindet.Neben geraden Linien benötigen Sie für die Gestaltung von Objekten noch Kurven oder Bögen. Laut W3 Definition (www.w3.org/TR/SVG/ ) nutzt SVG hierfür drei unterschiedliche Verfahren.Weitere Informationen zu SVG finden Sie beispielsweise bei Wikipedia (de.wikipedia.org/wiki/Scalable_Vector_Graphics ) und in den Wikibooks (de.wikibooks.org/wiki/SVG ).

Das Tortenstück

Aus mathematischer Sicht benötigen Sie zum Zeichnen des Tortenstücks neben dem Mittelpunkt des Diagramms zwei weitere Punkte, welche die Positionen auf der äußeren Kreislinie beschreiben. Zur Bestimmung der richtigen Anfangs- und Endepunkte auf der Kreislinie sind zusätzlich Start- und Endwinkel notwendig. Mit diesen Daten berechnen Sie unter Einsatz von Sinus und Cosinus die beiden zusätzlichen Punkte P1 und P2 mit den Koordinaten x1 und y1 sowie x2 und y2.Damit aus diesen drei Punkten M, P1 und P2 letzten Endes ein Stück des Kuchens entsteht, gilt es, diese im letzten Schritt noch zu verbinden. Dank Raphael müssen Sie dazu nur noch die Linie entsprechend beschreiben: Vom Mittelpunkt ziehen Sie eine Linie vom Mittelpunkt bis zum Punkt P1, ziehen anschließend einen Bogen zum Punkt P2 und fahren anschließend wieder zurück zum Ausgangspunkt M. Dieses Vorgehen ist stark an SVG angelehnt - einen kurzen Exkurs finden Sie im Kasten "SVG Kurzübersicht".

Einfärben und Animieren

Im Skript werden anschließend die einzelnen Werte ermittelt, die zum Zeichnen der Tortenstücke notwendig sind und diese zum Abschluss umgesetzt.Beim Berühren eines Elements wird dieses wie bereits im zweiten Beispiel durch die Funktion scale() vergrößert und der beschreibende Text angezeigt. Ausgelöst wird die Animation durch das mouseover-Event des Tortenelements. Entsprechend wird mit dem mouseout-Event alles wieder in die Ausgangsposition gebracht. Zum Schluss wird das fertige Diagramm an die aufrufende Funktion übergeben und dargestellt.

Raphael-Facts

Das JavaScript Framework wurde von Dmitry Baranovskiy entwickelt und ist bis jetzt im Vergleich zu den großen Konkurrenten wie jQuery oder Mootools nur wenig bekannt. Es unterstützt offiziell die gängigen Browser Safari und Firefox ab Version 3, Opera ab Version 9.5 und den Internet Explorer ab Version 6. Weitere Informationen zum Framework finden Sie auf der Homepage unter raphasljs.com . Darüber hinaus stehen Ihnen zusätzliche Informations-Kanäle zur Verfügung. Der Entwickler twittert unter twitter.com/raphaelJS , berichtet über das Projekt bei Github (https://github.com/DmitryBaranovskiy/raphael ) und in den Google Groups (groups.google.com/group/raphaeljs ).

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…