Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Desafio: Grafico de barras

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Gráfico de Barras

por Roy Josue Herrera Azofeifa
| 24.4k xp | 21 posts
Barista 
<meta charset="utf-8">

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

<script>

    function dibujarRectangulo(x, y, base, altura, color) {

        let pantalla = document.querySelector("canvas");
        let 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) {

        let pantalla = document.querySelector("canvas");
        let pincel = pantalla.getContext("2d");

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

    }


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

    function dibujarBarra(x, y, serie, colores, texto) {

        escribirTexto(x,y-10,texto);
        let sumaAltura = 0;
        for (let i = 0; i< serie.length; i++){

            let altura = serie[i];
            dibujarRectangulo(x,y + sumaAltura,50,altura,colores[i]);
                sumaAltura = sumaAltura + altura;

        }

    }

    dibujarBarra(50, 50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
1 respuesta
por Rafaela Rocha
| 2875.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Roy! Parece que estás trabajando en un desafío para crear un gráfico de barras en JavaScript. En tu código, veo que ya has definido dos series de datos y los colores correspondientes para cada barra. Además, ya has creado las funciones necesarias para dibujar un rectángulo y escribir texto en la pantalla.

Para dibujar las barras, estás utilizando un bucle for que recorre los valores de cada serie y los dibuja en la pantalla. Sin embargo, parece que la altura de cada barra se está acumulando en lugar de ser dibujada por separado. Para solucionar esto, debes actualizar la variable "sumaAltura" en cada iteración del bucle, en lugar de sumarla a sí misma.

Aquí te dejo el código corregido:

function dibujarBarra(x, y, serie, colores, texto) {
    escribirTexto(x,y-10,texto);
    let alturaAnterior = 0;
    for (let i = 0; i< serie.length; i++){
        let altura = serie[i];
        dibujarRectangulo(x,y + alturaAnterior,50,altura,colores[i]);
        alturaAnterior = alturaAnterior + altura;
    }
}

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

Espero que esto te ayude a resolver el problema. ¡Buenos estudios!

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