Creé un gráfico circular usando ChartJS.
Ahora quiero crear un controlador de clics en el que pueda obtener la etiqueta y el valor de la parte del gráfico que he creado. ¿Cómo logro eso?
let my_chart = new Chart('tot_pop_chart', { type: 'pie', data: { labels: ['NSW', 'VIC', 'QSD', 'SA', 'WA', 'TAS', 'NT', 'ACT'], datasets: [{ data: [1, 2, 3, 4, 5, 6, 7, 8], backgroundColor: ['rgba(63, 75, 59, 1)', 'rgba(242, 246, 208, 1)', 'rgba(197, 123, 87, 1)', 'rgba(118, 159, 182, 1)', 'rgba(58, 110, 165, 1)', 'rgba(88, 12, 31, 1)', 'rgba(157, 172, 255, 1)', 'rgba(122, 48, 108, 1)'] } ] }, options: { animation: {}, plugins: { legend: { display: true, position: 'bottom' } }, onClick: ... //see below } } );Mi intento actual es el siguiente:
onClick: e => { console.log("In click", e.chart); // find the index of the clicked item let canvasPosition = Chart.helpers.getRelativePosition(e, e.chart); let index = e.chart.scales.x.getValueForPixel(canvasPosition.x); // now I want to retrieve the label/data using the index, how to? } Sin embargo, el error ocurre como TypeError: Cannot read property 'getValueForPixel' of undefined . Además, ¿cómo recupero la etiqueta/los datos usando el índice en la función onClick?
¡Muchas gracias por tu ayuda!
Los gráficos circulares/de anillos no usan una escala, por lo que no puede usar getValueForPixel . En su lugar, puede simplemente escuchar el segundo argumento que contiene una matriz con todos los elementos activos que, para el modo de interacción predeterminado, solo contiene 1 elemento:
var options = { type: 'pie', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"] }] }, options: { onClick: (e, activeEls) => { let datasetIndex = activeEls[0].datasetIndex; let dataIndex = activeEls[0].index; let datasetLabel = e.chart.data.datasets[datasetIndex].label; let value = e.chart.data.datasets[datasetIndex].data[dataIndex]; let label = e.chart.data.labels[dataIndex]; console.log("In click", datasetLabel, label, value); } } } var 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.5.1/chart.js"></script> </body>