Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Abri mão das estruturas de repetição....

Resolvi abrir mão da estrutura de repetição para desenhar de maneira mais simples e, caso queira mudar, é somente modificar os valores das Arrays 2015, 2016 e cores. Ainda apliquei uma legenda com a porcentagem de cada navegador. Uma dúvida é: Daria pra concatenar, o texto da função "desenhatexto" com uma das posições das Arrays?

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

<script> 
    //função para desenhar as barras
    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);
    }
    //função para desenhar os textos
    function desenhatexto (texto, x, y, cor){
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');
        pincel.font = '15px Georgia';
        pincel.fillStyle = cor;
        pincel.fillText (texto, x, y);
    }
    //Arrays com as series de 2015 e 2016 e as cores
    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];
    var cores = ['blue', 'green', 'orange', 'red'];
    //primeira barra
    desenharetangulo (0, 0, 50, serie2015[0], cores[0]);
    desenharetangulo (0,50, 50, serie2015[1], cores[1]);
    desenharetangulo (0,75, 50, serie2015[2], cores[2]);
    desenharetangulo (0,95, 50, serie2015[3], cores[3]);
    //segunda barra
    desenharetangulo (100, 0, 50, serie2016[0], cores[0]);
    desenharetangulo (100,65, 50, serie2016[1], cores[1]);
    desenharetangulo (100,85, 50, serie2016[2], cores[2]);
    desenharetangulo (100,98, 50, serie2016[3], cores[3]);
    //Textos anos
    desenhatexto ('2015', 10, 120, 'black');
    desenhatexto ('2016', 110, 120, 'black');
    //Texto e legendas
    desenhatexto ('Gráfico de uso de Navegadores nos anos de 2015 e 2016.', 0, 150, 'black');
    desenhatexto ('Legenda:', 0, 170, 'black');
    desenhatexto ('Google Chrome', 0, 190, cores[0]);
    desenhatexto ('2015: 50% / 2016: 65%', 120, 190, cores[0]);
    desenhatexto('Firefox', 0, 210, cores[1]);
    desenhatexto ('2015: 25% / 2016: 20%', 120, 210, cores[1]);
    desenhatexto ('Safari', 0, 230, cores[2]);
    desenhatexto ('2015: 20% / 2016: 13%', 120, 230, cores[2]);
    desenhatexto ('Outros', 0, 250, cores[3]);
    desenhatexto ('2015: 5% / 2016: 2%', 120, 250, cores[3]);
</script>
1 resposta
solução!

Fala, Nigel!!! Tudo bem contigo?

Ficou muito bom!

É isso aí!

Como você dispensou a estrutura de repetição, o código exige mais escrita, porém o resultado ficou muito bom!

Só não entendi sobre concatenar o texto com array, pois a array já está sendo passada no argumento da função.