1
resposta

Outra forma!

Fiz de uma outra maneira que também deu certo.

<canvas width="600" height="400"></canvas>

<script>

       function desenhaRetangulo(x, y, largura, altura, cor) {

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

            pincel.fillStyle=cor;
            pincel.fillRect(x,y, largura, altura);
            pincel.strokeStyle='black';
            pincel.strokeRect(x,y, largura, altura);

        }

        function desenhaTexto(x, y, texto) {

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

            pincel.font='15px Georgia';
            pincel.fillStyle='black';
                pincel.fillText(texto, x, y);   

        }

    function desenhaBarra(x,y,serie,cores,texto) {

        desenhaTexto(x,y-10,texto);

        var y1 = y;    

        for(var posicao = 0;posicao < 4;posicao++) {

            desenhaRetangulo(x,y1,50,serie[posicao],cores[posicao]);
            y1 = y1 + serie[posicao];
        }

    }    

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

    desenhaBarra(50, 50, serie2015, cores, '2015');
    desenhaBarra(150, 50, serie2016, cores, '2016');    

</script>
1 resposta

Oi Juliana, obrigado por compartilhar. É sempre legal quando soluções diferentes são colocadas no fórum, isso faz com que todo mundo melhore.