Solucionado (ver solución)
Solucionado
(ver solución)
6
respuestas

Duda con respecto al grafico de barras

Buenas, quisiera saber que es lo que esta mal en mi código. Ya que al abrirlo en el browser no me aparecen los gráficos como dicta el ejercicio. Muchas gracias. A continuación les comparto mi código:

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

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

        escribirTexto(x, y, texto);

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

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

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


</script>
6 respuestas

Acabo de revisar todo tu codigo y lo compare con el mio, teniamos diferencias en minimas cosas (en la fila 26 y la fila 36) hice los cambios, lo deje igual al mio y aun asi no me aparecieron los graficos solo el texto. te dejo mi codigo por si te sirve de ayuda.

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

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

        escribirTexto(x, y - 10, texto);

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

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

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

</script>
solución!

Hola, si no me equivoco el problema esta en el serie.length, que esta escrito como serie.lenght. Espero que te sea de ayuda.

Hola Christian, Le modifiqué al: serie.length Estaba como serie.lenght y ya con eso funcionó :)

tuve el mismo problema! y la misma solución

Muchas gracias a todos! Si, el problema era serie.length.

genial suele pasar por comas o pequeños temas que no funca, Gracias !!