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

Eu não entendi como VOCÊS querem!

Enxuguei, agora vai! Espero que!!! :D

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

<script>

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13,2]; 
    var cores = ["blue", "green", "yellow", "red"];

    function escreveTexto(texto, x, y){

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

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

        escreveTexto(texto, x, y-10);

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

            pincel.fillStyle = cores[posicao];
            pincel.fillRect(x, y, 100, series[posicao]);
            pincel.fillStroke = "black";
            pincel.strokeRect(x, y, 100, series[posicao]);
            y = y + series[posicao];
        }
    }

    desenhaBarra(50, 50, serie2015, cores, "2015");
    desenhaBarra(200, 50, serie2016, cores, "2016");

</script>
2 respostas
solução!

Ficou bom, Thiago!

Pegou a ideia

Dê uma olhada nessa estrutura feita pelo Daniel em nosso fórum!

Pode te dar outras ideias

Um abraço e bons estudos

Entendi! Obrigado!