Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Gráfico com codificação reduzida

<meta charset="UTF-8">
<canvas width="600" height="400"></canvas>

<script>
    let tela = document.querySelector('canvas');
    let pincel = tela.getContext('2d');
        pincel.fillStyle = 'lightgrey';    
        pincel.fillRect(0, 0, 600, 400); 
        pincel.fillStroke = 'black';
        pincel.font='20px Georgia';


    let anos = [2015, 2016];
    let SerieAno = [[50, 25, 20, 5], [65, 20, 13, 2]];
    let coresSeries = ["blue", "green", "yellow", "red"];

    let x = 50;

    for (let contAnos = 0; contAnos < anos.length; contAnos++) {
        let y = 50;
        var valoresSerie = SerieAno[contAnos];

        pincel.fillStyle='black';
        pincel.fillText(anos[contAnos], x, y-10);

        for (let contPerc = 0; contPerc < valoresSerie.length; contPerc++) {
            var perc = valoresSerie[contPerc];
            pincel.fillStyle = coresSeries[contPerc];
            pincel.fillRect(x, y, 50, perc);
            pincel.strokeRect(x, y, 50, perc);
            y = y + perc;
        }
        x = x + 100;
    }
</script>
2 respostas
solução!

Não é uma dúvida!

Esta é minha solução que consegui fazer conforme o exercício proposto, porém, com um pouco menos de codificação.

Espero que sirva de inspiração ou possa ajudar a quem estiver precisando.

Abraços e bons estudos a todos! ;)

ficou show, mais enxuto.