javascript - color - Gráfico de Charts.js sin escalar al tamaño del lienzo

line chart options chart js

Question

Estoy tratando de hacer un gráfico con Charts.js (el actual es solo un ejemplo muy simple, estoy tratando de empezar a trabajar, algo extraído de la documentación de Chart.js) y el gráfico no se ajusta al tamaño del lienzo lo estoy dando. Aquí está todo el código relevante.

Para importarlo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

Luego, lo conecto a un archivo javascript de la siguiente manera:

<script type="text/javascript" src="js/stats_tab.js"></script>

Tengo mi lienzo configurado:

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

Y finalmente, en stats_tab.js, tengo el siguiente código:

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: ''line'',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

El gráfico se muestra muy bien, pero se niega a escalar al tamaño del lienzo que le di. Tampoco hay CSS relevante para ninguno de los divs involucrados. La función de inspección en Chrome me permite saber que el gráfico final es 676 por 676 en lugar de los 200 por 200 que especifiqué. No estoy realmente seguro de lo que está pasando.

¡Gracias!

Answer 1

El problema real es que el lienzo se volverá a escalar de forma receptiva a su padre. Quería mantener la capacidad de respuesta. Así que algo como esto resolverá el problema:

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>

Answer 2

El punto importante es: las propiedades de width y height no son el tamaño en px sino la proporción.

<canvas id="myChart" width="400" height="400"></canvas>

En este ejemplo, es una proporción de 1: 1. Por lo tanto, si su contenido HTML es de 676 px de ancho, entonces su gráfico será de 676 * 675 px
Eso puede explicar algunos errores comunes.

Puede deshabilitar esta función configurando maintainAspectRatio en falso.

Answer 3

En sus opciones, establezca maintainAspectRatio en false y responsive en true . Inicialmente, esto intentará escalar el gráfico para que coincida con las dimensiones de su lienzo. Si el lienzo no se ajusta a la pantalla, es decir, en los móviles, se volverá a escalar su gráfico para que quepa en la página.

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: ''line'',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

Answer 4

La propiedad de ancho y alto que configura para el lienzo solo funciona si el modo de respuesta de Chartjs es falso (que es verdadero de manera predeterminada). Cambia tu stats_tab.js a esto y funcionará.

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: ''line'',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }

Answer 5

Lo siguiente me funcionó, ¡y pude mantener la capacidad de respuesta de la tabla!

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;

Answer 6

This debería funcionar. Básicamente, simplemente agregue las propiedades de ancho y alto a su javascript:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

Referencia: Chart.js lienzo de tamaño