Tengo una página HTML con un gráfico charts.js que funciona. Estoy tratando de establecer los valores mínimo y máximo del gráfico, pero no puedo establecer los valores mínimo y máximo. Busqué en diferentes publicaciones pero todas dicen lo mismo, y estoy bastante seguro de que ya lo estoy haciendo...
> scales: { > yAxes: [{ > ticks: { > min: -100, > max: 100 > } > }] > }Simplemente no puedo entender lo que está mal.
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc/dist/chartjs-plugin-datalabels.min.js"></script> <title>daily</title> </head> <body> <canvas class='temp_chart' id='temp_chart'> </body> <script> function square_data(chart){ var c = document.createElement("canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FFA500"; ctx.rect(145, 70, 15, 15); ctx.fill() ctx.fillStyle = "#fff"; ctx.fillText(chart.dataset.data[chart.dataIndex], 147,82, 10); ctx.stroke(); return c } const time_of_day = ['Morning', 'Day', 'Evening', 'Night'] var temperatures = [15, 18, 4, -6] var ctx = document.getElementById('temp_chart').getContext('2d') window.chart = new Chart(ctx, { type: 'line', data: { labels: time_of_day, datasets: [{ fill:false, label: 'Cantidad Estudiantes', data: temperatures, borderColor: [ 'rgba(0, 0, 0, 1)', ], borderWidth: 3 }] }, options: { plugins: { legend: { display: false, }, datalabels: { anchor: 'start', align: '-45', clamp: true, color: "orange", } }, elements:{ "point":{"pointStyle":square_data}, } }, scales: { yAxes: [{ ticks: { min: -100, max: 100 } }] } }); </script>Esto se debe a que está utilizando la sintaxis v2 con v3, para todos los cambios, lea la guía de migración y definió la configuración de escala fuera del objeto de opciones.
En v3 todas las escalas son un objeto donde la clave del objeto es el ID de la escala
Además, para que funcione el complemento de etiquetas de datos, debe registrarlo, vea la primera línea en el bloque de script.
Lo último no incluye 2 versiones principales de una biblioteca, alta probabilidad de dar errores
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <title>daily</title> </head> <body> <canvas class='temp_chart' id='temp_chart'> </body> <script> Chart.register(ChartDataLabels); // Added this line function square_data(chart) { var c = document.createElement("canvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FFA500"; ctx.rect(145, 70, 15, 15); ctx.fill() ctx.fillStyle = "#fff"; ctx.fillText(chart.dataset.data[chart.dataIndex], 147, 82, 10); ctx.stroke(); return c } const time_of_day = ['Morning', 'Day', 'Evening', 'Night'] var temperatures = [15, 18, 4, -6] var ctx = document.getElementById('temp_chart').getContext('2d') window.chart = new Chart(ctx, { type: 'line', data: { labels: time_of_day, datasets: [{ fill: false, label: 'Cantidad Estudiantes', data: temperatures, borderColor: [ 'rgba(0, 0, 0, 1)', ], borderWidth: 3 }] }, options: { // Changed this block scales: { y: { min: -100, max: 100, } }, plugins: { legend: { display: false, }, datalabels: { anchor: 'start', align: '-45', clamp: true, color: "orange", } }, elements: { "point": { "pointStyle": square_data }, } }, }); </script>