Configuración de ancho y alto

85

Estoy probando el código de ejemplo para Chart.js dado en los documentos .

El ancho y la altura se especifican en línea en el elemento de lienzo a 400 px / 400 px.

Pero al renderizar el gráfico, se amplía al ancho de página completo y corta el extremo derecho.

¿Cómo / dónde se supone que debo controlar el ancho / alto del gráfico?

This is some bogus text because SO prohibits linking to Codepen otherwise.

chart.js

— Compañero extraño
fuente

89

¡Puede anular el ancho del estilo del lienzo! Importante ...

canvas{

  width:1000px !important;
  height:600px !important;

}

además

especifique la responsive:true,propiedad en las opciones ..

options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

actualizar bajo las opciones agregadas: maintainAspectRatio: false,

enlace: http://codepen.io/theConstructor/pen/KMpqvo

— KpTheConstructor
fuente

11

Gracias, has maintainAspectRatio: falsehecho visible el gráfico. Pero aún cortando el lado derecho. Al abordar este tipo de problemas con su propio código de ejemplo básico, me pregunto si chart.js es una buena apuesta. (El lado derecho todavía está cortado ...)

— Fellow Stranger

Eso resuelve el problema del tamaño del gráfico, el gráfico no se ha escalado para ajustarse. ¿Hay alguna forma de establecer el tamaño del gráfico desde Chart.js?

— Firix

7

Resulta que debe desactivar la función de respuesta para que el gráfico obedezca los tamaños que se le asignaron. Es una pena que no parezca haber forma de controlarlo y mantener la naturaleza receptiva ...

— Firix

2

Gracias. Tu maintainAspectRatiorealmente me ayuda.

— Arsman Ahmad

Usar "! Important" no es la forma correcta de resolver este problema, aunque funciona. La solución de @Nicolas a continuación "envolver el lienzo en un div" es una mejor manera, ya que tendríamos control sobre el cambio de tamaño del lienzo de la manera que queremos que sea.

— Abhishek Boorugu

53

También puede simplemente rodear el gráfico con un contenedor (según el documento oficial http://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
    <canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
    width: 1000px;
    height:600px
}

y con opciones

responsive:true
maintainAspectRatio: false

— Nicolas
fuente

1

Esto funciona. La clave aquí es usar un div externo y establecer el ancho y el alto en ese en lugar del elemento canvas.

— John Doherty

Para que esto funcione, el contenedor de gráficos debe estar relativamente posicionado.

— Sanju

funciona para mí, pero solo !importanten el proyecto Angular

— Артур Гудиев

21

En mi caso, pasar responsive: falsepor opciones resolvió el problema. No estoy seguro de por qué todo el mundo le dice que haga lo contrario, especialmente porque verdadero es el valor predeterminado.

— Antimonio
fuente

Igual que aquí. La configuración responsive: truedistorsionó completamente la apariencia del gráfico.

— Paul

funciona para mí pero solo !importanten mi proyecto Angular

— Артур Гудиев

2

Funciona para mi tambien

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

Gracias

— subramanya46
fuente

2

No puedo creer que nadie haya hablado sobre el uso de un elemento padre relativo.

Código:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

Fuentes: documentación oficial

— R. Gurung
fuente

0

No se mencionó anteriormente, pero usar max-widtho max-heighten el elemento de lienzo también es una posibilidad.

— Ukuser32
fuente

0

Lo siguiente funcionó para mí, pero no olvides poner esto en el parámetro "opciones".

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

— Dazeh
fuente

0

Esto ayudó en mi caso:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

— Omid N
fuente

-3

Usa esto, funciona bien.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

y debajo options,

responsive:true,

— Udara
fuente