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); 

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

            escribirTexto(x, y - 20, 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 serie2009 = [6, 47, 41, 3, 3];
            var serie2019 = [81, 9, 3, 3, 4];
            var colores = ["blue","green","yellow","red","gray"]

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


</script> 
1 respuesta

Hola, Allison!

Si tienes alguna pregunta en el ejercicio y quieres compartir tu código con nosotros, te dejo un enlace de un video hecho por nuestro equipo explicando cómo hacerlo:

https://www.youtube.com/watch?v=tevEdARFxGU&feature=youtu.be

Si solo quieres compartir tu ejercicio hecho, priorizamos que el foro se use exclusivamente para postear dudas, así optimizamos el tiempo de respuesta para ustedes.

Para no dejar de compartir los códigos, actividades y ejercicios que realizas, creamos un canal en Discord (#compartatucodigo) donde puedes compartirlos, dar y sugerir mejoras con el resto de tus compañeros.

Te recomiendo que puedes interactuar con el resto de nuestros compañero por nuestro Discord, en virtud de que en Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros. De esa manera si tienes algún comentario, opinión, recomendación o algún consejo, con certeza por ahí llegará a más personas.

Un saludo!

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