Générer des graphiques dans Flash à l'aide de FusionCharts

Un graphique est une représentation visuelle des données. Les données peuvent être représentées par des symboles, tels que des barres dans un graphique à barres, des lignes dans un graphique à courbes ou des tranches dans un graphique à secteurs. Un graphique peut représenter des données numériques tabulaires, des fonctions ou certains types de structures qualitatives.

FusionCharts vous aide à créer des graphiques Flash animés et interactifs pour les applications Web et de bureau. Il anime vos applications en convertissant des données monotones en images captivantes..

Dans ce tutoriel, nous allons apprendre à utiliser FusionCharts pour créer différents types de graphes à l'aide d'ActionScript et de XML..

Étape 1: Qu'est-ce que FusionCharts??

FusionCharts est un composant de graphique Flash qui peut être utilisé pour générer des graphiques animés et basés sur les données dans vos applications et présentations Web et de bureau. Ses fonctionnalités intelligentes, conviviales et innovantes animent vos applications Web en convertissant des données monotones en images captivantes..

Il peut également être utilisé avec n’importe quel langage de script et base de données. Il est utilisé avec ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, Python, de simples pages HTML ou même des présentations PowerPoint. Dans ce tutoriel, nous allons nous concentrer sur l'utilisation de Flash..

Étape 2: Où puis-je obtenir FusionCharts?

Vous pouvez télécharger 3 versions différentes de FusionCharts.

Une version gratuite codée dans Flash MX (ActionScript1), une version d'évaluation entièrement fonctionnelle sur la page de téléchargement ou vous pouvez acheter une licence à partir de 69 $ (ActionScript2) ou la version Flex utilisant ActionScript3 (même si elle n'est pas compatible avec Flash).

Dans ce tutoriel, nous utiliserons la version ActionScript 2..

Étape 3: Avantages / inconvénients

Il y a toujours des avantages et des inconvénients lors de l'utilisation de composants tiers pour développer vos applications..

Avantages:

• Facile à mettre en œuvre.
• Variété de styles de graphique à choisir.
• Compatible XML.
• Graphiques animés et interactifs.

Les inconvénients:

• En fonction de la licence dont vous avez besoin, cela peut être coûteux.
• Aucune version ActionScript 3 pour Flash.

Étape 4: Comment ça marche

Vous pouvez utiliser deux méthodes pour créer un graphique, l’une en utilisant les fichiers SWF contenus dans le fichier. Graphiques dossier et HTML, ou si vous achetez la licence Developer ou Enterprise, vous pouvez utiliser les classes directement.

Nous allons utiliser les deux méthodes dans cette tut.

Étape 5: Utilisation des fichiers SWF

Pour pouvoir utiliser la méthode des fichiers SWF, nous aurons besoin d’un fichier XML et d’un fichier HTML dans lesquels nous transmettrons le code XML en tant qu’argument au fichier SWF à l’aide de FlashVars..

Commençons par le XML.

Étape 6: XML

Ouvrez votre éditeur de texte ou XML préféré et commencez à écrire:

Ce code indique au fichier SWF de graphes les données à utiliser et définit certaines options. Vous pouvez identifier au premier coup d'oeil les données qui seront utilisées.

Vous verrez une meilleure description des options dans la documentation incluse dans votre téléchargement..

Étape 7: graphe SWF

FusionCharts a une grande collection de styles de graphiques. Naviguez vers le Graphiques dans la source FusionCharts, sélectionnez un style de graphique et copiez-le à l’emplacement de votre projet.

Dans cet exemple, j'ai utilisé le style BasicChart.

Étape 8: HTML

Dans votre éditeur HTML ou texte, écrivez ce qui suit:

Cela peut sembler compliqué mais c'est plus simple que vous ne le pensez. Le balisage ci-dessus est une structure HTML de base et une balise d'objet. Si vous utilisez un éditeur dédié, ce code est généré automatiquement lorsqu'un objet Flash est inséré. Vous pouvez ensuite ajouter ou modifier le paramètre FlashVars pour ajouter l'URL de vos données XML. fichier et la largeur et la hauteur de votre application.

Vous pouvez maintenant tester le graphique. Ouvrez le fichier html dans votre navigateur et voyez-le fonctionner.

Étape 9: Utilisation d'ActionScript

Si vous avez acheté la licence Developer ou Enterprise, vous pouvez utiliser les classes directement pour créer un graphique..

Créez un nouveau fichier Flash (ActionScript 2) et enregistrez-le sous. BasicChart.fla.

Étape 10: Importer la classe

Ouvrez le panneau Actions (Option + F9) et écrivez cette ligne de code:

 import com.fusioncharts.core.charts.Column3DChart;

Cela importera les fonctions nécessaires pour dessiner un graphique. Le dernier mot représente le style du graphique que vous allez créer.

Étape 11: Variables

Ce sont les variables que nous allons utiliser, expliquées dans les commentaires.

 conteneur var: MovieClip = this.createEmptyMovieClip ("chartContainer", 1); // Crée un MC qui stockera le graphique var xmlFile: XML = new XML (); // L'objet XML qui stockera le fichier XML var basicChart: Column3DChart; // Une instance du graphe que vous choisissez

Étape 12: Charger le XML

Ce code charge le fichier XML et une fonction crée le graphique lorsque le chargement est terminé..

 xmlFile.load ("data.xml"); // Écrivez votre fichier xml ici xmlFile.onLoad = function (): Void basicChart = new Column3DChart (conteneur, 1, 450, 325, 75, 0, false, "EN", "noScale"); // Options expliquées plus tard dans le tut basicChart.setXMLData (xmlFile); // Le XML doit être un objet XML basicChart.render (); // Rend le graphique;

C'est tout le code dont vous aurez besoin pour créer un graphique de base. Comme vous pouvez le constater, le constructeur du graphe a plusieurs paramètres, cela sera expliqué à l'étape suivante.

Étape 13: Paramètres

Chaque graphique que vous créez à l'aide d'ActionScript aura besoin de certains paramètres, à savoir:

• cibleMC: Référence de clip dans laquelle le graphique créera ses propres clips.
• profondeur: Profondeur à l'intérieur du clip parent dans lequel le graphique créera ses propres clips.
• largeur: Largeur du graphique.
• la taille: Hauteur de la carte.
• X: x position de la carte.
• y: y Position de la carte.
• Mode débogage: Valeur booléenne indiquant si le graphique est en mode débogage.
• lang: Code ISO à 2 lettres pour la langue des messages d'application. Dépend des données que vous avez fournies.
• scaleMode: Mode échelle du film - noScale ou exactFit.

Étape 14: Composant de la grille

Le composant de grille FusionCharts vous aide à afficher des données XML FusionCharts d'une seule série dans un format tabulaire. Vous pouvez combiner le composant de grille avec n’importe quel graphique en une seule série pour former une belle combinaison..

Vous pouvez afficher un composant de la grille sans avoir besoin d'un graphique en ajoutant ce code Javascript à votre code HTML:

      
 La grille apparaîtra dans cette DIV. 
   

Cela utilise le fichier javascript du FusionChart pour appeler le fichier SSGrid, et créer une grille semblable à celle-ci:

Si vous souhaitez utiliser une grille mais également afficher un graphique, modifiez le fichier HTML pour qu'il ressemble à ceci:

     
Le graphique apparaîtra dans cette DIV. 
  
La grille apparaîtra dans cette DIV. 
   

Vous allez vous retrouver avec quelque chose comme ça:

Vous pouvez utiliser les mêmes données XML avec la grille et le graphique.

Étape 15: Exporter les données graphiques

FusionCharts vous permet d'exporter des données de vos graphiques au format CSV. En Flash, cela peut être fait en utilisant le menu contextuel.

Ouvrez votre fichier de données XML et ajoutez l'option showExportDataMenuItem.

 … 

Lorsque cette option est ajoutée, un nouvel élément apparaît dans le menu contextuel:

Le libellé de cet élément de menu peut être personnalisé en définissant:

Conclusion

FusionCharts est un outil utile pour représenter graphiquement vos données de manière esthétique et sans qu'il soit nécessaire de tout créer à partir de rien. Expérimentez avec les différents types de graphes!

Merci d'avoir lu!