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

[Sugerencia] Variante del codigo

La manera en que cree este codigo fue un poco mas elaborada porque creia que tambien se ocupaba lso numeros al lado derecho de la barra Además utilice una suma para rapida para que y incrementara de acuerdo a el numero que se ingrese en la serie Por ultimo este valor se multiplico por 3 para que se viera un poco mejor los numeros

<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);                            //se coloco a la variable y una resta de 10 para que el texto se colocara arriba de la barra

        for (var i = 0; i < serie.length; i++) {
            dibujarRectangulo(x, y, 50, serie[i]*3, colores[i]);    //se le coloco un *3 porque se encesitaba que la tabla fuera mas grande a como se pedia en el ejercicio
            escribirTexto(x+55, y+(serie[i]*2), serie[i]);          //se coloco a la variable y una suma de la variable serie[i] *2 para que el texto se colocara en el centro de la barra
            y += serie[i]*3;                                        //se coloco a la variable y una suma de la variable serie[i] *3 para que la barra siguiera creciendo
        }

    }

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];

    var colores = ["blue","green","yellow", "red","gray"];


    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
    //Aquí viene el texto faltante

</script>
1 respuesta

Hola, Te agradezco que hayas compartido lo que estás estudiando en el foro. No obstante, no es obligatorio que pongas la solución a tu ejercicio aquí. Puedes hacerlo en Discord, donde hay un espacio dedicado para eso. El foro es sobre todo para exponer tus dudas y colaborar con otros compañeros. Los ejercicios publicados en el foro no suman puntos ni son usados como criterio para el avance en el programa. Pedimos que siempre que sea posible, por favor etiquetes tu tópico para que sea más sencillo identificar si es una duda, sugerencia, etc. ¡Deseamos que puedas cumplir con todos tus objetivos y tener éxito en tus estudios, saludos!

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