Tengo este gráfico con desplazamiento en el eje x. (chartjs versión 2.7.2)
https://jsfiddle.net/r70v96ta/2/
En la parte final del código, donde se agregan los datos, puede elegir cuántos registros agregar:
addData(5, chartTest);
Si agrego más registros, el gráfico se agranda en el eje Y. Quiero que los datos crezcan más en el eje X junto con el desplazamiento, pero mantengo la misma altura. Intenté codificar las alturas en todas partes donde se manipula el lienzo, pero no conseguí que funcionara. Mi ideal sería una vez que se fije la escala del eje Y, poder introducir conjuntos de datos con un número variable de registros y mantener el tamaño y la escala del gráfico en el eje Y, haciendo que el eje X se desplace más grande (es decir, más largo) si el conjunto de datos es más grande y viceversa.
Editar:
También traté de establecer parámetros para las clases css con el fin de obtener la restricción de relación de aspecto del eje Y que busco. Parece que esto podría lograrse con la disposición correspondiente de la relación de aspecto del lienzo.
En caso de que pueda hacer alguna diferencia, mi gráfico está envuelto en un elemento div con esta clase css:
.mainBlank { background-color: white; width: 100%; min-height: 100vh; max-height: 100%; }Edit2:
Usando este html:
<div style="width: 100%; overflow-x: auto; overflow-y: hidden"> <div id="canvasParent" style="width: 2000px; height: 300px"> <canvas id="chart1" height="300" width="0"></canvas> </div> </div>Y configurando el ancho en el cliente cuando cambian los datos:
const newWidth = (chart.data.datasets[0].data.length * 30).toString() + "px"; $('#canvasParent').css({ width : newWidth});Logro el efecto deseado. Sin embargo, no entiendo por qué en el ejemplo del violín cambia la altura del gráfico.
Esta pregunta ya ha sido respondida aquí > https://stackoverflow.com/a/43658507 por numediaweb
Si deshabilita mantener la relación de aspecto en las opciones , entonces usa la altura disponible:
var chart = new Chart('blabla', { type: 'bar', data: {}, options: { maintainAspectRatio: false, } });Parece que definir un ancho y una altura iniciales para el lienzo, por lo que definir una relación de aspecto para él (con <canvas id="chart-Test" height="300" width="1200"></canvas> ) implica que si el cambios en la relación de aspecto de los padres, que se propagan a los niños. Lo que significa que al cambiar el ancho del elemento chartAreaWrapper2 , el cambio se propaga a los elementos secundarios para mantener la variación de la relación de aspecto correspondiente para ese cambio de ancho, por lo que el aumento de altura se produce junto con el aumento de ancho. Establecer el ancho inicial en 0 resuelve el problema. Supongo que como no hay una relación de aspecto definida para el lienzo, los cambios de ancho no implican un mantenimiento de la relación de aspecto cuando el cambio de ancho se propaga hacia abajo desde el padre.
Así que cambiando <canvas id="chart-Test" height="300" width="1200"></canvas> por <canvas id="chart-Test" height="300" width="0"></canvas> corrige y explica el problema.
Todo el html correcto a continuación, que se puede pegar en el violín para que después de agregar una gran cantidad de datos en addData(500, chartTest); se obtiene el efecto deseado de mantenimiento de la altura.
Cualquier explicación adicional o puntos que me puedan faltar son bienvenidos.
<div class="chartWrapper"> <div class="chartAreaWrapper"> <div class="chartAreaWrapper2"> <canvas id="chart-Test" height="300" width="0"></canvas> </div> </div> <canvas id="axis-Test" height="300" width="0"></canvas> </div>