3
respuestas

Programa 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 Ediberto Coronel
| 111.9k xp | 40 posts

Ciertamente no logre hacer completamente el ejercicio completamente solo, por lo que tuve que cambiar el for por el while para entender un poco mejor el mismo... les dejo mi codigo

<meta charset="UTF-8">
<h2>PROGRAMA - GRÁFICO DE BARRAS</h2>
<canvas width="600" height="400"></canvas>

<script>
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle= "lightgrey";
        pincel.fillRect(0,0, 250, 200);



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

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

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

        escribirTexto(x, y - 10, texto);

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

    dibujarBarra(50,50, serie2009, colores, "2009");
    dibujarBarra(150, 50, serie2019, colores, "2019");
</script>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

3 respuestas
por Mariana Rodríguez Pelayo
| 48.2k xp | 72 posts

gracias por compartir tu código Eliberto

por Juan Manuel Burdet
| 65.6k xp | 2 posts

Hola Eliberto te comparto mi codigo con el loop, FOR, saludos

por Juan Manuel Burdet
| 65.6k xp | 2 posts
<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);
  }

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

  function dibujarBarra(x,y,arrValores,arrColores,año){
    var base =50;
    var alturaAcc=0;
    escribirTexto(x+10,y-5,año);
    for(var index=0;index<arrValores.length; index++){
        dibujarRectangulo(x,y+alturaAcc, base,arrValores[index],arrColores[index]);
        alturaAcc+=arrValores[index];
    }
  }

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

  //Aquí viene el texto faltante
</script>