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

[Sugerencia] Agrandar gráfico

Si les parecía que el gráfico estaba muy chiquito y no se podía ver, les comparto mi solución para agrandarlo.

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

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    function dibujarRectangulo(x, y, base, altura, color)
    {
        pincel.fillStyle = color;
        pincel.fillRect(x,y, base, altura);
        pincel.strokeStyle = "black";
        pincel.strokeRect(x,y, base, altura);
    }

    function escribirTexto(x , y, texto)
    {
        pincel.font = "15px Georgia";
        pincel.fillStyle = "black";
        pincel.fillText(texto, x, y);    
    }

    function dibujarBarra(x, y, serie, colores, texto)
    {
        var c = 0
        var limite = 0
        var referencia = 0

        for(var i = 0; i < serie.length; i++)
        {
            while(0.3*limite < serie[i])
            {
                dibujarRectangulo(x, y+referencia, 50, limite, colores[i])
                limite++
            }
            referencia += limite
            limite = 0
        }
        escribirTexto(x, y-10, texto)
    }

    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>
1 respuesta

¡Hola Enrique!

Gracias por compartir tu solución para agrandar el gráfico. Parece que estás utilizando la etiqueta <canvas> para dibujar el gráfico y estás estableciendo un ancho de 600 y una altura de 500 píxeles. Esto determina el tamaño del lienzo en el que se dibujará el gráfico.

Si deseas agrandar el gráfico, puedes simplemente aumentar el valor del ancho y la altura en la etiqueta <canvas>. Por ejemplo, si quieres que el gráfico sea el doble de grande, puedes establecer el ancho en 1200 y la altura en 1000 píxeles:

<canvas width="1200" height="1000"></canvas>

Recuerda que al aumentar el tamaño del lienzo, también deberás ajustar las coordenadas y dimensiones de los elementos que dibujas en el gráfico para que se ajusten correctamente al nuevo tamaño.

Espero que esta sugerencia te sea útil. Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)