grafico-barras | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

2
respuestas

por Tomás Ezequiel Aguirre

| 222.9k xp | 161 posts

Este costo un poco pero salio.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/scripts/script.js"></script>
    <title>Document</title>
</head>

<body>
    <center><canvas width="600" height="400" style="border: 1px solid #000;"></canvas></center>

    <script>

        function dibujarRectangulo(x, y, base, altura, color) {

            let pantalla = document.querySelector("canvas");
            let pincel = pantalla.getContext("2d");

            pincel.fillStyle = color;
            pincel.fillRect(x, y, base, altura);
            pincel.strokeStyle = "#000";
            pincel.strokeRect(x, y, base, altura);
        }

        function escribirTexto(x, y, texto) {

            let pantalla = document.querySelector("canvas");
            let pincel = pantalla.getContext("2d");

            pincel.font = "15px Georgia";
            pincel.fillStyle = "#000";
            pincel.fillText(texto, x, y);
        }

        let array2009 = [6, 47, 41, 3, 3];
        let array2019 = [81, 9, 3, 3, 4];
        let colores = ["#17c0eb", "#3ae374", "#fff200", "#ff3838", "#4b4b4b"];

        function calculoArray(array, position) {

            return array[position] * 2;
        }

        function calculoTexto(x, base) {

            return x + (base / 3);
        }

        function dibujarBarra(x, y, array, texto) {

            let i = 1;
            let save = 0;
            let position = 0;
            const base = 100;

            escribirTexto(calculoTexto(x, base), y - 10, texto);

            while (i <= array.length) {

                dibujarRectangulo(x, y + save, 100, calculoArray(array, position), colores[position]);

                save += calculoArray(array, position);
                position++;
                i++;
            }
        }

        dibujarBarra(150, 100, array2009, 2009);
        dibujarBarra(350, 100, array2019, 2019);

    </script>
</body>

</html>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

por Jose Gonzalez

| 2169.9k xp | 6782 posts

Instructor

20/01/2022

Hola Tomás

Gracias por compartir tu código, está muy bien felicitaciones. En eso consiste en esforzarse al máximo hasta lograrlo.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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

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>