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)
2
respuestas

[Duda] Buenas tengo una duda sobre el gráfico

No puedo reconocer el error, si alguien me ayuda le agradecería

<canvas width="500" height="500"></canvas>

<script>

   var pantalla = document.querySelector("canvas");
   var pincel = pantalla.getContext("2d");
   pincel.fillStyle = "#11009955"
   pincel.fillRect(0, 0, 500, 500)

   var s2009 = [6,47,41,3,3];
   var s2019 = [81,9,3,3,4];
   var navegadores = ["Chrome", "Firefox","Internet Explorer/Edge", "Safari", "otros"]
   var colores = ["blue", "green", "yellow", "red", "gray"]

   function dibujarGrafico(x,y,w,h,color) {
               pincel.fillStyle = color;
               pincel.fillRect(x,y,w,h);
            pincel.strokeStyle = "black";
            pincel.strokeRect(x,y,w,h);
         }
   function escribirGrafico () {

   }

   function repiteGrafico() {
      var graph = 10;
         for (var quiero = 0; quiero < navegadores.length; quiero++) {
            dibujarGrafico(100,10*graph,50,s2009[quiero],colores[quiero])
            dibujarGrafico(300,10*graph,50,s2019[quiero],colores[quiero])
            graph = graph + 10;
         }
   }

repiteGrafico();
</script>
2 respuestas

Buena, en la parte de la función dibujarGrafico, la altura de los rectángulos debe ser incremental, es decir debes ir acumulando el valor de la altura del rectángulo anterior, seguramente el resultado que obtienes es un solo rectángulo. Yo lo resolví con una sola función, es decir no hice una función dentro de otra función.

solución!

Ya lo solucioné, tenía que comerme la cabeza un poco mas con las cordenadas Y y el width. Mando el código:

<canvas width="500" height="500"></canvas>

<script>

   var pantalla = document.querySelector("canvas");
   var pincel = pantalla.getContext("2d");
   pincel.fillStyle = "#11009955"
   pincel.fillRect(0, 0, 500, 500)

   var s2009 = [6,47,41,3,3];
   var s2019 = [81,9,3,3,4];
   var navegadores = ["Chrome", "Firefox","Internet Explorer/Edge", "Safari", "otros"];
   var colores = ["blue", "green", "yellow", "red", "gray"];
   var quiero = 0;
   var x;
   var y;

   function dibujarGrafico(x,y,w,h,color) {
            pincel.fillStyle = color;
            pincel.fillRect(x,y,w,h);
            pincel.strokeStyle = "black";
            pincel.strokeRect(x,y,w,h);
         }
   function escribirGrafico (text,x,y) {
            pincel.font = "25px Monospace";
            pincel.fillStyle = "black";
            pincel.fillText(text, x, y);
   }

   function repiteGrafico() {
            var sumarY09 = 0;
            var sumarY19 = 0;
               for (var quiero = 0; quiero < navegadores.length; quiero++) {
                  dibujarGrafico(100,sumarY09+150,70,s2009[quiero]*2,colores[quiero])
                  dibujarGrafico(300,sumarY19+150,70,s2019[quiero]*2,colores[quiero])
                  sumarY09 = sumarY09 + s2009[quiero]*2;
                  sumarY19 = sumarY19 + s2019[quiero]*2;
               }
   }

/* PRIMERO sumarY09 = 0 + (6 x2)  = 12 (coordenada de Y)
    SEGUNDO  sumarY09 = 12 + (47x2) =  106
   TERCERO sumarY09 = 106 + (41x2) = 188
 ..              = 188 + (3x2) = 194
  ..             = 194 +(3x2) = 200

LO QUE VA A HACER EL CICLO FOR CON SUMARY09. (sumar coordenada Y, de la variable s2009)
*/
repiteGrafico();
escribirGrafico(2009,105,100);
escribirGrafico(2019,305,100);
</script>