Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Gráfico de Barras

Boa tarde,

Estou com uma dificuldade na hora de implementar o código dessa atividade de lógica, acredito que seja alguma coisa dentro da repetição talvez, ou algo dentro da função Retangulo. Porque ele consegue reproduzir o texto dos anos normalmente quando chamo a função barra, mas não está gerando os retangulos que foram criados na função retangulo, só mostra os anos e fim.

O laço que foi criado no arranjo está incorreto?

To meio que matutando a tarde toda e não encontrei o erro, como utilizo a tarde somente para resolução de exercicios, estou com essa dúvida.

Eu uso o Visual Studio Code e por isso não está com a tag script, nem a canva e etc.

Obrigado

function Retangulo(x, y, largura, altura, cor) {      //criação da função do retângulo
        var tela = document.querySelector("canvas"); //canvas básico
        var pincel = tela.getContext("2d");

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

    function Texto(x, y, texto) {    //criação da função com os textos dos gráficos.
        var tela = document.querySelector("canvas"); //canvas básico 
        var pincel = tela.getContext("2d");

        pincel.font="30px Arial";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);    
    }

    function Barra(x, y, serie, cores, texto) {        //função da criação da geração dos "gráficos" das barras 
        Texto(x, y - 10, texto); //funcao para chamar o texto do gráfico

        var somaAltura = 0; //declarando variável auxiliar seguindo o exemplo visto nas aulas anteriores de arranjo.

        for(var posicao=0; posicao < serie.lenght; posicao++){  // laço para estrutura de repetição definindo posição inicial e como será percorrido no arranjo
            var altura = serie[posicao];
            Retangulo(x, y + somaAltura, 50, altura, cores[posicao]);
            somaAltura = somaAltura + altura;
        }

    }

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


    Barra(50, 50, serie2015, cores, "2015");
    Barra(150, 50, serie2016, cores, "2016");
2 respostas
solução!

Bom dia, Victor! Tudo bem?

Mil desculpas pela demora, testei seu código e só precisa fazer um ajuste: no laço de repetição dentro da função barra() pra desenhar o retângulo, tem serie.lenght mas o correto seria serie.length. Só trocar o lugar da letra h que vai desenhar os gráficos.

É normal acontecer essa confusão, as vezes eu também troco o lugar do h em width, weight e etc. hehe

Bons estudos!

Muito obrigado Mônica, deu certo!

Era somente isso, que desatenção kkkk. Peço desculpas por essa pequena dúvida.

De qualquer forma, muitíssimo obrigado.