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>

// Gráfico de barras
    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);    
    }

    //Aquí viene el texto faltante

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

// Utilizando ciclos
function dibujarBarra(x, y, serie, colores, texto) {

var acum = 0;

for(var i = 0; i<serie.length; i++){ // con la variable "i" se recorre el arreglo;

    acum = acum+serie[i]; // suma cada posición del arreglo con el anterior valor de la variable acum

dibujarRectangulo(x,y+(acum-serie[i]),50,serie[i],colores[i]);

}
escribirTexto(x,y-20,texto);
}

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

</script>
1 respuesta

¡Hola Ariel! ¡Espero que estés bien!

¡Gracias por compartir tu código con nosotros, nos alegra mucho que estés practicando programación! La práctica es fundamental para consolidar tus nuevos conocimientos.

En caso que tenga alguna duda relacionada con tu código (como errores, bugs y cualquier otro problema), puede compartir tu código aquí en el foro, explicando tu duda, y te ayudaremos.

No obstante, si no tienes dudas o dificultad en el desarrollo de tu codigo y solo quieres compartir tu progreso o la forma en que realizaste tus actividades, puedes utilizar el canal#ComparteTuCódigo en Discord, que es un canal específico para este fin.

Allí, tus compañeros de estudios podrán ayudarte compartiendo conocimientos. ¡Esta interacción es muy importante para la participación de los alumnos y puede ayudarte a expandir su red de contactos!

¡Te deseo mucho éxito en tus estudios! y recuerda que aquí estaremos para apoyarte!

¡Vamos juntos!

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