Diagrama Animado

Bonito Diseño con JQuery

En este tutorial le mostraremos cómo crear un diagrama con Raphaël - una pequeña biblioteca de JavaScript que es ideal para trabajar con gráficos vectoriales. La idea es muy simple: vamos a dibujar algunos arcos con funciones matemáticas y vamos a estar mostrando un porcentaje de habilidad en un círculo principal cuando se ciernen sobre los arcos.

1. El HTML 

La estructura HTML va a consistir en un contenedor principal con la clase 'get'. Este contenedor almacena todos los datos que necesitamos para dibujar el arco. Entonces creamos un nuevo elemento div con "diagrama" el id que será el contenedor de los arcos:

<div id="diagram"></div>
<div class="get">
 <div class="arc">
  <span class="text">jQuery</span>
  <input type="hidden" class="percent" value="95" />
  <input type="hidden" class="color" value="#97BE0D" />
 </div>
 <div class="arc">

  <span class="text">CSS3</span>
  <input type="hidden" class="percent" value="90" />
  <input type="hidden" class="color" value="#D84F5F" />
 </div>
 <div class="arc">
  <span class="text">HTML5</span>
  <input type="hidden" class="percent" value="80" />
  <input type="hidden" class="color" value="#88B8E6" />

 </div>
 <div class="arc">
  <span class="text">PHP</span>
  <input type="hidden" class="percent" value="53" />
  <input type="hidden" class="color" value="#BEDBE9" />
 </div>
 <div class="arc">
  <span class="text">MySQL</span>
  <input type="hidden" class="percent" value="45" />
  <input type="hidden" class="color" value="#EDEBEE" />
 </div>
</div>

El CSS:

En el CSS soló hará falta dos cosas: oculta los elementos con el ancho de la clase 'get' y establecer la altura de la div con "diagram" de la identificacion

.get {
 display:none;
}

#diagram {
 float:left;
 width:600px;
 height:600px;
}

El JavaScript:

La idea principal es crear primero un objeto Raphael (variable 'r') y dibujar nuestro primer circulo con un radio que se especifica en el 'rad'.

Entonces se crea un nuevo cirulo en el objeto Raphael. Tenemos el centro del circulo (x: 300px y:300px) y añadir un texto a la misma.

var o = {
 init: function(){
  this.diagram();
 },
 random: function(l, u){
  return Math.floor((Math.random()*(u-l+1))+l);
 },
 diagram: function(){
  var r = Raphael('diagram', 600, 600),
   rad = 73;

r.circle(300, 300, 85).attr({ stroke: 'none',fill:'#193340'});

  var title = r.text(300, 300, 'Skills').attr({
   font: '20px Arial',
   fill: '#fff'
  }).toFront();

 }
}

Ahora, vamos a ir un paso más allá.

Vamos a ampliar el objeto Raphael con algunos atributos personalizados:

• alfa - ángulo del arco
• número al azar entre el rango especificado - al azar
• sx, sy - empezar a dibujar desde este punto
• x,y - la elaboración final en este punto
• camino

1. M - ir al punto de partida. No hay línea se dibuja. Todos los datos de ruta deben comenzar con un comando 'moveto'
2. A - radio-x, el radio x eje de rotacion, de gran arco de bandera, barrido de bander, x,y.  

var o = {
init: function(){
this.diagram();
},
random: function(l, u){
return Math.floor((Math.random()*(u-l+1))+l);
},
diagram: function(){
var r = Raphael('diagram', 600, 600),
rad = 73;
r.circle(300, 300, 85).attr({stroke:'none',fill:'#193340'});
var title = r.text(300, 300, 'Skills').attr({
font: '20px Arial',
fill: '#fff'
}).toFront();
r.customAttributes.arc = function(value, color, rad){
var v = 3.6*value,
alpha = v == 360 ? 359.99 : v,
random = o.random(91, 240),
a = (random-alpha) * Math.PI/180,
b = random * Math.PI/180,
sx = 300 + rad * Math.cos(b),
sy = 300 - rad * Math.sin(b),
x = 300 + rad * Math.cos(a),
y = 300 - rad * Math.sin(a),
path=[['M',sx,sy],['A',rad,rad,0,+(alpha > 180),1,x,y]];
return { path: path, stroke: color }
}
$('.get').find('.arc').each(function(i){
var t = $(this),
color = t.find('.color').val(),
value = t.find('.percent').val(),
text = t.find('.text').text();
rad += 30;
varz=r.path().attr({arc:[value,color,rad],'stroke-width':26});
z.mouseover(function(){
this.animate({'stroke-width':50,opacity:.75},1000,'elastic');
if(Raphael.type != 'VML') //solves IE problem
this.toFront();
title.animate({ opacity: 0 }, 500, '>', function(){
this.attr({text:text+'\n'+value+'%'}).animate({opacity:1},500,
'<');});
}).mouseout(function(){
this.animate({'stroke-width':26,opacity:1},1000,'elastic');
});
});
}
}

Espero les alla gustado, esto es todo por hoy.

Cualquier duda y preguntas seran contestadas.