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

Não aparece nada mas depois que chamo desenhaBarra pelo console com qualquer valor, dá erro mas aparece o gráfico

<meta charset="UTF-8">
<canvas width="700" height="800"></canvas>

<script>

    function desenhaRetangulo(x, y, comprimento, altura, cor) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

    function desenhaTexto(texto, x , y) {
        var tela = document.querySelector('canvas');
        var pincel = tela.getContext('2d');

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

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

        desenhaTexto(nome, x, y);
        y = y + 10;

        var num = serie.length;
        for(var i = 0; i<num; 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');
    }

</script>
2 respostas
solução!

Vinicius,

tá (quase) certinho seu código.

Só tem um erro: tá tudo dentro das functions, o que faz com que nada execute de fato. Precisa da parte do código que execute (e que chame as functions para serem executadas.

Basta colocar para fora da chave este trecho:

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

    desenhaBarra(50,50,serie2015,cores,'2015');

e acrescentar o desenhaBarra da outra série ao final:

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

E pode colocar estas declarações de variável no escopo global, já que são usadas em duas funções:

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

Ficaria assim completo:

<meta charset="UTF-8">
<canvas width="700" height="800"></canvas>

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

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

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

    function desenhaTexto(texto, x , y) {

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

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

        desenhaTexto(nome, x, y);
        y = y + 10;

        var num = serie.length;
        for(var i = 0; i<num; 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>

Obrigado, foi um erro "besta" então, achei que tinha feito algo errado na lógica em si. Além disso, gostei da dica de colocar de fora aquelas duas linhas.