1
resposta

Problemas ao gerar gráfico em barra

<metta charset="utf-8">

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

<script>

    var screen = document.querySelector("canvas");

    var paint = screen.getContext('2d');

    paint.fillstroke = 'black'

    function draw(x, y, z, k, color) {

        paint.fillStyle = color;
        paint.fillRect(x, y, z, k);

    }

    function border(x, y, z, k) {

        paint.fillStroke = 'black';
        paint.strokeRect(x, y, z, k);

    }

    var porc = [0, 0, 0, 0];

    for(var i = 0; i < 4; i++){

        porc[i] = prompt("qual a porcentagem de usuarios no navegador " + (i + 1));

    }

    var x = 0;
    var z = 50;
    var y = 0;

    for (var j = 0; j < 4; j++) {

        var k = porc[j];
        if (j == 0) {

            var color = 'blue';

        }
        if (j == 1) {

            var color = 'green';

        }
        if (j == 2) {

            var color = 'yellow';

        }
        if (j == 3) {

            var color = 'red';

        }
        draw(x, y, z, k, color);
        border(x, y, z, k);
        y = y + porc[j];

    }

    border(0, 0, 50, 100);

</script>

Não consigo identificar o problema deste código, ele roda e desenha os dois primeiros valores no gráfico, mas não os outros.

1 resposta

Opa, Julio!

A questão é que sempre que fazemos um prompt() recebemos uma String.

E nesse trecho

 y = y + porc[j];

Da primeira vez, y é 0 e porc[j] é "25", como texto. Então, o resultado vai ser "025".

A maneira mais simples é fazer o parseInt logo que fizer o prompt!