0
229
VistasChart.js cambia el texto flotante
Cuando paso el cursor sobre el punto de datos, que está en marzo y tiene un valor de 15, dice 15 de enero en lugar de 15 de marzo, pero está en la ubicación correcta. ¿Hay alguna forma de arreglar esto?
<!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> var xyValues = [ {x:"March", y:15}, ]; new Chart("myChart", { type: "scatter", data: { datasets: [{ pointRadius: 4, pointBackgroundColor: "rgb(0,0,255)", data: xyValues }] }, options: { legend: {display: false}, scales: { xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }], yAxes: [{ticks: {min: 6, max:16}}], } } }); </script> </body> </html>2 Respuestas
Responde la pregunta0
Puede usar una devolución de llamada de etiqueta personalizada para obtener los datos correctos para la información sobre herramientas:
<!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> var xyValues = [{ x: "March", y: 15 }, ]; new Chart("myChart", { type: "scatter", data: { datasets: [{ pointRadius: 4, pointBackgroundColor: "rgb(0,0,255)", data: xyValues }] }, options: { tooltips: { callbacks: { label: (ttItem, data) => (`(${data.datasets[ttItem.datasetIndex].data[ttItem.index].x}, ${data.datasets[ttItem.datasetIndex].data[ttItem.index].y})`) } }, legend: { display: false }, scales: { xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }], yAxes: [{ ticks: { min: 6, max: 16 } }], } } }); </script> </body> </html>EDITAR:
También puede optar por actualizar a la última versión principal de chart.js (Versión 3), allí este comportamiento parece estar solucionado de forma predeterminada.
Hay algunos cambios importantes en V3, como la forma en que se definen las escalas, ahora todas las escalas son su propio objeto, por ejemplo, con la identificación de escala como clave de objeto. Para todos los cambios, puede leer la guía de migración.
<!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> var xyValues = [{ x: "March", y: 15 }, ]; new Chart("myChart", { type: "scatter", data: { datasets: [{ pointRadius: 4, pointBackgroundColor: "rgb(0,0,255)", data: xyValues }] }, options: { plugins: { legend: { display: false } }, scales: { x: { type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }, y: { min: 6, max: 16 }, } } }); </script> </body> </html>0
Solo dale a enero y febrero un valor null .
<!DOCTYPE html> <html> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <body> <canvas id="myChart" style="width:100%;max-width:700px"></canvas> <script> var xyValues = [ null, null, {x:"March", y:15}, ]; new Chart("myChart", { type: "scatter", data: { datasets: [{ pointRadius: 4, pointBackgroundColor: "rgb(0,0,255)", data: xyValues }] }, options: { legend: {display: false}, scales: { xAxes: [{ type: 'category', labels: ['January', 'February', 'March', 'April', 'May', 'June'] }], yAxes: [{ticks: {min: 6, max:16}}], } } }); </script> </body> </html>