Estoy tratando de encontrar los puntos de datos actualmente visibles después de un evento de zoom usando chartjs-plugin-zoom. Siguiendo los ejemplos, se me ocurrió la siguiente devolución de llamada onZoomComplete, pero no funciona.
function getVisibleValues({chart}) { const x = chart.scales.x; let visible = chart.data.datasets[0].data.slice(x.minIndex, x.maxIndex + 1); } Un problema inmediato es que chart.data no parece existir (cuando se usa console.log(chart.data) vuelve indefinido). Lo mismo con x.minIndex y x.maxIndex ... Cualquier idea sobre lo que estoy haciendo mal sería muy apreciada.
A continuación se muestra cómo configuro el gráfico (los datos son una matriz de pares x, y):
ctx = new Chart(document.getElementById(ctx_id), { type: "scatter", data: { datasets: [ { label: "Data", lineTension: 0, showLine: true, data: data, }, ], }, options: { animation: false, plugins: { zoom: { zoom: { mode: "x", drag: { enabled: true, borderColor: "rgb(54, 162, 235)", borderWidth: 1, backgroundColor: "rgba(54, 162, 235, 0.3)", }, onZoomComplete: getVisibleValues, }, }, }, }, });Puede acceder a c.chart.scales["x-axis-0"]._startValue y c.chart.scales["x-axis-0"]._valueRange . Estos dos dan el primer y último valor visible respectivamente.
Estos valores se pueden usar para obtener los datos del conjunto de datos disponibles en c.chart.config.data.datasets[0].data , o los nombres de las etiquetas en c.chart.config.data.labels .
Si solo necesita obtener las etiquetas de marca visibles, puede hacerlo simplemente accediendo al chart.scales["x-axis-0"].ticks .
function getVisibleValues(c) { document.getElementById("visibleTicks").textContent = JSON.stringify( c.chart.scales["x-axis-0"].ticks // This is one way to obtain the visible ticks ); const start = c.chart.scales["x-axis-0"]._startValue // This is first visible value const end = start + c.chart.scales["x-axis-0"]._valueRange // This is the last visible value document.getElementById("visibleValues").textContent = JSON.stringify( c.chart.config.data.datasets[0].data.slice(start, end + 1) // Access chart datasets //Note: You can also get the labels from here, these are available at `c.chart.config.data.labels` ); } var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "line", data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: "# of Votes", data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] }, plugins: { zoom: { zoom: { // Boolean to enable zooming enabled: true, // Zooming directions. Remove the appropriate direction to disable // Eg. 'y' would only allow zooming in the y direction mode: "x", onZoomComplete: getVisibleValues } } } } }); <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js"></script> <html> <body> Visible ticks: <span id="visibleTicks">Begin zooming</span><br/>Visible data: <span id="visibleValues">Begin zooming</span> <div class="myChartDiv" style="width: 400px;"> <canvas id="myChart"></canvas> </div> </body> </html>