Les composants Flash ont toujours été les composants les plus gratifiants sur le Web. Avec Flex, Flash a atteint un tout nouveau niveau de conception d'interface et l'a considérablement simplifiée. Toutefois, Flex n’a pas le choix d’options de personnalisation, de styles et d’animations fournis par plusieursrd composants du parti. Parmi eux, FusionCharts, qui fournit un module uniquement pour Flex. Pour cet exemple, nous allons utiliser cette suite pour créer un graphique à bulles dans Flex..
Mise en place
Avant de configurer le module FusionCharts for Flex, vous voudrez peut-être savoir comment cela fonctionne. Sur le plan technique, FusionCharts est écrit en AS2 et ne peut pas être directement intégré à l'environnement Flex. Il utilise donc FlashInterface pour communiquer avec l'environnement d'exécution Flex (AVM2). Si vous voulez en savoir plus sur son fonctionnement, vous pouvez voir leur documentation sur www.fusioncharts.com/flex/docs.
Alors, comment configurer FusionCharts for Flex? C'est assez facile, car FusionCharts for Flex est un module de bibliothèque SWC pour Flex. Le module peut être entièrement intégré à l'application Flex Builder ou être utilisé en tant que bibliothèque externe si quelqu'un souhaite utiliser le SDK gratuit. L’installation proprement dite est un simple processus de copier-coller qui peut être exécuté en 3 étapes:
Obtenez le module FusionCharts for Flex et extrayez l'archive. L’emplacement où vous avez extrait l’archive FusionCharts for Flex sera ultérieurement désigné sous le nom de DISTRIBUTION_ROOT. Vous pouvez télécharger la version d'évaluation à l'adresse www.fusioncharts.com/flex/Download.asp..
Créez un nouveau projet Flex auquel vous souhaitez associer le module FusionCharts for Flex..
Copier le FusionCharts.swc Shockwave Component présent à DISTRIBUTION_ROOT / Graphiques à PROJECT_ROOT / libs dossier…
Copier le tableaux de fusion dossier de DISTRIBUTION_ROOT / Graphiques au PROJECT_ROOT / src dossier. Ce dossier contient tous les objets graphiques Flash.
L'image suivante montre la structure de dossiers résultante après l'intégration du module FusionCharts for Flex. Nous avons nommé le projet FusionCharts. Ainsi, un fichier MXML du même nom est présent par défaut:
Création du graphique à bulles
Alors, maintenant que nous avons configuré la bibliothèque FusionCharts, nous pouvons plonger directement dans la création d’un graphique à bulles..
Pour ceux d’entre vous qui ne connaissent pas le terme "diagramme à bulles", ce sont des graphiques qui sont tracés comme tout autre ensemble de données continues..
Seulement, ils ont la capacité de représenter une dimension supplémentaire de données. Non seulement cela, ils peuvent également être utilisés pour comparer plusieurs ensembles de données.
Nous allons tracer le prix de revient par rapport au prix de vente de différents fruits, l’indice z représentant la quantité de chaque fruit. Alors, sans plus tarder, commençons:
Étape 1: Déclaration de la balise FusionCharts
Tout d'abord, nous devons déclarer le FusionCharts balises dans le MXML. Les balises se présentent comme suit.
Pour utiliser des structures de données Flex telles que ArrayCollections, XMLList, etc., nous devons également déclarer la balise enfant. FCChartData. Cette balise nous permettra de lier les données de tracé, les propriétés de graphique et le style à l'objet FusionCharts..
Étape 2: Définition des propriétés du graphique
Créons maintenant un ArrayCollection pour décrire les propriétés de base du graphique. Nous appellerons notre ArrayCollection chartParam. La déclaration est la suivante:
[Bindable] private var chartParam: ArrayCollection = new ArrayCollection ([libellé: 'Tableau des ventes annuelles',, xAxisName: 'Prix (Bt./kg.)', YAxisName: 'Coût initial (Bt./kg. ) ',…]);
Si vous remarquez attentivement, chaque élément du tableau est un objet qui se trouve être une liste de propriétés et leurs valeurs respectives. Par exemple, la légende du graphique est déclarée comme légende: 'Tableau des ventes annuelles'. Ainsi, sans rien connaître de FusionCharts XML, nous pouvons ajouter ou supprimer des propriétés à notre objet graphique. Si vous voulez en savoir plus sur les différentes propriétés disponibles, vous pouvez visiter le tableau des bulles.
Étape 3: Fournir des données de graphique
Nous devons également déclarer le jeu de données pour ce graphique. L'ensemble de données peut être déclaré comme suit:
Si on regarde de plus près, il y a un total de trois types d'objets dans ArrayCollection.
Tout d'abord, le étiquette: '5', x: '5',… la déclaration est nécessaire pour définir les étiquettes de l'axe des x.
Après cela, le seriesName: '1996', couleur: '227ed5',… est utilisé pour déclarer chaque nouvel ensemble de données.
Et enfin, les éléments de données individuels sont déclarés comme x: '8', y: '15 ', z:' 33 ',…. Les touches x, y et z sont les index des axes pour cet ensemble de données particulier.
Étape 4: Liaison de données Flex à un objet FusionCharts
Maintenant que nous avons déclaré toutes les données nécessaires pour notre graphique à bulles, nous devrions les lier à notre objet FusionCharts. Comme nous l’avons déjà mentionné, toutes les sources de données Flex sont liées aux attributs du FCChartData étiquette. Après avoir lié les paramètres du graphique et la source de données, la source se présenterait comme suit:
Étape 5: Exécution du code
Il est enfin temps d'exécuter l'exemple. Vous pouvez obtenir le code source complet pour cet exemple dans le paquet source. Configurez la bibliothèque FusionCharts comme décrit dans la section précédente, puis compilez le fichier bubble_example1.mxml. Exécutez le fichier SWF résultant et vous devriez voir un graphique comme suit:
Étape 6: Ajout de courbes de tendance
Maintenant que nous avons vu comment représenter les jeux de données pour les graphiques, simplifions les choses en y ajoutant des courbes de tendance. En fait, nous allons ajouter des zones de tendance à nos graphiques plutôt que de simples lignes. Comme auparavant, nous devions créer un nouvel ArrayCollection pour nos objets de courbe de tendance. Le code suivant nous montre comment faire cela:
Chaque objet de la zone de tendance déclare simplement son point de départ, son point de fin et le fait qu’il s’agit d’une zone et non d’une ligne et de sa couleur. Nous avons également la possibilité de définir des propriétés graphiques telles que la couleur, l'alpha, etc..
Encore une fois, comme auparavant, nous allons ajouter un nouvel attribut FChTrendlines à notre FCChartData balise, et lier les données à elle. le FChTrendline attribut déclare que ce sont des zones de tendance horizontales. Des zones de tendance verticales peuvent également être déclarées. La source modifiée serait:
Vous pouvez obtenir le code source du graphique modifié à partir du bubble_example2.mxml fichier dans le paquet source. Si vous compilez et exécutez le fichier, le nouveau graphique ressemblera à ceci:-
Étape 7: Ajout de styles
Il est temps de commencer et de pimenter votre tableau avec des styles et des animations. L'ajout de styles est assez simple. Premièrement, vous l'avez deviné, créez un nouvel ArrayCollection. Dans le tableau pour les styles, nous devons déclarer deux types d'objets:
Objet de style pour définir différents styles
Un objet d'application pour mapper des styles sur divers objets
Il suffit de regarder le code, si cela semble un peu déroutant:
Ce type de déclaration de style est avantageux car il peut être réutilisé et utilisé sur plusieurs objets. Dans notre cas, nous avons appliqué le même style d’animation à nos deux zones de tendance. Nous avons également déclaré un style pour agrandir la légende.
le nom: 'CanvasAnim', type: 'animation',…objet est utilisé pour déclarer des styles. le prénom attribut représente le nom de l'objet et le type attribut représente le type de style. Celles-ci sont suivies d'attributs pertinents pour un type de style particulier. Vient ensuite le mappage des styles sur des objets de graphique particuliers. le toObject: 'Caption', styles: déclaration 'CaptionSize' ne fait que ça. Il est évident que le style attribut est pour le nom du style et le toObject définit le type d'objet appliqué à.
Lier le nouveau tableau de styles à notre objet graphique comme auparavant
Vous pouvez obtenir le code modifié à partir du bubble_example3.mxml fichier dans l'archive source. L'application résultante ressemblerait à ceci:
Étape 8: Conversion en graphique de parcelle
Convertir un graphique en un autre graphique est vraiment facile. Tout ce que tu dois faire est
Changer le type de graphique.
Assurez-vous que les données actuelles sont conformes aux données du nouveau type de graphique. Sinon, changez-le en conséquence.
Faites des ajustements visuels en fonction de votre nouveau type de graphique.
Pour changer le type de graphique, définissez simplement le FCChartType attribuer à Dispersion.
Ensuite, nous supprimons l'index z pour rendre les données du graphique conformes au type de données du graphique en nuages de points. Les données seraient transformées en:
Vous pouvez obtenir le code modifié à partir du scatter_example.mxml fichier dans l'archive source. L'application résultante ressemblerait à ceci:
Conclusions
Nous avons donc fini avec la construction de notre graphique. Vous pouvez maintenant diffuser vos applications FusionCharts dans le monde entier. Généralement, créer des graphiques avec FusionCharts est plutôt facile. Avec les balises personnalisées et la liaison de données Flex fournies par FusionCharts, c'est vraiment le composant que vous devriez utiliser pour vos applications Flex.
Suivez-nous sur Twitter ou abonnez-vous au fil RSS NETTUTS pour plus d'articles et de sujets sur le développement Web quotidiens.
Share
Accentsconagua
