Flash-Komponenten waren schon immer die optisch am meisten befriedigenden Komponenten im Web. Mit Flex hat Flash ein völlig neues Niveau des Schnittstellendesigns erreicht und es erheblich vereinfacht. Flex verfügt jedoch nicht über eine Reihe von Anpassungsoptionen, -stilen und -animationen, die von mehreren angeboten werden 3rd Party-Komponenten. Bemerkenswert ist unter anderem FusionCharts, die ein Modul nur für Flex anbieten. In diesem Beispiel werden wir mit dieser Suite ein Blasendiagramm in Flex erstellen.
Einrichten
Bevor wir das FusionCharts for Flex-Modul einrichten, kann es Sie interessieren, wie es funktioniert. Technisch gesehen ist FusionCharts in AS2 geschrieben und kann nicht direkt in die Flex-Umgebung eingebettet werden. Daher verwendet es das FlashInterface zur Kommunikation mit der Flex-Laufzeitumgebung (AVM2). Wenn Sie mehr darüber wissen möchten, wie es funktioniert, finden Sie die Dokumentation unter www.fusioncharts.com/flex/docs.
Wie kann man FusionCharts für Flex einrichten? Es ist ziemlich einfach, da FusionCharts für Flex als SWC-Bibliotheksmodul für Flex geliefert wird. Das Modul kann vollständig in die Flex Builder-Anwendung integriert werden oder als externe Bibliothek verwendet werden, wenn jemand das kostenlose SDK verwenden möchte. Die eigentliche Installation ist ein einfacher Copy-Paste-Vorgang, der in 3 Schritten ausgeführt werden kann:
Holen Sie sich das FusionCharts for Flex-Modul und extrahieren Sie das Archiv. Der Ort, an dem Sie das FusionCharts for Flex-Archiv extrahiert haben, wird nachfolgend als. Bezeichnet DISTRIBUTION_ROOT. Sie können die Testversion unter www.fusioncharts.com/flex/Download.asp herunterladen.
Erstellen Sie ein neues Flex-Projekt, mit dem Sie das Modul FusionCharts for Flex verknüpfen möchten.
Kopiere das FusionCharts.swc Shockwave-Komponente anwesend bei DISTRIBUTION_ROOT / Diagramme zu PROJECT_ROOT / libs Mappe…
Kopiere das Fusionsdiagramme Ordner aus DISTRIBUTION_ROOT / Diagramme zum PROJECT_ROOT / src Mappe. Dieser Ordner enthält alle Flash-Objekte des Diagramms.
Das folgende Bild zeigt die resultierende Ordnerstruktur nach dem Einbau des FusionCharts for Flex-Moduls. Wir haben das Projekt als FusionCharts bezeichnet, daher ist standardmäßig eine MXML-Datei mit demselben Namen vorhanden:
Das Blasendiagramm erstellen
Nun, da wir die FusionCharts-Bibliothek eingerichtet haben, können wir uns direkt mit der Erstellung eines Blasendiagramms beschäftigen.
Für diejenigen von Ihnen, die mit dem Begriff "Blasendiagramm" nicht vertraut sind, handelt es sich um Diagramme, die wie jeder andere fortlaufende Datensatz gezeichnet werden.
Nur sie können eine zusätzliche Dimension von Daten darstellen. Darüber hinaus können sie auch zum Vergleich mehrerer Datensätze verwendet werden.
Wir stellen den Einstandspreis gegenüber dem Verkaufspreis verschiedener Früchte dar, wobei der Z-Index die Menge der einzelnen Früchte darstellt. Also lasst uns ohne weiteres beginnen:
Schritt 1: FusionCharts-Tag deklarieren
Zuerst müssen wir das erklären FusionCharts Tags innerhalb der MXML. Die Tags sehen wie folgt aus.
Um Flex-Datenstrukturen wie ArrayCollections, XMLList usw. verwenden zu können, müssen Sie auch das untergeordnete Tag deklarieren FCChartData. Mit diesem Tag können Plotdaten, Diagrammeigenschaften und -stil an das FusionCharts-Objekt gebunden werden.
Schritt 2: Definieren von Diagrammeigenschaften
Lassen Sie uns nun eine ArrayCollection erstellen, um die grundlegenden Eigenschaften des Diagramms zu beschreiben. Wir rufen unsere ArrayCollection an chartParam. Die Erklärung lautet wie folgt:
Wenn Sie sorgfältig feststellen, ist jedes Array-Element ein Objekt, das eine Liste von Eigenschaften und deren jeweiligen Werten ist. Beispielsweise wird die Diagrammbeschriftung als deklariert caption: 'Annual Sales Chart'. Ohne etwas über FusionCharts XML zu wissen, können Sie also Eigenschaften zu unserem Diagrammobjekt hinzufügen oder entfernen. Wenn Sie mehr über die verschiedenen verfügbaren Eigenschaften erfahren möchten, besuchen Sie die Blasendiagrammreferenz.
Schritt 3: Bereitstellen von Diagrammdaten
Wir müssen auch den Datensatz für dieses Diagramm angeben. Der Datensatz kann wie folgt deklariert werden:
Bei näherer Betrachtung gibt es in der ArrayCollection insgesamt drei Objekttypen.
Erstens, die label: '5', x: '5',… Deklaration ist erforderlich, um die Beschriftungen der X-Achse zu definieren.
Danach folgt die seriesName: '1996', Farbe: '227ed5',… wird verwendet, um jeden neuen Datensatz zu deklarieren.
Zum Schluss werden die einzelnen Datenelemente als deklariert x: '8', y: '15 ', z:' 33 ',…. Die Tasten x, y und z sind die Achsindizes für diesen bestimmten Datensatz.
Schritt 4: Binden von Flex-Daten an das FusionCharts-Objekt
Nachdem wir nun alle notwendigen Daten für unser Blasendiagramm angegeben haben, sollten wir diese Daten an unser FusionCharts-Objekt binden. Wie bereits erwähnt, sind alle Flex - Datenquellen an die Attribute von gebunden FCChartData Etikett. Nach dem Binden der Diagrammparameter und der Datenquelle würde die Quelle wie folgt aussehen:
Schritt 5: Ausführen des Codes
Es ist endlich Zeit, das Beispiel auszuführen. Den vollständigen Quellcode für dieses Beispiel erhalten Sie im Quellpaket. Richten Sie die FusionCharts-Bibliothek wie im vorherigen Abschnitt beschrieben ein und kompilieren Sie anschließend die Datei bubble_example1.mxml. Führen Sie die resultierende SWF-Datei aus und Sie sollten ein Diagramm wie folgt anzeigen:
Schritt 6: Trendlinien hinzufügen
Nachdem wir nun gesehen haben, wie die Datensätze für die Diagramme dargestellt werden, wollen wir es kühler machen, indem Sie Trendlinien hinzufügen. Tatsächlich werden wir unseren Charts statt nur Linien Trendzonen hinzufügen. Nach wie vor müssten wir für unsere Trendlinienobjekte eine neue ArrayCollection erstellen. Der folgende Code zeigt uns, wie das geht:
Jedes Trendzonenobjekt gibt nur den Startpunkt, den Endpunkt und die Tatsache an, dass es sich um eine Zone, nicht um eine Linie und um ihre Farbe handelt. Außerdem haben wir die Möglichkeit, grafische Eigenschaften wie Farbe, Alpha usw. Einzustellen.
Wie zuvor werden wir ein neues Attribut hinzufügen FChTrendlines zu unserer FCChartData Tag, und binden Sie die Daten daran. Das FChTrendline Attribut erklärt, dass es sich um horizontale Trendzonen handelt, vertikale Trendzonen können auch deklariert werden. Die geänderte Quelle wäre:
Den Quellcode für das geänderte Diagramm erhalten Sie im bubble_example2.mxml Datei im Quellpaket. Wenn Sie die Datei kompilieren und ausführen, würde das neue Diagramm so aussehen-
Schritt 7: Styles hinzufügen
Es ist Zeit, loszulegen und das Diagramm mit Stilen und Animationen aufpeppen. Das Hinzufügen von Stilen ist ziemlich einfach. Erstens: Ja, Sie haben es erraten, erstellen Sie eine neue ArrayCollection. Innerhalb des Arrays für Stile müssen wir zwei Arten von Objekten deklarieren:
Stilobjekt zum Definieren verschiedener Stile
Ein Anwendungsobjekt zum Zuordnen von Stilen zu verschiedenen Objekten
Schauen Sie sich den Code an, wenn dies etwas verwirrend erscheint:
Diese Art von Stildeklarationen hat den Vorteil, dass sie wiederverwendet und für mehrere Objekte verwendet werden können. In unserem Fall haben wir den gleichen Animationsstil auf unsere beiden Trendzonen angewendet. Wir haben auch einen Stil festgelegt, um die Bildunterschrift größer zu machen.
Das Name: 'CanvasAnim', Typ: 'Animation',…Das Objekt wird zum Deklarieren von Stilen verwendet. Das Name Attribut steht für den Namen des Objekts und das Art Attribut steht für die Art des Stils. Darauf folgen Attribute, die für einen bestimmten Stiltyp relevant sind. Als nächstes folgt die Zuordnung von Stilen zu bestimmten Diagrammobjekten. Das toObject: 'Caption', Styles: 'CaptionSize' -Deklaration tut genau das. Es ist offensichtlich, dass die Stil Attribut ist für den Namen des Stils und der toObject Definiert den Typ des Objekts, auf das angewendet wird.
Binden Sie das neue Styles-Array wie zuvor an unser Diagrammobjekt
Sie können den modifizierten Code von der erhalten bubble_example3.mxml Datei im Quellarchiv. Die resultierende Anwendung würde folgendermaßen aussehen:
Schritt 8: Konvertieren in ein Diagramm
Das Umwandeln eines Diagramms in ein anderes Diagramm ist sehr einfach. Alles was du tun musst, ist
Ändern Sie den Diagrammtyp.
Stellen Sie sicher, dass die aktuellen Daten mit den Daten des neuen Diagrammtyps übereinstimmen. Wenn nicht, ändern Sie es entsprechend.
Nehmen Sie visuelle Anpassungen vor, um Ihren neuen Diagrammtyp anzupassen.
Um den Diagrammtyp zu ändern, setzen Sie einfach das FCChartType zuschreiben Streuen.
Als Nächstes löschen wir den Z-Index, um die Diagrammdaten an den Streudiagramm-Datentyp anzupassen. Die Daten würden wie folgt umgewandelt:
Sie können den modifizierten Code von der erhalten scatter_example.mxml Datei im Quellarchiv. Die resultierende Anwendung würde folgendermaßen aussehen:
Schlussfolgerungen
Endlich sind wir damit fertig, unser Chart aufzubauen. Jetzt können Sie Ihre FusionCharts-Anwendungen auf der ganzen Welt verbreiten. Das Erstellen von Diagrammen mit FusionCharts ist in der Regel recht einfach. Mit den benutzerdefinierten Tags und der Flex-Datenbindung von FusionCharts ist es wirklich die Komponente, die Sie für Ihre Flex-Anwendungen verwenden sollten.
Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.
Share
Accentsconagua
