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

Gráfico 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"];

        function dibujarBarra(x, y, serie, colores,texto){
            var sumaA = 0;

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

                escribirTexto(x, y - 10, texto);

                var altura = serie[p];

                dibujarRectangulo(x, y+sumaA, 50, altura, colores[p]);

                sumaA = sumaA + altura;

            }

        }

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

</script>
1 respuesta

Hola María, cómo estas?

Gracias por compartir tu proyecto, continua así, felicidades.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartetucodigo) y el foro solo quedaría para cualquier duda que puedas tener sobre el contenido de los cursos.

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