7
respuestas

Grafico de Barras. Agradezco tu feedback!

Hice mi esfuerzo por hacerlo por cuenta propia y me funcionó de la siguiente manera, estoy atento a recibir explicación por que de seguro que se puede optimizar y agradecería la explicación para entenderlo bien.

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

<script>

    function dibujarRectangulo(x, y, base, altura, color) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        pincel.fillStyle=color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle="black";
        pincel.strokeRect(x,y, base, altura);
    }

    function escribirTexto(x , y, texto) {
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

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


    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["blue","green","yellow", "red","gray"];

    dibujarBarra2009(50, 50, serie2009, colores, "2009");
    dibujarBarra2019(150, 50, serie2019, colores, "2019");

    function dibujarBarra2009(x, y, serie, colores, texto) {

        dibujarRectangulo(50,50,50,serie2009[0],colores[0],escribirTexto(50,40,"2009"));
        dibujarRectangulo(50,(50+serie2009[0]),50,serie2009[1],colores[1],texto);
        dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]),50,serie2009[1],colores[2],texto);
        dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]+serie2009[2]),50,serie2009[3],colores[3],texto);
        dibujarRectangulo(50,(50+serie2009[0]+serie2009[1]+serie2009[2]+serie2009[3]),50,serie2009[4],colores[4],texto);

    }

    function dibujarBarra2019(x, y, serie, colores, texto) {

        dibujarRectangulo(150,50,50,serie2019[0],colores[0],escribirTexto(150,40,"2019"));
        dibujarRectangulo(150,(50+serie2019[0]),50,serie2019[1],colores[1],texto);
        dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]),50,serie2019[2],colores[2],texto);
        dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]+serie2019[2]),50,serie2019[3],colores[3],texto);
        dibujarRectangulo(150,(50+serie2019[0]+serie2019[1]+serie2019[2]+serie2019[3]),50,serie2019[4],colores[4],texto);

    }

</script>

Gracias!!

7 respuestas

Agradezco que me pudieran explicar en vivo y en directo ojalá fuera :D XD ... Gracias!

este ejercicio me quemo el cerebro

Por qué lo dices man?

WOW! Tú codigo quedo super bien elaborado. Yo antes de realizarlo queria ver los códigos de los otros, y veo que el tuyo fue el mejor.

Gracias Julio Andres!

Sin embargo comparando con el resultado del instructor en el ejercicio, está diferente y creo que se puede optimizar.

De nuevo gracias!

excelente codigo!!! creo que es bueno ver la opinion de otros colegas, hiciste algo diferente. con el mismo resultado.

yo por mi parte, necesito repasar un poco mas el tema para poder asimilar mejor. creo que hare un paseo por San Google

Excelente codigo!!! creo que es bueno ver la opinion de otros colegas, hiciste algo diferente. con el mismo resultado.

yo por mi parte, necesito repasar un poco mas el tema para poder asimilar mejor. creo que hare un paseo por San Google