Gráfico de Barras- Informe Navegadores 2009 vs 2019 | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

5
respuestas

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 accesibilidad Acá 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

| 2529.4k xp | 9133 posts

Instructor Instructora

07/01/2022

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

07/01/2022

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

por Matias Julio Grego

| 71.2k xp | 47 posts

07/01/2022

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

por Guillermo Edgardo Murcia Valladares

| 199.7k xp | 249 posts

19/01/2022

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

27/01/2022

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>