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

Quiz Gráfico de Barras

Buen día compañeros, les comparto por este medio mi aportación a la resolución del quiz Gráfico de Barras.

Me tomé la libertad de añadir las leyendas siendo el caso de que entré motivado a resolver el ejercicio,

Espero sus feedbacks.

<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"];
    var navegadores = ["Chrome","Firefox","Explorer","Safari","otros"]

    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) {
        //Aquí necesitamos escribir el texto y dibujar los rectángulos
        escribirTexto(x,y,texto)
        y=y+20;
        let suma= sumaSerie(serie);
        for(let pos = 0;pos<serie.length;pos=pos+1){
            let item = serie[pos];
            let porcentaje = Math.round(item/suma*300);
            dibujarRectangulo(x,y,50,porcentaje,colores[pos]);
            escribirTexto(x-50,Math.round(y+porcentaje/2),"y:"+item);
            y=y+porcentaje
        }
    }

    function sumaSerie(serie){
        let suma= 0;
        for(let pos=0;pos<serie.length;pos=pos+1){
            suma = suma +serie[pos];
        }
        return suma;
    }

    function addLabels(){
        let x = 250
        for(let pos = 0;pos<navegadores.length;pos=pos+1){
            let item = navegadores[pos];
            let y = 50*(pos+1)
            dibujarRectangulo(x,y,15,15,colores[pos]);
            escribirTexto(x+20,y+15,item);
        }
    }
    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
    addLabels();

</script>
1 respuesta

¡Hola Luis!

Gracias por compartir tu aportación para resolver el quiz. Veo que has añadido las leyendas y has trabajado en el código para dibujar los rectángulos y mostrar los valores correctamente. ¡Buen trabajo!

¡Saludos!

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