Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

¿Me podrían explicar el ejercicio de las barras, por favor?

Me gustaría que me explicaran la resolución del ejercicio, por favor, porque no estoy entendiendo.

Muchas gracias.

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

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

        escribirTexto(x, y - 10, texto);

        var sumaAltura = 0;
        for (var i = 0; i < serie.length; i++) {
            var altura = serie[i];
            dibujarRectangulo(x, y + sumaAltura, 50, altura, colores[i]);
            sumaAltura = sumaAltura + altura;
        }
    }

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

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

</script>
4 respuestas

Buenas noches, bueno el ejercicio de las barras es un reflejo estadístico por columnas, ya para reflejarlo en nuestro código y la página generada se dibuja por columnas utilizando vectores serie2009 serie2019 y para los colores; para dibujar cada porcentaje utilizamos los LOOP en este caso la estructura for, dibujando de a uno desde arriba para abajo. Hay que tomar en cuenta que los dibujos toman como punto de partida X, Y como X de forma horizontal y Y de forma vertical, saludos y ojalá se entienda un poco, que también tuve un conflicto para resolver el código de este ejercicio, buenas noches.

solución!

Muchas gracias Miguel.

En este caso, ¿Me podrían explicar por qué se declara una variable auxiliar? No recuerdo haber visto esto en los videos. Y por qué se declaran las variables de las características por fuera de la función.

Muchas gracias.

Las variables; sumaaltura es la que trabaja con cada barra la que marca el punto inicial de dibujar cada barra, así que en cada LOOP o pasada por el for se gana una barra, el contador i que realiza el trabajo de hacer las interaciones con for que trabaja con las series las que se dibujan una por una , como por ejemplo se utiliza colores[i] con corchetes que utilizan las arrays, en este caso tenemos tres arrays una la de colores, la de datos 2009 y la de datos 2019 que son declaradas para ser utilizadas en la siguiente línea de código con la función; DibujarBarra(); Ya en la función se trabaja solamente con dos arrays la de colores y la de datos de cada año, primero 2009 y luego de 2019. Saludos.

¡Muchas gracias, Miguel!