Comunidad de diseño web y desarrollo en internet online

Crear Graficos Con Flash

Citar            
MensajeEscrito el 05 Feb 2008 09:47 am
Hola a todos, estoy intentando hacer una gráfica semicircular que me muestre las distintas comunidades autonomas y con su tanto por cierto de paro que hay. Mi código es el siguiente:

// Array de países
paises = new Array( 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L');
// Valores correspondientes
valores = new Array( 10, 1, 1, 2, 1, 1, 20, 1, 5, 40, 40, 5);

suma_total = 0;

for(i=0;i<valores.length; i++) {
suma_total += valores[i];
}

angulos = new Array();
porcentajes = new Array();

for(i=0; i<valores.length; i++) {
angulos[i] = (valores[i]/suma_total)*(2*Math.PI);
porcentajes[i] = (valores[i]/suma_total)*100;
}

colores = new Array( 0xFFAE00, 0xCF00CD, 0xD15C3D, 0xF4EB00, 0xC9978A, 0xC4B1AC, 0xE3CB5D, 0x5DE390, 0x12BD00, 0x0090FF, 0xFF0000, 0xFF0000 );

eje_x = 130;
eje_y = 130;
radio = 120;

_root.createEmptyMovieClip("pastel",10);
pastel._x = eje_x;
pastel._y = eje_y;

inicio = 0;

for(i=0; i<valores.length; i++) {
// Definimos los ángulos...
// ...inicial
ai = inicio;
// ...intermedios
a1 = inicio + (angulos[i]/4);
a2 = inicio + (angulos[i]/2);
a3 = inicio + ((angulos[i]/4)*3);
// ...final
af = inicio + angulos[i];

// Definimos las coordenadas
pi_x = Math.cos(ai)*radio;
pi_y = Math.sin(ai)*radio;
p1_x = Math.cos(a1)*radio;
p1_y = Math.sin(a1)*radio;
p2_x = Math.cos(a2)*radio;
p2_y = Math.sin(a2)*radio;
p3_x = Math.cos(a3)*radio;
p3_y = Math.sin(a3)*radio;
pf_x = Math.cos(af)*radio;
pf_y = Math.sin(af)*radio;

// Dibujamos la rebanada
pastel.beginFill(colores[i],100);
pastel.moveTo(0,0); // origen
pastel.lineTo(pi_x, pi_y); // inicio
pastel.lineTo(p1_x, p1_y); // punto 1
pastel.lineTo(p2_x, p2_y); // punto 2
pastel.lineTo(p3_x, p3_y); // punto 3
pastel.lineTo(pf_x, pf_y); // final
pastel.lineTo(0,0); // cerramos
pastel.endFill();

pastel.onRollOver = function(){
trace("hola");
}

// Incrementamos el valor de inicio
inicio += angulos[i];
}

// Agregamos una copia de 'mascara'
_root.attachMovie("mascara","mascara",100);
// Alineamos 'mascara' con 'pastel'
mascara._x = pastel._x;
mascara._y = pastel._y;

pastel.setMask(mascara);

// Coordenadas de posición de los textos
pos_x = 300;
pos_y = 30;

for(i=0; i<paises.length; i++) {
// Agregamos una copia de 'texto'
_root.attachMovie("texto","texto"+i,1000+i);
// Definimos el nombre de referencia
ref = _root["texto"+i];
// Asignamos su posición
ref._x = pos_x; // horizontal
ref._y = pos_y + (22*i); // vertical
// Redondeamos el porcentaje
porc = int(porcentajes[i]*100)/100;
// Asignamos el texto al campo 'pais'
ref.pais.text = paises[i] + " - " + porc + "%";
// Creamos el objeto Color() haciendo
// referencia a 'cuadro'
color_cuadro = new Color(ref.cuadro);
// Definimos el color que queremos asignar
color_cuadro.setRGB(colores[i]);
}

Con este código me crea una gráfica circular y yo lo que quiero es un semicirculo, ¿qué valores tendría que cambiar?

Muchísimas gracias de antemano.

Por chinisara

5 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 07 Feb 2008 12:30 am
Mira este post:
http://www.cristalab.com/foros/t50692.html

Si quieres solo un semicírculo en el último código del post cambia:

Código :

ratio=2*Math.PI/suma;

por

Código :

ratio=Math.PI/suma;


Para los paises, como cada "trozo" es un MC diferente puedes pegarle a cada uno el texto o tooltip ...al gusto

Por Teseo

SWAT Team

1780 de clabLevel

14 tutoriales

Genero:Masculino   SWAT

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.