Página Inicial > ActionScript 2, Flash > Criando gráficos dinâmicos a partir de dados obtidos de um XML

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:

  1. #include "mc_tween2.as"
  2. import mx.effects.Tween;
  3.  
  4. corpo0._alpha = 0;
  5.  
  6. System.useCodepage = true;
  7. var graf_xml:XML = new XML();
  8. graf_xml.ignoreWhite = true;
  9. graf_xml.onLoad = function(ok:Boolean) {
  10.  if (ok) {
  11.   trace("Arquivo XML encontrado.");
  12.   gerarGrafico(this.firstChild.childNodes);
  13.  } else {
  14.   trace("Arquivo XML não encontrado.");
  15.  }
  16. };
  17. graf_xml.load("grafico.xml");
  18.  
  19. function gerarGrafico(xmlNode) {
  20.  var len:Number = xmlNode.length;
  21.  var total:Number = 0;
  22.  var perc:Number = 0;
  23.  for (i=1; i<len; i++) {
  24.   this.corpo0.duplicateMovieClip("corpo"+i,getNextHighestDepth());
  25.   this.texto0.duplicateMovieClip("texto"+i,getNextHighestDepth());
  26.  }
  27.  for (a=0; a<len; a++) {
  28.   total += parseInt(xmlNode[a].childNodes[0].childNodes);
  29.   this["corpo"+a].valor = parseInt(xmlNode[a].childNodes[0].childNodes);
  30.   this["corpo"+a]._x = (this.corpo0._x)+(a*(this["corpo"+a]._width+20));
  31.   this["corpo"+a]._alpha = 0;
  32.   this["corpo"+a]._yscale = 0;
  33.   this["corpo"+a].id = a;
  34.   this["texto"+a]._x = this["corpo"+a]._x+(this["corpo"+a]._width/2)-(this["texto"+a]._width/2);
  35.  }
  36.  for (j=0; j<len; j++) {
  37.   perc = Math.round((this["corpo"+j].valor*100)/total);
  38.   this["corpo"+j].perc = perc;
  39.   this["corpo"+j].alphaTo(100,0.3);
  40.   this["corpo"+j].tween = new Tween(this["corpo"+j], 100, perc, 1500);
  41.   this["corpo"+j].enabled = false;
  42.   this["corpo"+j].onTweenUpdate = function(p) {
  43.    _root["texto"+this.id].s_txt.text = this.perc+"%";
  44.    if (this.perc<0) {
  45.     _root["texto"+this.id]._y = this._y+this._height+_root["texto"+this.id]._height;
  46.    } else {
  47.     _root["texto"+this.id]._y = this._y-this._height;
  48.    }
  49.    this._yscale = p;
  50.   };
  51.   this["corpo"+j].onTweenEnd = function(p) {
  52.    this.onTweenUpdate(p);
  53.    this.enabled = true;
  54.   };
  55.  
  56.   this["corpo"+j]._color = new Color(this["corpo"+j]);
  57.  
  58.   this["corpo"+j].onRollOver = function() {
  59.    this._color.setTransform({rb:204, gb:0, bb:0});
  60.    this.onRelease = function() {
  61.     titulo_txt.text = xmlNode[this.id].childNodes[1].childNodes;
  62.     valor_txt.text = "QTDE: "+xmlNode[this.id].childNodes[0].childNodes+" - PORCENTAGEM: "+this._yscale+"%";
  63.     desc_txt.text = xmlNode[this.id].childNodes[2].childNodes;
  64.    };
  65.   };
  66.   this["corpo"+j].onRollOut = this["corpo"+j].onReleaseOutside=function () {
  67.    this._color.setTransform({rb:0, gb:0, bb:0});
  68.    info_txt.removeTextField();
  69.   };
  70.   this["corpo"+j].tween.easingEquation = mx.transitions.easing.Elastic.easeOut;
  71.  }
  72. }

Código XML:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <grafico>
  3.  <dado>
  4.   <valor>235</valor>
  5.   <titulo>TITULO1</titulo>
  6.   <desc>DESCRICAO1</desc>
  7.  </dado>
  8.  <dado>
  9.   <valor>150</valor>
  10.   <titulo>TITULO2</titulo>
  11.   <desc>DESCRICAO2</desc>
  12.  </dado>
  13.  <dado>
  14.   <valor>183</valor>
  15.   <titulo>TITULO3</titulo>
  16.   <desc>DESCRICAO3</desc>
  17.  </dado>
  18. </grafico>

DOWNLOAD:

Arquivo fonte (43)
  1. Nenhum comentário ainda.
  1. Nenhum trackback ainda.