Ao colocar uma variável quando se pode usar a própria <serie[i]> é o que deixa a resposta mais complicada e na minha opinião bem desnecessária. Então aqui vai a minha explicação...
function desenhaBarra(x, y, serie, cores, texto) {
desenhaTexto(x, 30, texto);
var somaSerie = 0;
for(var i = 0; i <= 4; i++){
desenhaRetangulo(x, y + somaSerie, 50, serie[i], cores[i]);
somaSerie = somaSerie + serie[i];
}
}
desenhaBarra(50, 50, serie2015, cores, "2015");
desenhaBarra(150, 50, serie2016, cores, "2016");Explicação usando desenhaBarra(50, 50, serie2015, cores, "2015"); A questão mais difícil do exercício que você vai notar é para que os retângulos venham seguidos do outro o primeiro índice do laço não pode começar com o primeiro item da lista , que no caso é 50 (serie2015 = [50, 25, 20, 5]).
Ex.: desenhaRetangulo(x, y + serie[i], 50, serie[i], cores[i]); i = 0 serie2015 = [50, 25, 20, 5] Logo, na primeira varredura desenhaRetangulo(50, 50 + 50, 50, 50, "blue); desenhaRetangulo(50 , 100 <eixo y + serie[0]>, 50 <largura do retângulo>, 50 <altura do retângulo = serie[0]>, "blue");
Isso faz com que y = 50 vai ser somado ao item 50 da serie2015 e o primeiro retângulo vai ser iniciado no eixo de y=100 e não de y = 50. (Note que y = 50 não tem nada a ver com o 50 da serie2015 é apenas uma coincidência, só quer dizer que o gráfico vai começar do eixo y = 50 enquanto o 50 do serie2015 é a altura do primeiro retângulo).
Na segunda varredura, i = 1 serie2015 = [50, 25, 20, 5]
desenhaRetangulo(50, 50 + 25, 50, 25, "green");
desenhaRetangulo(50, 75 <eixo y + serie[1]>, 50, 25, "green");Dessa forma, observe que o segundo retângulo vai ser iniciado no eixo 75 que é menor do que o primeiro retângulo que começa no eixo 100! Isso fará que o segundo retângulo se inicie acima do primeiro!
A alternativa apresentada para resolver esse problema é que o primeiro item a ser somado com o eixo y tem de ser 0 e não o primeiro item da serie[i]! Assim o ponto de início do primeiro retângulo e dos demais irão começar com os valores da serie[i].
50 + 0 (y + 0) Primeiro retângulo começa no eixo y 50.
50 + 50 (y + 50) Segundo retângulo começa no eixo y 100.
100 + 25 (y + 25) Terceiro retângulo começa no eixo y 125.
125 + 20 (y + 20) Ultimo retângulo começa no eixo y 145.
Mas como não queremos sempre colocar um 0 dentro do Array uma alternativa de aplicar é criar uma variável que sempre somará o valor da série a medida que o laço da função se incrementa.
var somaSerie = 0;Criamos uma variável somaSerie e colocamos no segundo parâmetro:
desenhaRetangulo(x, y + somaSerie, 50, serie[i], cores[i]);
somaSerie = somaSerie + serie[i]; Assim os retângulos vão se formando um após o outro com a altura da serie[i]!
desenhaRetangulo(50 , 50, 50, 50, "blue"); i = 0
somaSerie = 0 + 50;
desenhaRetangulo(50, 100, 50, 25, "green"); i = 1
somaSerie = 50 + 25;
desenhaRetangulo(50, 125, 50, 20, "yellow"); i = 2
somaSerie = 75 + 20;
desenhaRetangulo(50, 145, 50, 5, "red"); i = 3
somaSerie = 95 + 5;