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

No me aparece el gráfico

Necesito ayuda, y es que he reescrito todo varias veces, revisando pacientemente y no encuentro el error que me impide ver el gráfico.

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

    <script>

        function dibRectan(x,y,base,altura,colores) {

            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 txt(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 dibBarra(x, y, serie, colores, texto) {

            txt(x,y - 10,texto);

            var sumarAltura = 0;
            for (var i = 0; i < serie.lenght; i++) {
                var altura = serie[i];
                dibRectan(x, y + sumarAltura, 50, altura, colores[i]);
                sumarAltura = sumarAltura + altura;

            }

        }

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

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

    </script>
2 respuestas
solución!
<canvas width="600" height="400"></canvas>

    <script>

        function dibRectan( 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 txt(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 dibBarra(x, y, serie, colores, texto) {

            txt(x, y - 10, texto);

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

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

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

    </script>

Hola Lucas, el problema está en dos líneas, el primero se encuentra en la línea 10, en pincel.fillStyle=color el parámetro que tiene tu función se llama "colores", por tanto, sería pincel.fillStyle=colores. Luego, en la línea 33, en el ciclo for escribiste lenght (la h y t invertidas), y en realidad es length, como resultado, quedaría serie.length. Con eso arreglado, debería de funcionar tu código.