Com o sucesso das novas tecnologias, cada vez mais vemos coisas que antes necessitavam de fatores externos, sendo feitos diretamente com CSS e HTML. Nesse artigo iremos ver como criar gráficos de pizza usando CSS3.

Os gráficos podem ser representados de duas formas:

  • Gráfico de Barras.
  • Gráfico de pizza.

Os gráficos de pizza têm se tornado um meio essencial para representar os dados a qualquer público. Representação gráfica dos dados serve muito ao apresentar alguns fatos na frente de qualquer audiência. Existem muitos exemplos onde são usados ​​gráficos de pizza e tem um monte de significado. Algumas delas são:

  • Representando o número de lugares em cada grupo político.
  • Representando o desempenho das vendas de cada departamento em uma organização.
  • Representando as notas obtidas por um aluno em um exame.
  • Representando o número de usuários de um determinado produto, em diferentes localizações geográficas.

Vamos ver duas formas de criar um gráfico de pizza, são elas:

  • Cascading Style Sheets e HTML
  • Jquery e Ajax

Criando Gráficos de pizza usando CSS3 (Cascading Style Sheets)

Para desenhar um gráfico de pizza, a primeira coisa que precisamos fazer é desenhar um círculo. Para criar um círculo que adiciona simplesmente um border radius que é metade do valor de um pixel da largura de uma div. Veja abaixo o código css para criação do círculo.


<style>
     .pieContainer {
          height: 100px;
     }
     .pieBackground {
          background-color: grey;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
</style>
<div id="pieContainer">
     <div class="pieBackground"></div>
</div>
Listagem 1. Código CSS para criação do círculo

O código acima cria um círculo básico que pode ser usado como plano de fundo do gráfico. Uma vez que o círculo básico é criado, em seguida, iremos criar um meio círculo usando o recurso de recorte, a fim de esconder o meio círculo restante. Isto vai criar uma fatia, que é exatamente 50% do círculo. Se quiser um tamanho diferente, precisamos mudar o tamanho desse círculo, largando-o dentro de uma div que controla a rotação e utiliza uma div interna para ajustar o tamanho. Vamos começar a div externa para a primeira fatia a 0 graus, que é o ponto de partida padrão. O código a seguir cria um círculo em primeiro lugar e, em seguida, cria uma pequena seção sobre ele em uma cor diferente:


<!DOCTYPE html>
<html>
 <head>
  <title> Gráfico em Pizza </title>
 </head>
 
 <body>
  <style>
     .pieContainer {
          height: 100px;
     }
     .pieBackground {
          background-color: grey;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
     .pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
     }
     .hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
     }
     #pieSlice1 .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(50deg);
          -moz-transform:rotate(50deg);
          -o-transform:rotate(50deg);
          transform:rotate(50deg);
     }
 
</style>
 
<div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold">
        <div class="pie"></div>
    </div>
</div>
 </body>
</html>
Listagem 2. Criando um círculo e em seguida uma pequena seção sobre ele

Já que somos obrigados a criar várias fatias ou fatias grandes, só precisamos continuar a adicionar mais fatias iguais ou múltiplas cores. O código a seguir mostra como criar várias fatias em um círculo:


<!DOCTYPE html>
<html>
 <head>
  <title> Gráfico em Pizza </title>
 </head>
 
 <body>
<style>
    .pieContainer {
          height: 100px;
     }
     .pieBackground {
          background-color: grey;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     }
     .pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
     }
     .hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
     }
      
     #pieSlice1 .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
     }
     #pieSlice2 {
          -webkit-transform:rotate(150deg);
          -moz-transform:rotate(150deg);
          -o-transform:rotate(150deg);
          transform:rotate(150deg);
     }
     #pieSlice2 .pie {
          background-color: #ccbb87;
          -webkit-transform:rotate(40deg);
          -moz-transform:rotate(40deg);
          -o-transform:rotate(40deg);
          transform:rotate(40deg);
     }
     #pieSlice3 {
          -webkit-transform:rotate(190deg);
          -moz-transform:rotate(190deg);
          -o-transform:rotate(190deg);
          transform:rotate(190deg);
     }
     #pieSlice3 .pie {
          background-color: #cc0000;
          -webkit-transform:rotate(70deg);
          -moz-transform:rotate(70deg);
          -o-transform:rotate(70deg);
          transform:rotate(70deg);
     }
     #pieSlice4 {
          -webkit-transform:rotate(260deg);
          -moz-transform:rotate(260deg);
          -o-transform:rotate(260deg);
          transform:rotate(260deg);
     }
     #pieSlice4 .pie {
          background-color: #cc00ff;
          -webkit-transform:rotate(100deg);
          -moz-transform:rotate(100deg);
          -o-transform:rotate(100deg);
          transform:rotate(100deg);
     }
</style>
 
<div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pieSlice1" class="hold"><div class="pie"></div></div>
     <div id="pieSlice2" class="hold"><div class="pie"></div></div>
     <div id="pieSlice3" class="hold"><div class="pie"></div></div>
     <div id="pieSlice4" class="hold"><div class="pie"></div></div>
</div>
 </body>
</html>
Listagem 3. Código para criar múltiplas fatias do gráfico de pizza

O resultado do código acima pode ser visto na figura 1, nosso gráfico criado em formato de pizza.

Gráfico de pizza
Figura 1. Gráfico em pizza

Criando Gráfico em Pizza com Javascript

Até agora vimos como criar um gráfico em pizza usando apenas CSS3, o que torna a aplicação muito mais leve e mais rápida. Mas também iremos aprender a fazer a mesma coisa usando Javascript ao invés de CSS3.

O código abaixo mostra como fazer isso.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gráfico em pizza com javascript</title>
  
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
#placeholder { width: 250px; height: 150px; }
.legend table, .legend > div { height: 82px !important; opacity: 1 
!important; left: 170px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
</style>
  
<script type="text/javascript" language="javascript" 
src="jquery.Plot.pie.min.js"></script>
  
<script type="text/javascript">
var data = [
    { label: "IE",  data: 19.5, color: "#457447"},
    { label: "Safari",  data: 4.5, color: "#80622B"},
    { label: "Firefox",  data: 36.6, color: "#AA7743"},
    { label: "Opera",  data: 2.3, color: "#3D77AE"},
    { label: "Chrome",  data: 36.3, color: "#890F4E"},
    { label: "Other",  data: 0.8, color: "#3D9E4E"}
];
  
$(document).ready(function () {
    $.plot($("#placeholder"), data, {
    series: {
        pie: {
            show: true
        }
    },
    legend: {
        labelBoxBorderColor: "none"
    }
});
});
 
</script>
</head>
  
<body>
<div id="placeholder"></div>
</body>
</html>
Listagem 4. Criando gráfico em pizza com Javascript

Conclusão

O uso de gráficos é muito importante quando queremos gerar um relatório para algum cliente, ou simplesmente queremos exibir determinadas informações aos usuários de nosso website. Como cada vez mais o tempo de carregamento da página está sendo algo levado a sério, principalmente pelos buscadores, é extremamente importante termos isso como essencial em nosso desenvolvimento diário. Por isso o uso de linguagens nativas como HTML5 e CSS3 vem crescendo de uma maneira gigantesca.

Nesse artigo nós aprendemos a criar gráficos em formato de pizza usando CSS3, você pode agora usar esse conhecimento para usar da melhor maneira possível para você em seus projetos.