<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>
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas
respostas
Meu código não está funcionando, por quê?
solução!
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! ✓.
Muito, Obrigado! COmpreendii!