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.
maintainAspectRatio: false
hecho 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 ...)maintainAspectRatio
realmente me ayuda.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 )
CSS
y con opciones
fuente
!important
en el proyecto AngularEn mi caso, pasar
responsive: false
por 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.fuente
responsive: true
distorsionó completamente la apariencia del gráfico.!important
en mi proyecto AngularFunciona para mi tambien
Gracias
fuente
No puedo creer que nadie haya hablado sobre el uso de un elemento padre relativo.
Código:
Fuentes: documentación oficial
fuente
No se mencionó anteriormente, pero usar
max-width
omax-height
en el elemento de lienzo también es una posibilidad.fuente
Lo siguiente funcionó para mí, pero no olvides poner esto en el parámetro "opciones".
fuente
Esto ayudó en mi caso:
fuente
Usa esto, funciona bien.
y debajo
options
,fuente