0
209
VistasColumna perdida de gráfico de barras en Chart.js
Muestro el gráfico de barras por chart.js pero tengo algunos problemas. Estos son los datos de mi matriz de datos: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50]. El último valor de datos es 50 o 10 o 20 y no se muestra (Imagen 1). Si cambio a 50.5 o 10.5, se puede mostrar pero es demasiado pequeño (Imagen 2). Cualquiera que sepa mi problema, por favor, ayúdame. Muchas gracias.
Aquí está mi código:
//WidgetChart 5 var ctx = document.getElementById("widgetChart5"); if (ctx) { ctx.height = 220; var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [ { label: "My First dataset", data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50.5], borderColor: "transparent", borderWidth: "0", backgroundColor: "#ccc", } ] }, options: { maintainAspectRatio: true, legend: { display: false }, scales: { xAxes: [{ display: false, categoryPercentage: 1, barPercentage: 0.75 }], yAxes: [{ display: false }] } } }); } Imagen 1: El último valor de datos (50) no se muestra 
Imagen 2: ahora, si cambia a 50.5, todavía es demasiado pequeño 
1 Respuestas
Responde la pregunta0
No puedo decirlo con certeza según su captura de pantalla, pero sospecho que el gráfico es en realidad mucho más alto de lo que puede ver, pero su contenedor lo oculta (tal vez con el desbordamiento oculto). Si desactiva la opción "receptiva" en el gráfico, es posible que pueda ver el gráfico completo. Descubrí que la opción "receptiva" generalmente significa que el gráfico es mucho más alto de lo que esperaba.
//WidgetChart 5 var ctx = document.getElementById("widgetChart5"); if (ctx) { ctx.height = 220; var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], datasets: [{ label: "My First dataset", data: [80, 81, 80, 64, 65, 80, 70, 75, 67, 85, 66, 50], borderColor: "transparent", borderWidth: "0", backgroundColor: "#ccc", }] }, options: { responsive: false, maintainAspectRatio: true, legend: { display: false }, scales: { x: { display: false, categoryPercentage: 1, barPercentage: 1 }, y: { display: false } } } }); } <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <canvas id=widgetChart5 height="240" width="320"></canvas>