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

código gráfico, só sair as corres como devo fazer

<meta charset="utf-8">

<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 desenhaTexto(x, y, texto){

        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'];


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

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

    function desenhaBarra(x, y, serie, cores, texto) {
     desenhaRetangulo(60, 50, 100, 50, 'blue');
    desenhaRetangulo(60, 100, 100, 25, 'green');
    desenhaRetangulo(60, 125, 100, 20, 'yellow');
    desenhaRetangulo(60, 145, 100, 5, 'red');


    desenhaTexto(350, 40, "Série 2016: " + " [" + serie2016 + "]"); 

    desenhaRetangulo(360, 50, 100, 65, 'blue');
    desenhaRetangulo(360, 115, 100, 20, 'green');
    desenhaRetangulo(360, 135, 100, 13, 'yellow');
    desenhaRetangulo(360, 148, 100, 2, 'red');
}

</script>
2 respostas

Olá Amaurilio, tudo bem?

Peço desculpas pela demora em obter um retorno!

Eu analisei seu código e percebi que ele precisará de algumas correções:

Em seu programa você fez a repetição da function desenhaTexto(), portanto seria necessário a eliminação da função repetida que seria essa:

 function desenhaTexto(x, y, texto) {

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

Na function desenhaBarra() a construção dos gráficos foi desenvolvida manualmente, posicionando diversos retângulos em sequência. Poderíamos otimizar o nosso código com o uso de um laço de repetição(for) criando assim uma função genérica que permite desenhar ambos os gráficos.

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

        desenhaTexto(x, y - 10, texto);

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

Note que, inicialmente criamos a variável somaAltura, por meio dela a posição vertical dos nossos retângulos mudará a cada adição ao laço de repetição. Como desejamos criar um gráfico de barras com valores que podem ser alterados até certo nível, dado que os parâmetros que podem ser mudados são posição, cor e legenda,definimos que dentro do for uma variável qualquer (i) sempre vai aumentar em 1 o seu valor quando a repetição do laço for permitida (condição: i < serie.length).

Outro equívoco que percebi em seu código é a aplicação da função desenhaTexto() que está dentro da desenhaBarra(), isso pode ocasionar erro no momento de plotar os gráficos, pois os códigos são lidos em uma sequência direta das linhas de comando, e a adição dessa função pode levar a quebras na lógica do programa. Desse modo, além de solucionarmos este problema, podemos otimizar o nosso código, generalizamos a função usando propriedades substituíveis, dessa forma:

desenhaTexto(x, y - 10, texto);

Após modificarmos as funções declaramos duas vezes a função desenhaBarra com as peculiaridades cada gráfico:

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

Deixo também um artigo sobre Clear Code, onde você irá aprender um pouco mais sobre código limpo e organizado!

A continuação da mensagem está no post a seguir:

solução!

Continuação da mensagem anterior:

Deixo abaixo o código completo com as alterações:

<meta charset="utf-8">

<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) {
     desenhaRetangulo(60, 50, 100, 50, 'blue');
    desenhaRetangulo(60, 100, 100, 25, 'green');
    desenhaRetangulo(60, 125, 100, 20, 'yellow');
    desenhaRetangulo(60, 145, 100, 5, 'red');


    desenhaRetangulo(360, 50, 100, 65, 'blue');
    desenhaRetangulo(360, 115, 100, 20, 'green');
    desenhaRetangulo(360, 135, 100, 13, 'yellow');
    desenhaRetangulo(360, 148, 100, 2, 'red');
}

    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');
    desenhaTexto(350, 40, "Série 2016: " + " [" + serie2016 + "]"); 
    desenhaTexto(37, 40, "Série 2015" + " [" + serie2015 + "]");

</script>

No geral era isso caso tenha dúvidas, estarei à disposição!

Caso este post tenha lhe ajudado, por favor, marcar como solução! ✓.