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

Meu código não está funcionando, por quê?

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 Ezequiel Ambos Mâncio
| 18.9k xp | 23 posts
<canvas width="600" height="400"> </canvas>

<script>

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

function rect(x, y, x2, y2, color) {

    pincel.fillStyle = color;
    pincel.fillRect(x, y, x2, y2);

    pincel.strokeRect(x, y, x2, y2);
}

function text(txt, x, y) {

    pincel.font = "20px Georgia";
    pincel.fillStyle = "Black";
    pincel.fillText(txt, x, y);
}

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

function porcentage(x, y, serie, color, texto) {

    text(texto, x, y - 10);

    var somaAltura = 0;

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

        var altura = serie[now];

        rect(x, y + somaAltura, 50, altura, somaAltura = somaAltura + altura);
    }
}

porcentage(50, 50, serie2015, cores, "2015");
porcentage(150, 50 serie2016, cores, "2016");

</script>
2 respostas
solução!
por MARIA ISABEL TEIXEIRA
| 1045.8k xp | 2507 posts
Alura Scuba Team Monitora | Suporte Educacional | AWS & Azure Certified

Oi, Ezequiel! Como você está?

Há apenas dois pequenos detalhes que vamos mudar: uma vírgula que está faltando no final e o array que vamos chamar para a lista de cores aparecer (se você não colocar, seus gráficos de barra vão ficar pretos). Vou te mostrar!

A vírgula será colocada após o número 50, nesta parte: (na segunda linha, com o ano de 2016. Ao final do código.)

porcentage(50, 50, serie2015, cores, "2015");
porcentage(150, 50 serie2016, cores, "2016");

Após inserir a vírgula, o código funcionará, mas não completamente. Isso é porque o array em que as cores estão sendo guardadas não está em uso. Ou seja: vamos mudar!

No bloco de código dentro da função function porcentage(x, y, serie, color, texto), vamos fazer uma pequena alteração desta linha:

rect(x, y + somaAltura, 50, altura, somaAltura = somaAltura + altura);

E ela ficará assim:

        rect(x, y + somaAltura, 50, altura, color[now]);
        somaAltura = somaAltura + altura;

Prontinho! Assim os gráficos ficam do jeito exato que o instrutor pediu na atividade. :D

Caso as dúvidas persistirem, estamos à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.
por Ezequiel Ambos Mâncio
| 18.9k xp | 23 posts

Muito, Obrigado! COmpreendii!