Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Gráfica

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

    <script>
      var pantalla = document.querySelector("canvas");
      var pincel = pantalla.getContext("2d");
      pincel.fillStyle = "lightgray";
      pincel.fillRect(0, 0, 600, 400);
      let colores = ["blue", "green", "yellow", "red", "gray"];
      let serie = [6, 47, 41, 30, 30];




      function dibujarBarra(x, y, serie, colores, texto) {
        pincel.font = "15px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x + 10, y - 20);
        for (let i = 0; i < serie.length; i++) {
          pincel.fillStyle = colores[i];
          pincel.fillRect(x, y, 50, serie[i]);
          console.log(x, y, 50, y + serie[i], serie[i]);
          pincel.fillStyle = "black";
          pincel.fillText(serie[i], x + 80, y + serie[i]);
          //   debugger

          y = y + serie[i];
        }
      }

    dibujarBarra(50, 50, serie, colores, "2019");

    </script>

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

1 respuesta

Los ultimos dos valores de la serie deben ser 3. Pero esta bueno el codigo.