Barras

Olá1

Gostaria de apresentar meus códigos para essa solução!

<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);
    }

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

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


        var posicao = 0;

        if(texto =='2015') {


            while(posicao < 4) {
                desenhaRetangulo(x,y,50,serie[posicao],cores[posicao]);
                y=y+serie[posicao];
                posicao++;
            }    
            desenhaTexto(50,40,texto);
        }

        if(texto == '2016') {
            for(var posicao = 0;posicao < 4;posicao++) {
                desenhaRetangulo(x,y,50,serie[posicao],cores[posicao]);
                y=y+serie[posicao];
            }                    
            desenhaTexto(150,40,texto);
        }

    }

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

</script>

Um forte abraço a todos!!

Att,

Marco Antonio.