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 
