5
respuestas

Gráfico de Barras- Informe Navegadores 2009 vs 2019

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 Matias Julio Grego
| 71.2k xp | 47 posts

Buenas!, les paso el informe que hice según la consigna. Lo hice un distinto, calculo el porcentaje de acuerdo al tamaño de la barra total. Muy entretenido!

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidadAcá dejo el código:

<body>
    <h1>Informe Navegadores 2009 vs 2019</h1>
    <canvas width="800" height="800"></canvas>
    <script>

        var plano = document.querySelector("canvas");
        var pincel = plano.getContext("2d");

        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", "IE/Edge", "Safari", "Otros"];


        function dibujaRectangulo(x, y, base, altura, color) {
            pincel.fillStyle = color;
            pincel.fillRect(x, y, base, altura);
            pincel.strokeStyle = "black";
            pincel.strokeRect(x, y, base, altura);
            pincel.fill();
        }
        function escribeTexto(x, y, texto) {
            pincel.font = "15px Georgia";
            pincel.fillStyle = "white";
            pincel.fillText(texto, x, y);

        }

        function creaIndice(x, y, navegadores, colores) {
            var posicionX = x;
            var posicionY = y;


            for (i = 0; i < navegadores.length; i++) {
                dibujaRectangulo(posicionX, posicionY, 25, 25, colores[i]);
                escribeTexto(posicionX, posicionY - 5, navegadores[i]);
                posicionX = posicionX + 100;


            }

        }


        function dibujaBarra(x, y, base, altura, serie, colores, anio) {

            var barraAcumulada = y;

            escribeTexto(x + 30, y - 10, anio);

            for (i = 0; i < serie.length; i++) {

                porcentajeSerie = (altura * (serie[i] / 100));


                dibujaRectangulo(x, barraAcumulada, base, porcentajeSerie, colores[i]);

                barraAcumulada = barraAcumulada + porcentajeSerie;


            }

        }

        dibujaRectangulo(100, 50, 600, 400, "black")
        dibujaBarra(200, 100, 100, 200, serie2009, colores, "2009");
        dibujaBarra(400, 100, 100, 200, serie2019, colores, "2019");
        creaIndice(200, 350, navegadores, colores)


    </script>
</body>
5 respuestas
por Evelyn Reis
| 2221.6k xp | 7955 posts
Alura Scuba Team Instructora

Hola Matias, espero que estés bien.

Estamos muy felices por tu aprendizaje. Excelente tu solución, gracias por compartirla con nuestra comunidad. Continúa con tus estudios y cualquier duda estaremos aquí!!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios
por Estudiante
| 72.7k xp | 50 posts

Buenas tardes Matías. Excelente solución. Saludos.

por Matias Julio Grego
| 71.2k xp | 47 posts

Hola Evelyn/ José, como están? Muchas gracias!

por Guillermo Edgardo Murcia Valladares
| 199.7k xp | 249 posts

Otro compañero lo realizo bastante bien, pero como ya el valor es en porcentajes no da problema la distribución. Con esta propuesta de tu parte Matías en verdad que me se vuelve mas genérico porcentajeSerie = (altura * (serie[i] / 100)); solo le cambiaria el denominador 100 por la suma de los valores almacenados en a serie, pero la verdad la propuesta esta muy útil Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

por gatti pablo alejandro
| 477.7k xp | 338 posts

Hola 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>