Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Alguém me ajuda???

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 Mariany Dias
| 45.7k xp | 11 posts

Inventei de fazer uma legenda, eu até fiz o código normal para eu me localizar e entender o que precisava ser feito (que claramente deu certo), acontece que eu quis fazer um loop para diminuir o quanto que escrevo e é ai que está dando tudo errado. Nessa tentativa de dar loop, aparece tudo certinho, na posição que eu queria, porém não consigo deixar ela com as cores e textos que deveria, fica quadradinhos pretos e como texto fica escrito 'undefined' Uma boa alma para me ajudar a clarear a mente e fazer esse código dar certo? kkk

Obs.: Sendo sincera estou com um pouco de dificuldade com o array e sua repetição!! Não consigo muito entender ele bem, estou quebrando a cabeça kk.

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

<script>

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

        desenhaTexto(x, y - 10, texto);
        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++) {

            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

    function desenhaLegenda (x, y) {

        desenhaTexto(250, 65, 'Legenda');
        var somaAltura = 0;

        for(var i = 0; i < 4; i++) {

            var altura = 20;
            desenhaRetangulo(x, y + somaAltura, 10, 10, cores);
            desenhaTexto(270, 90 + somaAltura, textos);
            somaAltura = somaAltura + altura;
        }


        /*
        desenhaRetangulo(250, 80, 10, 10, cores);
        desenhaTexto(270, 90, 'Chrome');

        desenhaRetangulo(250, 100, 10, 10, 'green');
        desenhaTexto(270, 110, 'Firefox');     

        desenhaRetangulo(250, 120, 10, 10, 'yellow');
        desenhaTexto(270, 130, 'Safari'); 

        desenhaRetangulo(250, 140, 10, 10, 'red');
        desenhaTexto(270, 150, 'Outros'); 
        */

    }

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

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

    desenhaLegenda(250, 80, cores);

</script>
3 respostas
por Marcos Pacheco
| 51k xp | 118 posts
Locutor e apresentador

Olá Mariany, ajustei seu código, dá uma olhada e compara com o anterior para encontrar os ajustes, bons estudos



<h3>02 - 10 - Exercício: Gráfico de barras</h3>
<p>Navegadores que os alunos da Alura utilizavam em 2015 e 2016.</p>

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

<script>

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

        desenhaTexto(x, y - 10, texto);
        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++) {

            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

    function desenhaLegenda (x, y, largura, altura, cores, textos) {

        desenhaTexto(250, 65, 'Legenda');
        var somaAltura = 0;

        for(var i = 0; i < 4; i++) {
            var textos = ['Chrome', 'Firefox', 'Safari', 'Outros'];
            var altura = 20;
            desenhaRetangulo(x, y + somaAltura, 10, 10, cores);
            desenhaTexto(270, 90 + somaAltura, textos);
            somaAltura = somaAltura + altura;
        }


        /*
        desenhaRetangulo(250, 80, 10, 10, cores);
        desenhaTexto(270, 90, 'Chrome');

        desenhaRetangulo(250, 100, 10, 10, 'green');
        desenhaTexto(270, 110, 'Firefox');     

        desenhaRetangulo(250, 120, 10, 10, 'yellow');
        desenhaTexto(270, 130, 'Safari'); 

        desenhaRetangulo(250, 140, 10, 10, 'red');
        desenhaTexto(270, 150, 'Outros'); 
        */

    }

    var cores = ['blue','green','yellow', 'red'];

    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

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

    desenhaTexto(250, 90, 'Google');
    desenhaTexto(250, 120, 'firefox'); 
    desenhaTexto(250, 135, 'Edge');
    desenhaTexto(250, 150, 'outros');

</script>
por Marcelo Felipe Pallone
| 120.1k xp | 92 posts
Programador Júnior

Olá querida, de uma olhada no código abaixo: está dentro do "body"

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>02 - 10 - Exercício: Gráfico de barras</title>
</head>
    <body>
        <canvas width="600" height="400"></canvas> 
        <script>

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

                desenhaTexto(x, y - 10, texto); //colocar o texto acima dos gráficos;

                var somaAltura = 0; // variável hipotética;

                //var i = 0 repetiçoes do array 

                for(var i = 0; i < serie.length; i++) {     // lenght != length; ATENÇÃO!

                    var altura = serie[i]; //criando variável das alturas do array dos retangulos;
                    desenhaRetangulo(x, + y + somaAltura, 50 /*largura do rentângulo*/, altura, cores[i]);
                    somaAltura = somaAltura + altura  // para ir somando as alturas de um triangulo no outro

                }    

            }

                function desenhaLegenda (x, y, largura, altura, cores, textos) {

                desenhaTexto(250, 65, 'Legenda');
                var somaAltura = 0;

                for(var i = 0; i < 4; i++) {
                    var textos = ['Chrome', 'Firefox', 'Safari', 'Outros'];
                    var altura = 20;
                    desenhaRetangulo(x, y + somaAltura, 10, 10, cores);
                    desenhaTexto(270, 90 + somaAltura, textos);
                    somaAltura = somaAltura + altura;
                }
            }

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

            desenhaBarra(50, 50, serie2015, cores, "2015");
            desenhaBarra(150, 50, serie2016, cores, "2016");
            desenhaTexto(250, 90, 'Google');
            desenhaTexto(250, 120, 'firefox'); 
            desenhaTexto(250, 135, 'Edge');
            desenhaTexto(250, 150, 'outros');

        </script>
    </body>
</html>
solução!
por Mariany Dias
| 45.7k xp | 11 posts

Obrigada pessoal, por compartilhar o código de vocês, vi algumas coisas legais e que com certeza vou acrescentar no meu. Mas ainda não foi o que eu pretendia, acho que não expliquei direito, perdão.

A boa notícia é que analisando o código de vocês eu finalmente consegui resolver o meu e a legenda deu certo FINALMENTE!! Sério gente obrigada mesmo!!

Segue o código arrumado:

<meta charset="UTF-8">

<h3> Exercício Aula 02 - 10 </h3>
<p>Navegadores que os alunos da Alura utilizavam em 2015 e 2016:</p>

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

<script>

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

        desenhaTexto(x, y - 10, texto);
        var somaAltura = 0;

        for(var i = 0; i < serie.length; i++) {

            var altura = serie[i];
            desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
            somaAltura = somaAltura + altura;
        }
    }

    function desenhaLegenda (x, y) {

        desenhaTexto(250, 65, 'Legenda');
        var somaAltura = 0;

        for(var i = 0; i < 4; i++) {
            var cores = ['blue','green','yellow', 'red'];
            var textos = ['Chrome', 'Firefox', 'Safari', 'Outros'];
            var altura = 20;
            desenhaRetangulo(x, y + somaAltura, 10, 10, cores[i]);
            desenhaTexto(270, 90 + somaAltura, textos[i]);
            somaAltura = somaAltura + altura;
        }

    }

    var cores = ['blue','green','yellow', 'red'];

    var serie2015 = [50,25,20,5];
    var serie2016 = [65,20,13,2];

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

    desenhaLegenda(250, 80);

</script>