Suporte para canvas no IE
Publicado em: 2009-12-17 — 29.610 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.
Visite uma página demonstração para a técnica descrita.
E aqui estão os ingredientes da receita:
- Um elemento
canvas; - Uma tabela de dados;
- JavaScript para extrair os dados da tabela;
- JavaScript para plotar os dados em
canvas.
Elemento canvas
1. 2. 3.<canvas id="canvas" width="300" height="300"></canvas>Tabela de dados
01.<table id="mydata"> 02. <thead> 03. <tr>04. <th>Linguagem</th>05. <th>Valor</th> 06. </tr>07. </thead>08. 09. <tbody> 10. <tr>11. <td>JavaScript</td> 12. <td>100</td>13. </tr> 14. <tr>15. <td>CSS</td> 16. <td>200</td> 17. </tr> 18. <tr>19. <td>HTML</td> 20. <td>300</td> 21. </tr> 22. <tr>23. <td>PHP</td> 24. <td>50</td> 25. </tr> 26. <tr>27. <td>MySQL</td> 28. <td>30</td> 29. </tr> 30. <tr>31. <td>Apache</td> 32. <td>10</td> 33. </tr> 34. <tr><td>Linux</td> 35. <td>30</td> 36. </tr>37. </tbody> 38.</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:
1. 2. 3.// a tabela e o elemento canvas na marcação HTML 4.var data_table = document.getElementById('mydata'); 5.var canvas = document.getElementById('canvas'); 6.var td_index = 1; // qual td comtém os dadosA 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)
01. 02. 03.var tds, data = [], color, colors = [], value = 0, total = 0; 04.var trs = data_table.getElementsByTagName('tr'); // todas as tr's 05.for (var i = 0; i < trs.length; i++) { 06.tds = trs[i].getElementsByTagName('td'); // todas as td's07. 08.if (tds.length === 0) continue; // não há td's, vá em frente09. 10.// extrair o valor da td e atualizar o total 11.value = parseFloat(tds[td_index].innerHTML); 12.data[data.length] = value; 13.total += value;14. 15.// cor randômica 16.color = getColor(); 17.colors[colors.length] = color; // armazena 18.trs[i].style.backgroundColor = color; // colorir a tr 19.}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:
1. 2. 3.// estabelecer contexto e definir raio e centro 4.var ctx = canvas.getContext('2d'); 5.var canvas_size = [canvas.width, canvas.height]; 6.var radius = Math.min(canvas_size[0], canvas_size[1]) / 2; 7.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:
01. 02. 03.var sofar = 0; // monitora o andamento do script 04.// loop por data[] 05.for (var piece in data) { 06.var thisvalue = data[piece] / total; 07.ctx.beginPath(); 08.ctx.moveTo(center[0], center[1]); 09.// centro do gráfico 10.ctx.arc( // desenha próximo arco 11.center[0], 12.center[1], 13.radius, 14. Math.PI * (- 0.5 + 2 * sofar), // -0.5 define o início no topo 15.Math.PI * (- 0.5 + 2 * (sofar + thisvalue)), false ); 16.ctx.lineTo(center[0], center[1]); // linha de retorno ao centro 17. ctx.closePath(); 18.ctx.fillStyle = colors[piece]; // cor 19.ctx.fill(); 20.sofar += thisvalue; // incrementa o andamento do script 21.}Função utilitária
O script da função para definir uma cor randômica é mostrado a seguir:
1.// gera uma cor randômica 2.function getColor() { 3.var rgb = []; 4.for (var i = 0; i < 3; i++) { 5.rgb[i] = Math.round(100 * Math.random() + 155) ; // [155-255] = lighter colors 6.} 7.return 'rgb(' + rgb.join(',') + ')'; 8.}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/
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2009/12/17/suporte-para-canvas-no-ie/trackback no seu site.
Otimo trabalho
Obrigada por compartilhar seu conhecimento , parabéns pelo blog
digo ‘automaticamente’
function getColor() Muito interessante esta função de cores mas não entendi onde ela busca os arquivos de cores automático
Obrigado pela dica, valeu. Como sempre nota 1000 seu blog
Julia
Ótimo tuto maujor. Valeu.
Parabéns pelo post.
Obrigado pela dica.
Obrigado pela dica.
Parabéns pelo blog!
Isso é ótimo!
Pena que ainda é arriscado usar isso para sites atuais =/