Entrar Ainda não tem acesso?
2
respostas

Gráfico de barras com Legendas!!!

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 Andressa Da Costa
| 56.8k xp | 9 posts
<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 contador = 0; contador<serie.length;contador++){
             var altura = serie[contador];
             desenhaRetangulo(x,y+somaAltura,50,altura,cores[contador],sites[contador]);
            somaAltura = somaAltura + altura;
        }

    }   

    function desenhaLegenda() {

        for ( var y = 0; y < 95; y++){
            desenhaRetangulo(450, 25, 100, 100, "white");
            desenhaRetangulo(460, 35, 10, 10, "blue");
            desenhaTexto(480, 45,"Chrome");
            desenhaRetangulo(460, 55, 10, 10,"green");
            desenhaTexto(480, 65,"Firefox");
            desenhaRetangulo(460, 75, 10, 10, "yellow" );
            desenhaTexto(480, 85, "Safari");
            desenhaRetangulo(460, 95, 10, 10, "red");
            desenhaTexto(480, 105, "Outros");

        }
    }


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

    desenhaRetangulo(0,0,600,400,"lightgray");
    desenhaTexto(10,15,"Navegadores que os alunos da Alura utilizavam em 2015 e 2016:");
    desenhaBarra(50, 50, serie2015, cores,"2015");
    desenhaBarra(150, 50, serie2016, cores,"2016");
    desenhaLegenda();

</script>
2 respostas
por Andressa Da Costa
| 56.8k xp | 9 posts

Teria outra forma de simplificar o desenhaLegenda, deixando o código mais genérico?

por Estudante
| 50.4k xp | 3 posts

Boa tarde Rafael, também estou iniciando os estudos mas creio que posso te ajudar a deixar seu código um pouco mais "limpo". Você poderia ter usado arrays e loops para melhorar o seu código. Vou deixar abaixo a minha resolução do exercício, caso não entenda algo, só perguntar! segue:

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

// js
<script>
// canvas
var sc = document.querySelector("canvas");
var brush = sc.getContext("2d");
// years
var y2015 = [50, 25, 20, 5];
var y2016 = [65, 20, 13, 2];
// colors
var colors = ["blue", "green", "yellow", "red"];

function drawGraphic(x, y, years, colors, text) {
    // year
    brush.font = "18px Georgia";
    brush.fillStyle = "black";
    brush.fillText(text, x, y - 10);
    // graphic
    for (var i = 0; i < years.length; i++) {
        brush.fillStyle = colors[i];
        brush.fillRect(x, y, 50, years[i]);
        brush.strokeStyle = "black";
        brush.strokeRect(x, y, 50, years[i]);
        y = y + years[i];
    }
}

drawGraphic(50, 50, y2015, colors, "2015");
drawGraphic(150, 50, y2016, colors, "2016");
</script>