Letztes Jahr sah ich ein hübsches Beispiel, wie man Diagramme in Flex mithilfe von Degrafa ansprechend gestalten kann. Das Beispiel war ein Diagramm im Stil der Nike+ Website. Man kann es sich hier anschauen: Nike+ Beispiel.
Endlich habe ich die Zeit gefunden, mich näher mit dem Beispiel beschäftigen. Damit man besser versteht, worin der eigentliche Kern des Diagramm-Skinnings mit Degrafa liegt, habe ich alles „Unwichtige“ aus dem Original geworfen.
Den Source-Code gibt es am Ende des Beitrags zum Herunterladen.
Kurzinfo: Was ist Degrafa
Wer Degrafa noch nicht kennt: Ich hatte es Anfang 2008 im Artikel Degrafa, ein Grafik-Framework für Flex, mit den folgenden Worten vorgestellt:
Es handelt sich dabei um deklaratives Grafik-Framework. Mithilfe von MXML-Beschreibungen können Formen gezeichnet, komplexe Grafiken erstellt oder Skins samt CSS-Support geschaffen werden.
Skinning-Beispiel anschauen
Meine ausgedünnte und etwas veränderte Flexanwendung sieht folgermaßen aus:
[kml_flashembed movie=“/wp-content/uploads/2009/02/ChartDegrafa.swf “ height=“300″ width=“500″ /]
Im Wesentlichen handelt es sich um eine ColumnChart-Komponente. Die X- und Y-Achse wurden quasi entfernt und die Balken mit Degrafa gestaltet.
Ein LinearGradientFill sorgt für den blauen Verlauf als Füllung des Balkens. Der Balken selbst ist ein RoundedRectangleComplex mit abgerundeten Ecken.
Eine weiße Kontur (SolidStroke) wird als Trennlinie eingesetzt und mithilfe des HorizontalLineRepeater regelmäßig wiederholt.
Quellcode
Der Quellcode besteht aus zwei Teilen: der Hauptapplikation und dem Skin für die Balken des Diagramms.
Zuerst das Degrafa-Skin:
[xml]
[/xml]
Und hier die Hauptanwendung:
[xml]
[/xml]
Gleiches Chart ohne Degrafa
Zum Schluss noch einen Blick auf das Original-Chart. Entfernt man den itemRenderer mit dem Degrafa-Skin barChartRenderer, sieht das Diagramm so aus:
Link: Degrafa
Download: Quellcode (.zip)
Link: Nike+ graph using Degrafa/Flex 3
[ad]