0
152
Vistaschart.js reduce los puntos de datos a la mitad
Tengo un gráfico que muestra las llamadas al sitio web de los últimos 7 días. Ahí está:
Aquí está la inicialización:
varwebsitecalls_chart = new Chart(websitecalls_chartel, { type: 'line', data: { labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"], datasets: [{ label: 'Websitecalls', data: [0, 0, 0, 0, 0, 0, 0], borderWidth: 2, borderColor: '#00000', backgroundColor: '#ffff', pointStyle: 'circle', pointRadius: 7, cubicInterpolationMode: 'monotone', tension: 0.4, }] }, options: { responsive: true, plugins: { legend: { display: false }, }, scales: { x: { grid: { display: false, } }, y: { min: 0, ticks: { precision: 0, font: { family: 'Montserrat', }, }, grid: { borderDash: [5, 5], } }, } }, }); Problema:
El problema es que el gráfico se corta de los círculos cuando los datos son 0 porque configuré min en 0. Tengo que configurar min en 0 porque no pueden existir llamadas negativas al sitio web. Si no lo configuro, se mostrará -1. ¿Hay alguna forma de solucionar este problema técnico de diseño?
Gracias por adelantado,
Felipe.
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
No tengo idea de por qué, pero definir y.beginAtZero: true en lugar de y.min: 0 resolverá el problema.
Eche un vistazo a su código modificado y ejecutable y vea cómo funciona.
new Chart('websitecalls_chartel', { type: 'line', data: { labels: ["Sa", "So", "Mo", "Di", "Mi", "Do", "Fr"], datasets: [{ label: 'Websitecalls', data: [0, 0, 0, 0, 0, 0, 0], borderWidth: 2, borderColor: '#00000', backgroundColor: '#ffff', pointStyle: 'circle', pointRadius: 7, cubicInterpolationMode: 'monotone', tension: 0.4, }] }, options: { responsive: true, plugins: { legend: { display: false }, }, scales: { x: { grid: { display: false, } }, y: { beginAtZero: true, ticks: { precision: 0, font: { family: 'Montserrat', }, }, grid: { borderDash: [5, 5], } }, } }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> <canvas id="websitecalls_chartel" height="80"></canvas>La documentación de Chart.js dice...
-
beginAtZero: si estrue, la escala incluirá 0 si aún no está incluido. -
min: número mínimo definido por el usuario para la escala, anula el valor mínimo de los datos.
·
Santiago Trujillo
Denunciar
Responde la pregunta