Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Solución Grafico Barras

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

<script>

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

    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) {
       var conta = 0;
       var y_f = 0;
        while(conta < serie.length){
            dibujarRectangulo(x,y,50,serie[conta],colores[conta]);
            y = y + serie[conta];
            y_f = y;
            conta++;
        }

        escribirTexto((x+5),(y_f+15),texto);
    }

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

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

<script>

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

    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) {
       var conta = 0;
       var y_f = 0;
        while(conta < serie.length){
            dibujarRectangulo(x,y,50,serie[conta],colores[conta]);
            y = y + serie[conta];
            y_f = y;
            conta++;
        }

        escribirTexto((x+5),(y_f+15),texto);
    }

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

</script>
1 respuesta

Hola Juan , espero que estés muy bien.

Estamos muy contentos con tu aprendizaje. Gracias por tu contribución, pero, priorizamos que el foro se use exclusivamente para postear tus dudas, así optimizamos el tiempo de respuesta para ustedes.

Si necesita ayuda, estaremos aquí!

Un saludo!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios