0
278
ViewsGráficos sobre cómo encontrar los límites locales de un gráfico ampliado
He estado usando chartjs con el complemento chartjs-plugin-zoom y no pude encontrar una manera de obtener los valores mínimos y máximos locales del eje x, y. Mientras me acerco, ¿cómo puedo obtener estos límites? 
Por ejemplo, conozco los valores máximo y mínimo de y, sin embargo, necesito el máximo de y para los datos que se muestran en la pantalla al instante.
Gracias por adelantado
3 answers
Answer question0
Puede obtener el mínimo y el máximo de la escala en sí del objeto de gráfico que obtiene como parámetro en la devolución de llamada de zoom de esta manera:
const options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderColor: 'orange' } ] }, options: { plugins: { zoom: { zoom: { onZoom: ({ chart }) => { const xMin = chart.scales.x.getLabelForValue(chart.scales.x.min); const xMax = chart.scales.x.getLabelForValue(chart.scales.x.max); const yMin = chart.scales.y.min; const yMax = chart.scales.y.max; console.log(xMin, xMax, yMin, yMax) }, wheel: { enabled: true } } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.js"></script> </body>0
No estoy seguro al 100% de lo que estás preguntando aquí. Creo que está preguntando si hay una manera de obtener la escala mínima y máxima mientras se desplaza. Si está preguntando eso, puede usar chart.getInitialScaleBounds() en las funciones de devolución de llamada onZoom o onZoomComplete. Sin embargo, si está solicitando una forma de obtener la escala máxima de la ventana gráfica actual después del zoom... No creo que esto sea posible después de leer bien los documentos y los tickets de GitHub.
https://github.com/chartjs/chartjs-plugin-zoom/discusiones/586
0
Aparentemente, podemos obtener el valor mínimo y máximo de x en la pantalla, pero no podemos obtener el valor de y directamente. Deberíamos iterar cada valor de x para obtener el máximo/mínimo de y entre el intervalo de pantalla. Así que mi código es algo como:
const { data } = chart.data.datasets[0]; var xMin = 0; var xMax = data.length; // I set yMin as yMax to get yMin while iterating over x values var yMin = chart.scales.y.max; var yMax = 0; xMin = chart.scales.x.min; xMax = chart.scales.x.max; for (let i = xMin; i < xMax; i++) { let y = data[i]; yMin = Math.min(y, yMin); yMax = Math.max(y, yMax); } Entonces puedo obtener el mínimo/máximo de y entre los píxeles más a la izquierda y más a la derecha del área del gráfico.