Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
3
respuestas

Gráfica de barras

Aquí mi ejercicio, le cambié los colores xd

<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 - 25, texto);
        contador = 0;
        posicion = 0;
        while (contador < serie.length) {
            dibujarRectangulo(x, y, 100, serie[posicion],colores[posicion]);
            y = (y + serie[posicion]);
            posicion++;
            contador++;

        }

    }

    var serie2009 = [6, 47, 41, 3, 3];
    var serie2019 = [81, 9, 3, 3, 4];
    var colores = ["  #f7fa91  ","   #d19b77   "," #5291c6 ", " #0cabde"," #afb0b4 "];

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


</script>
3 respuestas

Hola Susy, espero que estés bien

Me gusta tu código, estoy feliz que puedes hacer la actividad. Estás disfrutando de los cursos?

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

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

¡Si estoy disfrutando bastante los cursos! Muchas gracias por preguntar :3

Me alegro que estés disfrutando y aprendiendo. ¡Es un placer conocerte!

Saludos desde Brasil