Como criar um diagrama de porcentagens com HTML5 e CSS3

Já não é novidade nenhuma falarmos de HTML5 quando o assunto é desenvolvimento Web. Dos 3 últimos anos pra cá, muitos desenvolvedores dedicam seu tempo a desenvolver cada vez mais componentes que geram algum valor ao cliente de maneira cada vez mais dinâmica.  Hoje vamos aprender a como criar um diagrama ou gráfico igual a este com CSS3 representando seus valores em porcentagem

Inicialmente vamos utilizar uma biblioteca de vetores bastante simples que nos ajudará a ‘imprimir’ os círculos de maneira ordenada na página. Você pode ver mais exemplos aqui na biblioteca do desenvolvedor também.

Inicialmente vamos ao nosso arquivo HTML :

 <div id="skills" class="step">
        <div class="legend">
            <div class="skills">
                <ul>
                    <li class="jq">SEO</li>
                    <li class="css">C#</li>
                    <li class="html">Asp.NET</li>
                    <li class="mvc">MVC</li>
                    <li class="php">SCRUM</li>
                    <li class="sql">SQL</li>
                </ul>
            </div>
        </div>
        <div id="diagram"></div>
        <div class="get">
            <div class="arc">
                <span class="text">SEO</span>
                <input type="hidden" class="percent" value="97" />
                <input type="hidden" class="color" value="#b72228" />
            </div>
            <div class="arc">
                <span class="text">C#</span>
                <input type="hidden" class="percent" value="89" />
                <input type="hidden" class="color" value="#416587" />
            </div>
            <div class="arc">
                <span class="text">Asp.NET</span>
                <input type="hidden" class="percent" value="75" />
                <input type="hidden" class="color" value="#6999C7" />
            </div>
            <div class="arc">
                <span class="text">SCRUM</span>
                <input type="hidden" class="percent" value="53" />
                <input type="hidden" class="color" value="#9BCBF8" />
            </div>
            <div class="arc">
                <span class="text">MVC</span>
                <input type="hidden" class="percent" value="37" />
                <input type="hidden" class="color" value="#7BABD9" />
            </div>
            <div class="arc">
                <span class="text">SQL</span>
                <input type="hidden" class="percent" value="31" />
                <input type="hidden" class="color" value="#BEDBE9" />
            </div>
        </div>
    </div>
    

Ela consiste nas seguintes partes:

• Uma lista que será a legenda do nosso diagrama
• Uma div que será a área impressa
• Uma lista de divs que contem o texto, o valor, e a cor de cada círculo.

Eu desenhei 6 itens contendo possíveis habilidades de um desenvolvedor.

Assim, vamos deixá-lo dessa maneira por enquanto.

Vamos trabalhar em um arquivo javascript que irá funcionar com as configurações do nosso diagrama :

    
var o = {
    //inicia o gráfico
	init: function(){
		this.diagram();
	},
	//retorna os gráficos em posições aleatórias a cada carregamento da página
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	//opções do diagrama
	diagram: function(){
	    //Raphael é o nome do plugin, e 600 é tamanho e altura
		var r = Raphael('diagram', 600, 600),
			rad = 73,
			defaultText = 'Skills',
			speed = 250;
		
		//círculo desenhado no interior do diagrama
		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#363636' });
		var title = r.text(300, 300, defaultText).attr({
			font: '20px PTSansBold',
			fill: '#fff'
		}).toFront();
		
		//retorna as posições dos círculos de maneira que um 'encaixa' no outro
		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 }
		}
		
		//pega o valor do conteúdo da div( que está no html com a classe get  ) e lê todas as div's com a classe arc
		$('.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;	
			//desenha o círculo com as configurações
			var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });
			
			//função de zoom no mouse hover
			z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
				this.toFront();
				title.stop().animate({ opacity: 0 }, speed, '>', function(){
					this.attr({ text: text + '\n' + value + '%' }).animate({ opacity: 1 }, speed, '<');
				});
            }).mouseout(function(){
				this.stop().animate({ 'stroke-width': 26, opacity: 1 }, speed*4, 'elastic');
				title.stop().animate({ opacity: 0 }, speed, '>', function(){
					title.attr({ text: defaultText }).animate({ opacity: 1 }, speed, '<');
				});	
            });
		});
		
	}
}
//instancia o gráfico
$(function(){ o.init(); });

O básico está pronto! Agora vamos conferir o arquivo CSS que gera o gráfico de maneira bacana :

/* ================= SKILLS  ================== */

#skills
{
    width: 800px;
    height:600px;
    padding: 15px ;
    position: relative;
    border: 1px solid #ccc;
   
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
    background:#EEE;
}

#skills h2
{
    text-align:center;
    margin-left:40px;
	padding-top:10px;
}
.legend {
	float:left;
	width:100px;
	-webkit-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   -ms-transform: rotate(1deg);
   transform: rotate(1deg);
   margin-left:1px;
}
#diagram {
	float:left;
	width:500px;
	height:500px;
	margin-top:50px;
	margin-left:100px;
	-webkit-transform: rotate(1deg);
   -moz-transform: rotate(1deg);
   -o-transform: rotate(1deg);
   -ms-transform: rotate(1deg);
   transform: rotate(1deg);
}
.skills ul, .skills li {
	display:block;
	list-style:none;
	margin:0px;
	padding-left:0px;
	padding-top:10px;
}
.skills li
{
    font-family: PTSans;
    font-size: 26px;
    float: left;
    clear: both;
    padding: 0px 15px 0px 45px;
    line-height: 54px;
    margin-top: 5px;
	margin-bottom: 5px;
	color:#fff;
}
.skills .seo {
	background:#b72228;
}
.skills .csharp {
	background:#416587;
}
.skills .asp {
	background:#6999C7;
}
.skills .mvc {
	background:#9BCBF8;
}
.skills .scrum {
	background:#7BABD9;
}

.skills .sql {
	background:#BEDBE9;
}
.get {
	display:none;
}

Com isto está pronto! Não se esqueça de utilizar o Jquery anteriormente pois este script utiliza Jquery.

Caso você queira fazer o download do projeto e brincar um pouco, sinta-se a vontade : Download Diagrama.

Bom, por hoje é só, espero que gostem!

Siga-nos na Fã page do Facebook