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) {
        escribirTexto(x, y - 10, texto);
        for (var i = 0; i < serie.length; i++) {            
            dibujarRectangulo(x,y,50,serie[i],colores[i]);
            y = y + serie[i];
        }

    }

    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
</script>

Gráficos de barras usando canvas

1 respuesta

Hola, Omar!

Gracias por tu aporte, es bueno ver los diferentes puntos de vistas, eso enriquece nuestros conocimientos.

Ojalá logres éxito en cambiar los malos hábitos.

Me alegra que hayas disfrutado del curso, espero que los próximos sean de igual provecho.

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