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

Me ha costado pero lo logre

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

<script>

//Variables del programa

    var lienzo = document.querySelector("canvas");
    var pincel = lienzo.getContext("2d");
    var barra2009 = [6,47,41,3,3];
    var barra2019 = [81,9,3,3,4];
    var colores = ["green","orange","blue","red","gray"];
//Funciones del programa 

    function bloque(x,y,ancho,alto,color) {

        pincel.fillStyle = color;
        pincel.fillRect(x,y,ancho,alto);
        pincel.strokeStyle = "lightblue";
        pincel.strokeRect(x,y,ancho,alto);
    }    

    function inttexto(x,y,texto) {

        pincel.font = "15px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto,x,y);
    }

    function barraG(x, y, barra, colores, texto) {

        inttexto(x + 7, y-10, texto);

        var altosuma = 0;
        for (var z = 0; z < barra.length; z++) {
            var alto = barra[z];
            bloque(x, y + altosuma, 50, alto,colores[z]);
            altosuma = altosuma + alto;

        }
    }

//Programa

    barraG(50, 50, barra2009, colores, "2009");
    barraG(150, 50, barra2019, colores, "2019");

</script>
1 respuesta

Hola estudiante, Gracias por compartir la solución de tus ejercicios con nosotros. ¿Sabias que puedes interactuar con el resto de tus compañero por nuestro Discord? En Discord el alcance es mayor, la interacción es inmediata y llega a más compañeros de esta forma el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos. Un saludo!

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