1
resposta

Alguém pode me ajudar com esse código por favor? Não consigo escrever os gráficos, apenas os números!

<meta charset="utf-8">

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

<script type="text/javascript">

    function desenhaquadrado(x , y , altura , largura , corFundo , corBorda)
    {
        if(corBorda == "")
        {
            pincel.fillStyle = corFundo;
            pincel.fillRect(x , y , altura , largura);
        }
        if(corFundo == "")
        {
            pincel.strokeStyle = corBorda;
            pincel.strokeRect(x , y , altura , largura);
        }
        else
        {
            pincel.fillStyle = corFundo;
            pincel.fillRect(x , y , altura , largura);
            pincel.strokeStyle = corBorda;
            pincel.strokeRect(x , y , altura , largura);
        }
    }

    function desenhatexto(texto , x , y , fonte , tamFonte , cor)
    {
        pincel.font = tamFonte + "px " + fonte;
        pincel.fillStyle = cor;
        pincel.fillText(texto , x , y);
    }

    function desenhacirculo(x , y , raio , corFundo , corBorda)
    {
        if(corBorda == "")
        {
            pincel.fillStyle = corFundo;
            pincel.beginPath();
            pincel.arc(x , y , raio , 0 , 2 * 3.14);
            pincel.fill();
        }
        if(corFundo == "")
        {
            pincel.strokeStyle = corBorda;
            pincel.beginPath();
            pincel.arc(x , y , raio , 0 , 2 * 3.14);
            pincel.stroke();
        }
        else
        {
            pincel.fillStyle = corFundo;
            pincel.strokeStyle = corBorda;
            pincel.beginPath();
            pincel.arc(x , y , raio , 0 , 2 * 3.14);
            pincel.fill();
            pincel.stroke();    
        }
    }

    function desenhagrafico(x , y , serie , cores , texto)
    {
        desenhatexto(texto , x , y - 10 , "Georgia" , 20 , "black");

        var alturas = 0;

        for(var i = 0; i < serie.lenght; i++)
        {
            var altura = serie[i];
            var cor = cores[i];
            desenhaquadrado(x , y + alturas , altura , 50 , cor , "black");
            alturas = alturas + altura;
        }
    }

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

    var serie2015 = [50, 25, 20, 5];
    var serie2016 = [65, 20, 13, 2];

    var cores = ["blue", "green", "yellow", "red"];

    desenhagrafico(50, 50, serie2015, cores, "2015");
    desenhagrafico(150, 50, serie2016, cores, "2016");
</script>
1 resposta

Mude estas linhas

for(var i = 0; i < serie.lenght; i++)
pincel.fillRect(x , y , altura , largura);
pincel.strokeRect(x , y , altura , largura);

Para

for(var i = 0; i < serie.length; i++)
pincel.fillRect(x , y , largura , altura);
pincel.strokeRect(x , y , largura , altura);

Você escreveu lenght quando o certo é length. Com esta correção o gráfico vai aparecer (bugado, mas vai). Você inverteu largura e altura em fillRect e strokeRect. Corrija para o gráfico não ficar bugado.