Gráfico de barras - minha solução foi esta | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Minha solução foi montada um pouco diferente mas o resultado foi o mesmo tem algum problema?

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

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

    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>

Boa noite! Ao meu ver está correto sim, acredito que não há certo nem errado desde que cheguemos no resultado correto, compreendendo o fundamento que nos foi proposto pelo exercicio... Digo isto porque refiz este 04 vezes... a primeira vez que fiz, criei um bloco para cada quadrado e para cada cor, para cada grafico... cheguei no resultado final, mas... será que era este o fundamento? Não!!! O fundamento era que fossemos "enxugando" nosso codigo de modo a cada vez ficar mais genérico, ou seja, uma função que de certo modo, atendesse todos os graficos... e para isso seria necessário utilizar de todas as ferramentas que já aprendemos... na segunda vez que refiz o codigo, cheguei no resultado final tambem, mas havia uma função para cada grafico e uma para cada texto... na terceira inclui os textos junto dos graficos, e na quarta e última, consegui fazer com que depois de declarado as funções e variaveis, uma só função pudesse ser utilizada para atender cada conjunto... segue o codigo:

Obs.: Eu dobrei os valores dos graficos para quea visualização ficassem maiorer na pagina. Inventei um conjunto chamado serie2017 somente para teste, pra ver se tudo se encaixava no seu devido lugar.

<center><canvas width="1000" height="500"></canvas></center>

<script>

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

    pincel.font = '20px Georgia';
    pincel.fillStyle = 'black';
    pincel.fillText('Grafico 2: Uso dos principais navegadores de internet dentre os alunos da Alura nos anos 2015/2016/2017.', 0, 30);

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

        function retangulo(x, y, altura, largura, cor){
            pincel.fillStyle = cor;
            pincel.fillRect(x, y, altura, largura);
            pincel.strokeRect(x, y, altura, largura);
        }

    var navegadores = ['Chrome', 'Firefox', 'Safari', 'Outros'];
    var cores = ['blue', 'green', 'yellow', 'red'];
    var ano = [2015, 2016, 2017];
    var serie2015 = [100, 50, 40, 10];
    var serie2016 = [130, 40, 26, 4];
    var serie2017 = [60, 80, 30, 30];


        function desenhaGrafico(ano, x, y, serie){
            for(var i = 0; i < navegadores.length; i++){
                escreve((serie[i]/2) + '% ' + navegadores[i], x + 105, y + 0.5 * serie[i]);
                retangulo(x, y, 100, serie[i], cores[i]);
                    y = y + serie[i];
            } 
                escreve(ano, x + 40, y - 220);
        }

    desenhaGrafico(2015, 10, 200, serie2015);
    desenhaGrafico(2016, 400, 200, serie2016);
    desenhaGrafico(2017, 790, 200, serie2017);

</script>

E este foi a forma que alcancei melhor resultado, chegando a uma compreensao bem mais solida daquilo que foi proposto. Abraços! Vamos nos ajudando!

Mergulhe em programação