Criando gráficos dinâmicos a partir de dados obtidos de um XML
Assunto:
Metódo para criar gráficos dinâmicos utilizando dados obtidos de um XML.
ActionScript:
Versão 2.0
Código AS:
- #include "mc_tween2.as"
- import mx.effects.Tween;
-
- corpo0._alpha = 0;
-
- System.useCodepage = true;
- var graf_xml:XML = new XML();
- graf_xml.ignoreWhite = true;
- graf_xml.onLoad = function(ok:Boolean) {
- if (ok) {
- trace("Arquivo XML encontrado.");
- gerarGrafico(this.firstChild.childNodes);
- } else {
- trace("Arquivo XML não encontrado.");
- }
- };
- graf_xml.load("grafico.xml");
-
- function gerarGrafico(xmlNode) {
- var len:Number = xmlNode.length;
- var total:Number = 0;
- var perc:Number = 0;
- for (i=1; i<len; i++) {
- this.corpo0.duplicateMovieClip("corpo"+i,getNextHighestDepth());
- this.texto0.duplicateMovieClip("texto"+i,getNextHighestDepth());
- }
- for (a=0; a<len; a++) {
- total += parseInt(xmlNode[a].childNodes[0].childNodes);
- this["corpo"+a].valor = parseInt(xmlNode[a].childNodes[0].childNodes);
- this["corpo"+a]._x = (this.corpo0._x)+(a*(this["corpo"+a]._width+20));
- this["corpo"+a]._alpha = 0;
- this["corpo"+a]._yscale = 0;
- this["corpo"+a].id = a;
- this["texto"+a]._x = this["corpo"+a]._x+(this["corpo"+a]._width/2)-(this["texto"+a]._width/2);
- }
- for (j=0; j<len; j++) {
- perc = Math.round((this["corpo"+j].valor*100)/total);
- this["corpo"+j].perc = perc;
- this["corpo"+j].alphaTo(100,0.3);
- this["corpo"+j].tween = new Tween(this["corpo"+j], 100, perc, 1500);
- this["corpo"+j].enabled = false;
- this["corpo"+j].onTweenUpdate = function(p) {
- _root["texto"+this.id].s_txt.text = this.perc+"%";
- if (this.perc<0) {
- _root["texto"+this.id]._y = this._y+this._height+_root["texto"+this.id]._height;
- } else {
- _root["texto"+this.id]._y = this._y-this._height;
- }
- this._yscale = p;
- };
- this["corpo"+j].onTweenEnd = function(p) {
- this.onTweenUpdate(p);
- this.enabled = true;
- };
-
- this["corpo"+j]._color = new Color(this["corpo"+j]);
-
- this["corpo"+j].onRollOver = function() {
- this._color.setTransform({rb:204, gb:0, bb:0});
- this.onRelease = function() {
- titulo_txt.text = xmlNode[this.id].childNodes[1].childNodes;
- valor_txt.text = "QTDE: "+xmlNode[this.id].childNodes[0].childNodes+" - PORCENTAGEM: "+this._yscale+"%";
- desc_txt.text = xmlNode[this.id].childNodes[2].childNodes;
- };
- };
- this["corpo"+j].onRollOut = this["corpo"+j].onReleaseOutside=function () {
- this._color.setTransform({rb:0, gb:0, bb:0});
- info_txt.removeTextField();
- };
- this["corpo"+j].tween.easingEquation = mx.transitions.easing.Elastic.easeOut;
- }
- }
Código XML:
- <?xml version="1.0" encoding="utf-8"?>
- <grafico>
- <dado>
- <valor>235</valor>
- <titulo>TITULO1</titulo>
- <desc>DESCRICAO1</desc>
- </dado>
- <dado>
- <valor>150</valor>
- <titulo>TITULO2</titulo>
- <desc>DESCRICAO2</desc>
- </dado>
- <dado>
- <valor>183</valor>
- <titulo>TITULO3</titulo>
- <desc>DESCRICAO3</desc>
- </dado>
- </grafico>
DOWNLOAD:
Arquivo fonte (43)