2
respuestas

grafico

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Gráfico de Barras

por Johann Camilo Parada Bocanegra
| 15.9k xp | 20 posts
Desarrollador Frontend

Buen dia, se hace solucion del ejercicio con un poco de ayuda del instructor, lo que importa es que se entendio el tema.

<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);    
    }

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

        escribirTexto(x, y - 10, texto);

        var sumaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
            sumaAltura = sumaAltura + altura;
        }
    }

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

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

</script>
2 respuestas
por Jose Gonzalez
| 2145.5k xp | 6724 posts
Instructor

Hola Johann

Gracias por compartir tu código, está muy bien felicitaciones.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por gatti pablo alejandro
| 477.7k xp | 338 posts

Hola te comparto otra version del codigo de Barras

<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"];
    var productos = ["Chrome", "Firefox", "IE/Edge", "Safari", "Otros"];

    var xInicial1 =  100;
    var xInicial2 =  400;
    var yInicial1 = 190;
    var yInicial2 = 190;
    var base = 100;


    dibujarRectangulo(10,10,580,380,"white");

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

        dibujarRectangulo(xInicial1, yInicial1, base, serie2009[i]*2, colores[i]);
        dibujarRectangulo(xInicial2, yInicial2, base, serie2019[i]*2, colores[i]);

        yInicial1 += serie2009[i]*2;
        yInicial2 += serie2019[i]*2; 

    }

    // Leyendas

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

       dibujarRectangulo(30 + (100*i), 40, 20, 20, colores[i]);
       escribirTexto(30 + (100*i),80, productos[i]);

    }   


    // Titulos Barras
    escribirTexto(135,170, "2009");
    escribirTexto(435,170, "2019");

</script>