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

Grafico de barras

Grafico de barras

<canvas width="600" height="400"></canvas>

<script>

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


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

    /*******************************************  Funciones  *******************************************/

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

        escribirTexto(x, y - 10, texto)

        for (i; i < serie.length; i++) {

            dibujarRectangulo(x, y, base, serie[i], colores[i]);
            y += serie[i];

        }

    }

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

</script>
1 respuesta

Hola Francisco, espero que estés bien!

Gracias por compartir tu solución, felicitaciones!

Anexo: el foro se centra en las dudas de contenido, ¡pero apreciamos sus resultados! Si eres del programa ONE, te sugiero que compartas tus resultados en el canal de resultados de tu grupo en Discord.

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