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

Gráfico_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);    
    }


        function dibujarBarra(x, y, serie, colores, texto) {

        escribirTexto(x, y - 10, texto);

        var sumaAltura = 0; 

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

        var altura = serie[i];

        dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);

        sumaAltura = sumaAltura + altura;

        }

    }

        var colores = ["blue","green","yellow", "red","gray"];
        var serie2009 = [6,47,41,3,3];
         var serie2019 = [81,9,3,3,4];

        dibujarBarra(50, 50, serie2009, colores, "2009");
        dibujarBarra(150, 50, serie2019, colores, "2019");

</script>
1 respuesta

¡Hola, Eleazar! Deseo que esté bien.

Muchas gracias por compartir tu proyecto con nosotros. Estamos muy contentos de poder acompañarte en tu camino de aprendizaje.

En lo esencial, en el foro estamos priorizando las dudas y errores.

Para compartir tus proyectos con nosotros y otros estudiantes, te recomiendo que lo haga en nuetro servidor de Discord. Allí tenemos un canal exclusivo para eso (⛓┇comparte-tu-codigo-logica).

Continúa con tus estudios y hasta la proxima.

¡Vamos juntos!

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