1
respuesta

Gráfico de barras Ejercicio

Esta e smi solución para el ejercicio

<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, serie, colores, texto, leyendas) {
    escribirTexto(x,y-20,texto)

    for (let c = 0; c < colores.length; c++) {
      for (let i = 0; i < serie.length; i++) {
        dibujarRectangulo(x,y,50, serie[i],colores[i])
        y=y+serie[i]
      }
      break
    }
  }
  dibujarBarra(50, 50, serie2009, colores, "2009");
  dibujarBarra(150, 50, serie2019, colores, "2019");

</script>
1 respuesta

Revisando el código creo que la sintaxis esta correcta, solo un pequeño detalle, percibo un error lógico en la función "dibujarBarra". La función anidada "for" no utiliza la variable "c" en su lugar, utiliza la variable "i" para acceder a los colores, lo que puede provocar que los colores no coincidan con las alturas de las barras.

Te sugiero una pequeña corrección: cambiar la variable "i" por "c" en la línea "dibujarRectangulo (x, y, 50, serie[i], colores[i])".

for (let c = 0; c < colores.length; c++) { for (let i = 0; i < serie.length; i++) { dibujarRectangulo(x, y, 50, serie[i], colores[c]); // se cambia "colores[i]" por "colores[c]" y = y + serie[i];

Por lo de más todo parece funcionar correctamente .