Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Suporte para canvas no IE

Publicado em: 2009-12-17 — 18.175 visualizacoes         

Nesta matéria vou mostrar como obter um gráfico tipo pizza a partir de uma tabela de dados.

Vamos usar o elemento canvas da HTML 5 e um código JavaScript para atingir nosso propósito. É sabido que o Internet Explorer, versões atuais, não suportam o elemento canvas, mas a novidade nesta matéria é apresentar um script denominado Explorer Canvas que faz o IE suportar o elemento canvas.

Observe na figura a seguir um screenshot da renderização do que iremos obter no final da matéria.

grafico de pizza e tabela

Visite uma página demonstração para a técnica descrita.

E aqui estão os ingredientes da receita:

  1. Um elemento canvas;
  2. Uma tabela de dados;
  3. JavaScript para extrair os dados da tabela;
  4. JavaScript para plotar os dados em canvas.

Elemento canvas

 
 
<canvas id="canvas" width="300" height="300"></canvas>

Tabela de dados

<table id="mydata">      
 <thead> 
  <tr>
    <th>Linguagem</th>
    <th>Valor</th> 
  </tr>
 </thead>

 <tbody>    
  <tr>
    <td>JavaScript</td>  
    <td>100</td>
  </tr>      
  <tr>
    <td>CSS</td>  
    <td>200</td>  
  </tr>      
  <tr>
    <td>HTML</td>  
    <td>300</td>  
  </tr>      
  <tr>
    <td>PHP</td>  
    <td>50</td>  
  </tr>      
  <tr>
    <td>MySQL</td>  
    <td>30</td>  
  </tr>      
  <tr>
    <td>Apache</td>  
    <td>10</td>  
  </tr>      
    <tr><td>Linux</td>  
    <td>30</td>  
  </tr>
 </tbody>  
</table>

JavaScript para extrair os dados da tabela

Vamos começar com algumas configurações. Iremos informar ao script qual é o id da tabela de dados, o id do elemento canvas e a coluna que contém os dados:

 
 
// a tabela e o elemento canvas na marcação HTML   
var data_table = document.getElementById('mydata');  
var canvas = document.getElementById('canvas');  
var td_index = 1; // qual td comtém os dados

A seguir vamos selecionar todas a linhas da tabela (tr’s) e criar um loop por elas selecionando suas células (td’s). Continuando adicionaremos os dados da tabela em um array e obteremos o total de dados na coluna. Criamos um array de cores randômicas. Colorimos cada uma das linhas da tabela com uma cor randômica selecionada (veremos a função para selecionar a cor, denominada getColor(), logo adiante)

 
 
var tds, data = [], color, colors = [], value = 0, total = 0;  
var trs = data_table.getElementsByTagName('tr'); // todas as tr's   
for (var i = 0; i < trs.length; i++) {      
tds = trs[i].getElementsByTagName('td'); // todas as td's
         
if (tds.length === 0) continue; //  não há td's, vá em frente
         
// extrair o valor da td e atualizar o total       
value  = parseFloat(tds[td_index].innerHTML);      
data[data.length] = value;      
total += value;
        
// cor randômica       
color = getColor();      
colors[colors.length] = color; // armazena       
trs[i].style.backgroundColor = color; // colorir a tr   
}

JavaScript para plotar os dados em canvas

Chegou a hora da parte divertida, desenhar! Primeiro precisamos criar o objeto contexto para canvas. A seguir estabelecer o raio e o centro do gráfico de pizza, tudo isto tendo em vista as dimensões de canvas:

 
 
// estabelecer contexto e definir raio e centro   
var ctx = canvas.getContext('2d');  
var canvas_size = [canvas.width, canvas.height];  
var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;  
var center = [canvas_size[0]/2, canvas_size[1]/2];

A seguir vamos criar um loop pelos dados da tabela e colorir os segmentos do gráfico. Para desenhar um segmento usaremos os seguintes métodos do objeto contexto:

  • beginPath() – inicia um setor;
  • moveTo() – coloca o ponteiro de desenho no centro;
  • arc() – desenha um arco de círculo;
  • lineTo() – termina o setor desenhando uma linha de volta ao centro;
  • closePath() e fill() fecha o setor e preenche com uma cor já selecionada.

Observe a seguir o código para o desenho:

 
 
var sofar = 0; // monitora o andamento do script   
// loop por data[]   
for (var piece in data) {        
var thisvalue = data[piece] / total;        
ctx.beginPath();      
ctx.moveTo(center[0], center[1]); 
// centro do gráfico       
ctx.arc(  // desenha próximo arco           
center[0],          
center[1],          
radius,         
 Math.PI * (- 0.5 + 2 * sofar), // -0.5 define o início no topo           
Math.PI * (- 0.5 + 2 * (sofar + thisvalue)),          false      );        
ctx.lineTo(center[0], center[1]); // linha de retorno ao centro      
 ctx.closePath();      
ctx.fillStyle = colors[piece];    // cor       
ctx.fill();        
sofar += thisvalue; // incrementa o andamento do script   
}

Função utilitária

O script da função para definir uma cor randômica é mostrado a seguir:

// gera uma cor randômica       
function getColor() {          
var rgb = [];          
for (var i = 0; i < 3; i++) {              
rgb[i] = Math.round(100 * Math.random() + 155) ; // [155-255] = lighter colors           
}          
return 'rgb(' + rgb.join(',') + ')';      
}

Isto é tudo! Divirta-se com seu gráfico de pizza 😀

Créditos:
Author: Stoyan Stefanov
URL do artigo original: http://www.phpied.com/canvas-pie/

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2009-12-17 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2009/12/17/suporte-para-canvas-no-ie/trackback no seu site.

11 comentários na matéria: “Suporte para canvas no IE”

  1. Casa do Escritório Curitiba-KettyNo Gravatar disse:

    Otimo trabalho

  2. Ana LuizaNo Gravatar disse:

    Obrigada por compartilhar seu conhecimento , parabéns pelo blog

  3. marcelo portoesNo Gravatar disse:

    digo ‘automaticamente’

  4. marcelo portoesNo Gravatar disse:

    function getColor() Muito interessante esta função de cores mas não entendi onde ela busca os arquivos de cores automático

  5. BalançaNo Gravatar disse:

    Obrigado pela dica, valeu. Como sempre nota 1000 seu blog
    Julia

  6. MicoxNo Gravatar disse:

    Ótimo tuto maujor. Valeu.

  7. Carla CamposNo Gravatar disse:

    Parabéns pelo post.

  8. EmersonNo Gravatar disse:

    Obrigado pela dica.

  9. Ramon SamudioNo Gravatar disse:

    Obrigado pela dica.

  10. tixturismoNo Gravatar disse:

    Parabéns pelo blog!

  11. SérgioNo Gravatar disse:

    Isso é ótimo!
    Pena que ainda é arriscado usar isso para sites atuais =/

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo