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

Gráfico de barras

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 Laura Carlota Custódio
| 31.9k xp | 21 posts

Boa tarde, pessoal! Tudo certo?

Então, confesso que fiquei meio que no copia e cola nesse exercício. Quando tentei implementar a legenda, percebi que não tinha entendido muito bem e acho que minha função ficou grande, porque tentei colocar um for para usar no array 'textoLegenda( )' e não consegui o resultado que eu queria (que era printar o texto da legenda conforme a respectiva cor do quadrado), então deixei como segue abaixo:

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

<script>

let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');

pincel.fillStyle = 'lightgray';
pincel.fillRect(50, 50, 600, 400);

function desenhaRetangulo(eixoX, eixoY, largura, altura, cor) {

       let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

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

function desenhaTexto(eixoX, eixoY, texto) {

       let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');
        pincel.font = '15px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, eixoX, eixoY);    
}

function desenhaBarra(eixoX, eixoY, serie, cores, texto) {

        desenhaTexto(eixoX + 30, eixoY - 10, texto);

        let somaAltura = 0;

        for (let indice = 0; indice < serie.length; indice++){

                let altura = serie[indice];

                desenhaRetangulo(eixoX, eixoY + somaAltura, 100, altura, cores[indice]);
                somaAltura = somaAltura + altura;
        }

}

** Nessa função que eu acrecentaria um for para printar o array textoLegenda, acabou que eu chamei a função desenhaTexto 4x**

function desenhaLegenda(eixoX, eixoY, texto) { 

    desenhaTexto(eixoX + 10, eixoY + 20, texto)

    let alturaRetanguloLegenda = 0;
    for (let indice = 0; indice < retanguloLegenda.length; indice++) {
        let altura = retanguloLegenda[indice];
        desenhaRetangulo(eixoX + 20, eixoY + 40 + alturaRetanguloLegenda, 40, altura, cores[indice]);
        alturaRetanguloLegenda+=altura;
    }

    desenhaTexto(eixoX + 70, eixoY + 60, 'Google');
    desenhaTexto(eixoX + 70, eixoY + 105, 'Firefox');
    desenhaTexto(eixoX + 70, eixoY + 150, 'Safari');
    desenhaTexto(eixoX + 70, eixoY + 190, 'Outros');
}

**

// let textoLegenda = ['Google', 'Firefox', 'Safari', 'Outros']

let retanguloLegenda = [40, 40, 40, 40]; 
let serie2015 = [50, 25, 20, 5];
let serie2016 = [65, 20, 13, 2];
let cores = ['blue', 'green', 'yellow', 'red'];

desenhaLegenda(50, 50, 'LEGENDA:'); 

desenhaBarra(200, 350, serie2015, cores, '2015');

desenhaBarra(400, 350, serie2016, cores, '2016');

desenhaTexto(10, 480, 'Estudo realizado entre 2015 e 2016 sobre os browsers Chrome, Firefox, Safari e outros.'); 


</script>

Podem me ajudar para deixar a função que eu criei mais simples? (a desenhaLegenda( ) )

5 respostas
por Laura Carlota Custódio
| 31.9k xp | 21 posts

Gente,

Fiz outro código que ficou mais ou menos como eu queria!!

Podem dar as suas opiniões, por favor?!

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

<script>

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(50, 50, 600, 400);

    function desenhaRetangulo(eixoX, eixoY, largura, altura, cor) {

        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

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

    function desenhaQuadrado(eixoX, eixoY, cores) {

        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');

        pincel.fillStyle = cores;
        pincel.fillRect(eixoX, eixoY, 40, 40);
        pincel.strokeStyle = 'Black'; 
        pincel.strokeRect(eixoX, eixoY, 40, 40);
    }

    function desenhaTexto(eixoX, eixoY, texto) {

        let tela = document.querySelector('canvas');
        let pincel = tela.getContext('2d');
        pincel.font = '15px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, eixoX, eixoY);    
    }

    function desenhaBarra(eixoX, eixoY, serie, cores, texto) {

        desenhaTexto(eixoX + 30, eixoY - 10, texto);

        let somaAltura = 0;

        for (let indice = 0; indice < serie.length; indice++){

            let altura = serie[indice];

            desenhaRetangulo(eixoX, eixoY + somaAltura, 100, altura, cores[indice]);
            somaAltura = somaAltura + altura;
        }

    } 

    function desenhaLegenda(eixoX, eixoY, cores, navegadores) { // eu acrescentei

        let indice = 0;

        for (let eixoY = 80; eixoY < 240; eixoY += 40) {

            desenhaQuadrado(80, eixoY, cores[indice]);
            indice++;
        }

        let posicao = 0;

        for (let eixoY = 80; eixoY < 240; eixoY += 40) {

            desenhaTexto(eixoX + 50, eixoY + 25, navegadores[posicao])
            posicao++
        }

    }

    let navegadores = ['Google', 'Firefox', 'Safari', 'Outros'];
    let serie2015 = [50, 25, 20, 5];
    let serie2016 = [65, 20, 13, 2];
    let cores = ['blue', 'green', 'yellow', 'red'];

    desenhaTexto(60, 70, 'LEGENDA:'); 

    desenhaLegenda(80, 90, cores, navegadores);

    desenhaBarra(200, 350, serie2015, cores, '2015');

    desenhaBarra(400, 350, serie2016, cores, '2016');

    desenhaTexto(10, 480, 'Estudo realizado entre 2015 e 2016 sobre os browsers Chrome, Firefox, Safari e outros.'); 

</script>

Desde já, agradeço!!=)

solução!
por Cássio Murilo
| 1276.7k xp | 2204 posts
Instrutor Agile Master

Olá, Laura! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Ficou muito bacana!

Eu só tenho um apontamento:

Perceba que no código possui duas variáveis globais: Pincel e Tela

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');

Uma vez que elas são globais, tanto funções e não funções conseguem enxergar, logo não precisamos repetí-las dentro das funções. Assim evitamos repetição de códigos.

Espero ter contribuído, Laura!

Mandou bem!

Parabéns!

por Laura Carlota Custódio
| 31.9k xp | 21 posts

Olá Cássio, imagina!

Bem apontado!!

Então o código poderia ser escrito assim: 


let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');

function desenhaTexto(eixoX, eixoY, texto) {

    tela = document.querySelector('canvas');
    pincel = tela.getContext('2d');

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

ou seria assim:


let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');

function desenhaTexto(eixoX, eixoY, texto) {

    pincel.font = '15px Georgia';
    pincel.fillStyle = 'black';
    pincel.fillText(texto, eixoX, eixoY); 
}
por Cássio Murilo
| 1276.7k xp | 2204 posts
Instrutor Agile Master

Oi, Laura!

Como no início do código já são criadas as variáveis globais


let tela = document.querySelector('canvas');
let pincel = tela.getContext('2d');

Demais funções não é necessaria criá-las novamente

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

<script>

    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(50, 50, 600, 400);

    function desenhaRetangulo(eixoX, eixoY, largura, altura, cor) {

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

    function desenhaQuadrado(eixoX, eixoY, cores) {

        pincel.fillStyle = cores;
        pincel.fillRect(eixoX, eixoY, 40, 40);
        pincel.strokeStyle = 'Black'; 
        pincel.strokeRect(eixoX, eixoY, 40, 40);
    }

    function desenhaTexto(eixoX, eixoY, texto) {
        pincel.font = '15px Georgia';
        pincel.fillStyle = 'black';
        pincel.fillText(texto, eixoX, eixoY);    
    }

    function desenhaBarra(eixoX, eixoY, serie, cores, texto) {

        desenhaTexto(eixoX + 30, eixoY - 10, texto);

        let somaAltura = 0;

        for (let indice = 0; indice < serie.length; indice++){

            let altura = serie[indice];

            desenhaRetangulo(eixoX, eixoY + somaAltura, 100, altura, cores[indice]);
            somaAltura = somaAltura + altura;
        }

    } 

    function desenhaLegenda(eixoX, eixoY, cores, navegadores) { // eu acrescentei

        let indice = 0;

        for (let eixoY = 80; eixoY < 240; eixoY += 40) {

            desenhaQuadrado(80, eixoY, cores[indice]);
            indice++;
        }

        let posicao = 0;

        for (let eixoY = 80; eixoY < 240; eixoY += 40) {

            desenhaTexto(eixoX + 50, eixoY + 25, navegadores[posicao])
            posicao++
        }

    }

    let navegadores = ['Google', 'Firefox', 'Safari', 'Outros'];
    let serie2015 = [50, 25, 20, 5];
    let serie2016 = [65, 20, 13, 2];
    let cores = ['blue', 'green', 'yellow', 'red'];

    desenhaTexto(60, 70, 'LEGENDA:'); 

    desenhaLegenda(80, 90, cores, navegadores);

    desenhaBarra(200, 350, serie2015, cores, '2015');

    desenhaBarra(400, 350, serie2016, cores, '2016');

    desenhaTexto(10, 480, 'Estudo realizado entre 2015 e 2016 sobre os browsers Chrome, Firefox, Safari e outros.'); 

</script>

=D

Mandou bem, Laura!!!!

Um abraço!!!

por Laura Carlota Custódio
| 31.9k xp | 21 posts

Ah, beleza!!! Valeu!!!!

E no caso de eu querer usar a função em outras páginas? É só eu declarar uma variável com o .querySelector pegando o elemento do html e depois chamar a função com o evento que eu quero, por exemplo oninput, onclick, etc...?