Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Gráfico de barras

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

por Kássia Guterres Schipper
| 49k xp | 6 posts

Eu demorei um pouco pra chegar nessa conclusão, mas quando entendi achei legal criar mais uma função para incluir as legendas.

Mina solução ficou diferente da do instrutor, mas funcional igual.

Gostaria de dicas de melhoria!

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script type="text/javascript">
    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");

    pincel.fillStyle = "lightgrey";
    pincel.fillRect(0, 0, 300,400);

    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var cores = ["blue", "green", "yellow", "red"];
    var navegadores = ["Chrome", "Firefox", "Safari", "Outros"];

    function desenhaRetangulo(x, y, largura, altura, cor)
    {

        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, cor, texto)
    {
        desenhaTexto(x,y-5,texto);
        for (var posicao = 0; posicao <= 3; posicao++)
        {
            desenhaRetangulo(x,y,50, serie[posicao],cor[posicao]);
            y = y + serie[posicao];
        }

    }

    function desenhaLegenda(x,y,listaCor,legenda)
    {

        for (var posicao = 0; posicao <= 3; posicao++) 
        {
            desenhaRetangulo(x, y,20, 20, listaCor[posicao]);
            desenhaTexto(x+30, y+15, legenda[posicao]);
            y = y + 30;

        }
    }    

    desenhaTexto(50,20,"Gráfico de barras");
    desenhaBarra(50, 50, serie2015, cores, "2015");
    desenhaBarra(150, 50, serie2016, cores, "2016");
    desenhaTexto(50, 185,"Legenda:");
    desenhaLegenda(50, 200, cores, navegadores);

</script>
1 resposta
solução!
por Cássio Murilo
| 1275.1k xp | 2204 posts
Instrutor Agile Master

Olá, Kássia! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Parabéns pela lógica! Ficou muito bacana mesmo!

Dê uma olhada nessa outra estrutura que pode te dar uma outra ideia

<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>

Um abraço e bons estudos

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software