Tortenlieferant

Schrift anpassen

29.3.2011 von Andreas Hitzig

ca. 5:30 Min
Ratgeber
VG Wort Pixel
  1. Interaktive Diagramme mit dem JavaScript Framework Raphael
  2. Schrift anpassen
internet, webdesign, raphael, javascript, diagramme, framework, workshop
gRaphael eignet sich sehr gut für interaktive Diagramme mit Legenden.
© Internet Magazin

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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.