¿Cómo puedo crear un gráfico de barras que escuche los eventos de desplazamiento y clic fuera del área de trazado?
demostración sencilla:
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], }] }, options: { onHover: () => console.log("hover"), onClick: () => console.log("click"), } }); <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script> <canvas id="myChart" width="400" height="400"></canvas>Como se puede mostrar en la demostración anterior, las devoluciones de llamada de desplazamiento y clic no se activan cuando los eventos ocurren fuera del área de trazado, por ejemplo, al hacer clic en las etiquetas de marca de eje.
Puede escribir un complemento personalizado con el gancho afterEvent que capturará todos los eventos. Aquí puede filtrar los eventos que desee, como mousemove , mouseout , click o cualquier otro evento que se genere al interactuar con el lienzo.
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: [{ id: 'customEventListner', afterEvent: (chart, evt, opts) => { console.log(evt.event.type, evt.event.x, evt.event.y) } }] } 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.6.0/chart.js"></script> </body>