Linechart / areachart : composant as2, source xml, style parametrable, legende automatique
5/5 (4 avis)
Vue 10 450 fois - Téléchargée 980 fois
Description
Bonjour,
Ma dernière source date d?il y a presque deux ans? c?est long?
J?ai du coder pour l?un de mes projets un composant AS2 permettant de présenter deux types de graphique depuis un XML, avec configuration des couleurs et du style depuis le XML.
Les types de graphique supportés sont les Areas, et les Lignes.
Les areas peuvent être aligné sur le bas, ou sur le haut du graphique.
Pour chaque type de graphique, il est possible d?activer ou non l?affichage des labels, mettre en pseudo-3D (areas uniquement), régler le style graphique complet.
Pas de limite dans le nombre de graphique.
Légende automatique, totalement paramétrable (align, valign comme en html), drag?n?drop, style graphique, police?
Exemple de style:
<style name="nom du style">
<draw>
<thickness value="-1" />
<lineColor value="0x000000" />
<lineAlpha value="100" />
<color value="0x0000FF" />
<alpha value="30" />
</draw>
<label>
<thickness value="-1" />
<lineColor value="0x000000" />
<lineAlpha value="100" />
<color value="0x000099" />
<alpha value="60" />
</label>
<textLabel>
<alpha value="100" />
<color value="0x000000" />
<bold value="true" />
</textLabel>
<relief>
<type value="3D" />
</relief>
</style>
<draw> liste les propriétés des éléments dessinées
Thickness: taille de la ligne
lineColor : couleur de la ligne
lineAlpha : transparence de la ligne
color: couleur de remplissage
alpha: transparence du remplissage
<label> liste les propriétés du fond du label
(Voir références de <draw>)
< textLabel> liste les propriétés des éléments du texte
Vous pouvez mettre toutes les propriétés acceptée par la class TextFormat pour configurer votre texte.
<relief> ne possède qu?une propriété:
Type : permet de définir si l?area doit être affiché en pseudo-3D
Exemple d?area:
<area label="label decrivant le graphique" align="top" showvalue="false" style="nom du style">
<point label="100 USD" value="100" />
<point label="130 USD" value="130" />
<point label="180 USD" value="180" />
</area>
Label : label du graphique, s?affiche dans la legende
Align : top/bottom : permet d?aligner le graphique en bas ou en haut.
Showvalue : control l?affichage du label.
Style : référence au style à utiliser
Exemple de ligne :
<line label="une courbe qui sert a rien" showlabel="true" style="nom du style">
<point label="31/10/2006" value="30" />
<point label="01/11/2006" value="60" />
<point label="02/11/2006" value="100" />
<point label="04/11/2006" value="10" />
<point label="04/11/2006" value="200" />
</line>
Label : label du graphique, s?affiche dans la legende
Showlabel : control l?affichage du label.
Style : référence au style à utiliser
Configuration de la légende :
<legend align="center" valign="top" style="legend" fixed="false" />
Align : left/center/right : control la position horizontale au chargement
Valign : top/middle/bottom : control la position verticale au chargement
Style : référence au style à utiliser
Fixed : true/false : autorise le déplacement drag?n?drop ou pas.
Important :
Les styles doivent être déclarés avant leur utilisation par un graphique.
La configuration de la légende doit être déclarée en dernier.
Notice importante :
Les valeurs ne peuvent dépasser 300 dans cette version.
Il n?existe aucune limite dans le nombre de point que peut gérer le graphique. Il calcul automatiquement l?espace entre les points.
Cette espace est recalculée pour chaque graphique.
Il n?y a pas de mise à jour de prévue.
Ma dernière source date d?il y a presque deux ans? c?est long?
J?ai du coder pour l?un de mes projets un composant AS2 permettant de présenter deux types de graphique depuis un XML, avec configuration des couleurs et du style depuis le XML.
Les types de graphique supportés sont les Areas, et les Lignes.
Les areas peuvent être aligné sur le bas, ou sur le haut du graphique.
Pour chaque type de graphique, il est possible d?activer ou non l?affichage des labels, mettre en pseudo-3D (areas uniquement), régler le style graphique complet.
Pas de limite dans le nombre de graphique.
Légende automatique, totalement paramétrable (align, valign comme en html), drag?n?drop, style graphique, police?
Conclusion :
Exemple de style:
<style name="nom du style">
<draw>
<thickness value="-1" />
<lineColor value="0x000000" />
<lineAlpha value="100" />
<color value="0x0000FF" />
<alpha value="30" />
</draw>
<label>
<thickness value="-1" />
<lineColor value="0x000000" />
<lineAlpha value="100" />
<color value="0x000099" />
<alpha value="60" />
</label>
<textLabel>
<alpha value="100" />
<color value="0x000000" />
<bold value="true" />
</textLabel>
<relief>
<type value="3D" />
</relief>
</style>
<draw> liste les propriétés des éléments dessinées
Thickness: taille de la ligne
lineColor : couleur de la ligne
lineAlpha : transparence de la ligne
color: couleur de remplissage
alpha: transparence du remplissage
<label> liste les propriétés du fond du label
(Voir références de <draw>)
< textLabel> liste les propriétés des éléments du texte
Vous pouvez mettre toutes les propriétés acceptée par la class TextFormat pour configurer votre texte.
<relief> ne possède qu?une propriété:
Type : permet de définir si l?area doit être affiché en pseudo-3D
Exemple d?area:
<area label="label decrivant le graphique" align="top" showvalue="false" style="nom du style">
<point label="100 USD" value="100" />
<point label="130 USD" value="130" />
<point label="180 USD" value="180" />
</area>
Label : label du graphique, s?affiche dans la legende
Align : top/bottom : permet d?aligner le graphique en bas ou en haut.
Showvalue : control l?affichage du label.
Style : référence au style à utiliser
Exemple de ligne :
<line label="une courbe qui sert a rien" showlabel="true" style="nom du style">
<point label="31/10/2006" value="30" />
<point label="01/11/2006" value="60" />
<point label="02/11/2006" value="100" />
<point label="04/11/2006" value="10" />
<point label="04/11/2006" value="200" />
</line>
Label : label du graphique, s?affiche dans la legende
Showlabel : control l?affichage du label.
Style : référence au style à utiliser
Configuration de la légende :
<legend align="center" valign="top" style="legend" fixed="false" />
Align : left/center/right : control la position horizontale au chargement
Valign : top/middle/bottom : control la position verticale au chargement
Style : référence au style à utiliser
Fixed : true/false : autorise le déplacement drag?n?drop ou pas.
Important :
Les styles doivent être déclarés avant leur utilisation par un graphique.
La configuration de la légende doit être déclarée en dernier.
Notice importante :
Les valeurs ne peuvent dépasser 300 dans cette version.
Il n?existe aucune limite dans le nombre de point que peut gérer le graphique. Il calcul automatiquement l?espace entre les points.
Cette espace est recalculée pour chaque graphique.
Il n?y a pas de mise à jour de prévue.
9 nov. 2006 à 14:46
9 nov. 2006 à 12:54
8 nov. 2006 à 20:44
Par contre, separer le style du XML me semble pas tres pratique.
D'abord, parsque le style n'est pas au format CSS. Il doit gerer les prorpiété de dessin de flash, les labels, background des labels et autre.
Ensuite, parsque ça obligerai flash à charger 2 fichiers. Meme petits, deux fichiers sont plus long à charger qu'un seul.
Derniere explication: je n'utilise pas un fichier xml, mais une page php me generant de l'XML suivant plusieurs options. Et parmis ces options, il y a le style.
Dans tous les cas, c'est libre de droit. amusez vous à modifier et adapter à vos besoins.
8 nov. 2006 à 18:28
d'un point de vue formel, j'aurais séparé la mise en forme (au format css) des données (au format xml).
sinon, en l'absence de paneau pour configurer le composant, une classe n'aurait-elle pas fait l'affaire ?
++
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.