Entrar Ainda não tem acesso?
1
resposta

Gráfico mostrando a porcentagens ao lado

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Extraindo funções e atividade Gráfico de barras

por Joao Pedro Valejo dos Santos
| 24.3k xp | 2 posts

Fiz um calculo dentro da própria função para mostrar a porcentagem de cada navegador ao lado do gráfico. Não ficou bem certinho então aceito recomendações de como daria pra fazer isso de uma forma dinâmica.

canvas width="600" height="400"></canvas>

<script>

    var serie2015 = [50,25,20,5];
    var serie2016 = [60,20,16,2];
    var cores = ['blue','green','yellow','red'];

    function desenhaRetangulo(x, y,largura, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle=cor;
        pincel.fillRect(x, y, largura, altura);
        pincel.strokeStyle='black';
        pincel.strokeRect(x, y, largura, altura);
    }

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font='15px Georgia';
        pincel.fillStyle='black';
        pincel.fillText(texto, x, y);    
    }

    function desenhaBarra(x,y,serie,cores,texto){
        var contBarra = 0;
        var contTexto = 50;
        for (var i = 0; i < serie.length; i++) {
            desenhaTexto(x,45,texto);
            desenhaTexto(x+50,y+contTexto-(serie[i]/2),serie[i]+'%');
            desenhaRetangulo(x,y+contBarra,50,serie[i],cores[i]);
            contBarra = contBarra + serie[i];
            contTexto = contTexto + (serie[i]/2);
        }

    }



    desenhaBarra(50,50,serie2015,cores,'2015');
    desenhaBarra(150,50,serie2016,cores,'2016');

</script>
1 resposta
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Bacana, João!

Valeu muito por ter chegado no resultado!

Podemos trabalhar com outros exemplos sim e é muito válido

Dê uma olhada em um outro exemplo

<meta charset="utf-8">

<canvas width="1000" height="400"></canvas>

<script>
    //Representa os percentuais de cada ano.
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var navegador = ['Chrome', 'Firefox', 'Safari', 'outros'];
    var cores = ['blue', 'green', 'yellow', 'red'];

    var py = 0;
    var largura = 0;
    var altura = 50;
    var cor = '';
    desenhaTexto(0, 20, 'Procuramos em alguns relatórios da Alura quais navegadores os nossos alunos utilizavam em 2015 e 2016. Separamos os dados:');

    function desenhaRetangulo(x, y, altura, largura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, largura, altura);
        pincel.strokeStyle = 'black';
        pincel.strokeRect(x, y, largura, altura);
    }

    function desenhaTexto(x, y, texto) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

        pincel.font = '15px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, x, y);
    }

    function desenhaBarra(x, y, serie, cores, texto, porcentagem) {

        for (var i = 0; i < serie.length; i++) {
            altura = serie[i];
            cor = cores[i];
            desenhaRetangulo(x, y + py, altura, 50, cor);
            py += altura
        }
        desenhaTexto(x + 5, y - 5, texto);
        py = 0;
    }

    function desenhaLegenda(x, y, navegador, cores, serie, texto) {
        for (var i = 0; i < serie.length; i++) {
            var n = navegador[i];
            cor = cores[i];
            desenhaRetangulo(x, y, 20, 20, cor);
            desenhaTexto(x - 15, y + 35, n);
            x += 85;
        }
        if (serie == serie2015) {
            for (var i = 0; i < serie.length; i++) {
                altura = serie[i];
                if (i >= 2) {
                    desenhaTexto(x - 240, y - altura - 30, altura + '%');
                } else {
                    desenhaTexto(x - 240, y - altura - 52, altura + '%');
                }
            }
        } else {
            for (var i = 0; i < serie.length; i++) {
                altura = serie[i];
                if (i == 0) {
                    desenhaTexto(x - 90, y - altura - 45, altura + '%');
                }
                if (i == 1) {
                    desenhaTexto(x - 90, y - altura - 41, altura + '%');
                }
                if (i == 2) {
                    desenhaTexto(x - 90, y - altura - 32, altura + '%');
                } if (i == 3) {
                    desenhaTexto(x - 90, y - altura - 24, altura + '%');
                }
                //desenhaTexto(x-100, y-altura-28 , altura +'%');     
            }
        }
    }

    desenhaBarra(100, 50, serie2015, cores, '2015');
    desenhaBarra(250, 50, serie2016, cores, '2016');
    desenhaLegenda(60, 190, navegador, cores, serie2015);
    desenhaLegenda(60, 190, navegador, cores, serie2016);

</script>

Caso tenha alguma dúvida ou queira trazer uma outra forma, será muito bem vindo, João!

Espero ter contribuído!

Um abraço e bons estudos!