SummArg | Cursos y recursos para webmasters

08/05/2011

Diagramas animados utilizando Raphael

Recordemos que Raphael es una librería javascript que nos permite manejar gráficos vectorizados. En este caso se la utilizará para dibujar unas gráficas circulares. La idea es dibujar los arcos utilizando funciones matemáticas para mostrar el portentaje de habilidad en el círculo central cuando se pasa el puntero del mouse sobre esos círculos.

Descargar | Demo

El marcado para construir el diagrama es muy sencillo. Primero procedemos a la descarga de los archivos necesarios y a vincularlos en nuestro documento:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/raphael.js" type="text/javascript"></script>
<script src="js/init.js" type="text/javascript"></script>

En init.js se colcará la configuración de los gráficos para Raphael (el archivo está provisto en la descarga desde Codrops)
En el cuerpo del HTML colocamos:

<div id="diagram"></div>
<div>
	<div>
		<span>jQuery</span>
		<input type="hidden" value="95" />
		<input type="hidden" value="#97BE0D" />
	</div>
	<div>
		<span>CSS3</span>
		<input type="hidden" value="90" />
		<input type="hidden" value="#D84F5F" />
	</div>
	<div>
		<span>HTML5</span>
		<input type="hidden" value="80" />
		<input type="hidden" value="#88B8E6" />
	</div>
	<div>
		<span>PHP</span>
		<input type="hidden" value="53" />
		<input type="hidden" value="#BEDBE9" />
	</div>
	<div>
		<span>MySQL</span>
		<input type="hidden" value="45" />
		<input type="hidden" value="#EDEBEE" />
	</div>
</div>

Y en el CSS:

.get {
	display:none;
}
#diagram {
	float:left;
	width:600px;
	height:600px;
}

Listo para usar!

Dejar un comentario