0
236
VistasEl cursor selecciona varios puntos en lugar de uno solo - chart.js
Al representar un gráfico con la biblioteca Chart.js, el cursor selecciona varios puntos en lugar de solo uno. Cuando el gráfico es lo suficientemente pequeño (aprox. 12 registros), funciona según lo previsto: solo se selecciona un punto y la medición con el cursor. Sin embargo, cuando hay más registros (ca. 96) se vuelve muy ilegible. Me gustaría que el gráfico pudiera contener entre 4 y 96 registros y que aún se viera legible.
¿Hay alguna configuración que pueda usar para eliminar este problema?
plantilla html básica:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>{{ title }}</title> <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script> </head> <body> <div style="text-align:center"> <h1>{{ title }}</h1> <div>Last reading: {{ last_temperature }} ℃ </div> <canvas id="chart" width="1200" height="800"></canvas> <script> // bar chart data var barData = { labels : [ {% for item in labels %} "{{ item }}", {% endfor %} ], datasets : [{ bezierCurve : false, data : [ {% for item in values %} {{ item }}, {% endfor %}] } ] } Chart.defaults.global.tooltipYPadding = 16; Chart.defaults.global.tooltipCornerRadius = 0; Chart.defaults.global.responsive = false; // get bar chart canvas var mychart = document.getElementById("chart").getContext("2d"); // draw bar chart var LineChartDemo = new Chart(mychart).Line(barData, { scaleStartValue: 0, scaleShowLabels: true, bezierCurve: false, }); </script> </div> </body> </html> Como luce: 
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Está utilizando una versión de chart.js que tiene 7 años. Si actualiza a la última versión de chart.js (3.7.1) no tiene este problema.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta