Não entendendo a lógica

Bom dia Eduardo, tudo bom?

A sua descrição do que o código está fazendo está quase correta. Acontece que dentro do loop for estamos atribuindo o valor da variável somaAltura com o próprio valor dela + a altura que desenhamos por último.

var somaAltura = 0;
for (var i = 0; i < serie.length; i++) {
    var altura = serie[i];
    desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);

    somaAltura = somaAltura + altura;
}

Ou seja, se pegarmos o array serie2015:

var serie2015 = [50,25,20,5];

Na primeira volta do loop o valor da variável somaAltura é realmente igual a 0. Mas nessa ultima linha essa variável é reatribuída com o valor 0 + 50 (valor da própria variável + altura da primeira entrada). Ai na segunda volta o valor dessa variável vale 50 e de novo. Na última linha do for reatribuímos o somaAltura novamente com o valor 50+25 (valor da própria variável + altura da segunda entrada) e assim por diante.

Entendeu?

Boa noite, não consigo entender a lógica. Porque o uso da variável (i), e o que significa (i)?

Porque a variável (altura) recebe "série[i]", qual a ligação da " série " com a variável [i]?

E, por favor, explica de outra forma a variável (somaAltura), ainda não entendi.

Obrigado!

Bom dia, tudo bom?

1. A variável i é uma variável auxiliar para o loop for. Basicamente ela nós ajuda a saber em qual volta do loop estamos e se devemos ou não continuar dentro desse loop ou não.

A maneira de escrever esse comando for não é a mais simples de entender, mas ela é assim:

//Para uma variável "i", começando em 0. ( "for(var i=0; ..." )
//Enquanto essa variável for menor que o tamanho da serie( "... ; i<serie.length ; ..." )
//Faça alguma coisa e incremente o valor de "i" em 1 unidade ("... ; i++){    //código executado repetidamente}" )
for (var i = 0; i < serie.length; i++) {
    //código executado repetidamente
}

Na verdade não precisamos chamar essa variável de i, ela poderia ter qualquer nome. Mas esse é um padrão muito comum e vc vai ver que em muitos caos utilizamos a letra i para essa variável.

1. A variável altura recebe a variável serie[i], porque serie é uma variável do tipo lista. Ou seja, dentro da variável serie nós temos uma lista de informações. Para achar um item dessa lista devemos procurar pelo indice dele e isso é feito com os colchetes.

O item serie[0] representa o primeiro valor da lista O item serie[1] representa o segundo valor da lista O item serie[2] representa o terceiro valor da lista E assim por diante.

Como a variável i é uma variável númerica que está sendo acrescida de 1 a cada volta que damos no loop. Cada vez que chamamos o serie[i] recebemos um valor diferente que está dentro dessa lista. Indo do primeiro até o ultimo.

1. A variável soma altura está declarada fora do loop e por isso o valor dela nunca volta para 0 enquanto estamos passando pelo loop for

   var somaAltura = 0;
   for (var i = 0; i < serie.length; i++) {
    var altura = serie[i];
    desenhaRetangulo(x, y + somaAltura, 50, altura, cores[i]);
   
    somaAltura = somaAltura + altura; // cada vez que passamos por essa linha somamos um valor na variável somaAltura
   }

Ou seja, dentro do for nós estamos sempre somando valores na variável somaAltura e utilizando esse novo valor da variável na próxima volta do loop.

Como você teve dificuldade em muitas partes desse código, que são explicadas no curso de lógica 1. Seria legal você voltar nesse curso (https://cursos.alura.com.br/course/logica-programacao-javascript-html) e rever as aulas dele. Lá o professor tem mais tempo pra te explicar e vai passo a passo com vc.

Mas se continuar com duvidas pode mandar aqui no forum :)