Estoy creando un gráfico de donas con chartjs.
Quiero crear un efecto de desplazamiento: imprima los datos y la etiqueta correspondientes cuando se desplace sobre el gráfico.
¿Cómo logro esto? Este es mi código actual: https://jsfiddle.net/yigesong1999/dksqag0j/6/
Pego mi código a continuación:
new Chart('tot_pop_chart', { type: 'doughnut', data: { labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], datasets: [{ data: [1,2,3,4,5,6,7,8], backgroundColor: ['rgba(200,88,120, 1)', 'rgba(205,81,54, 1)', 'rgba(200,134,68, 1)', 'rgba(153,154,62, 1)', 'rgba(87,169,91, 1)', 'rgba(69,178,196, 1)', 'rgba(114,120,203, 1)', 'rgba(184,94,188, 1)' ], borderWidth: 1, borderColor: '#fff3e3' } ] }, options: { animation: {}, plugins: { title: { display: true, text: "Chart", font: { size: 16 } }, legend: { display: false }, tooltip: { enabled: true, }, }, onHover: (e) => { console.log("Hovering1", e) // print label and data here } } } );¡Realmente aprecio tu ayuda!
Según la documentación de Events from Chart.js, onHover se invoca con los siguientes argumentos: el event , una array de elementos activos (barras, puntos, etc.) y el chart . Por lo tanto, su función onHover podría escribirse de la siguiente manera:
onHover: (e, activeElements, chart) => { if (activeElements[0]) { let ctx = activeElements[0].element.$context; let label = chart.data.labels[ctx.dataIndex]; let value = chart.data.datasets[0].data[ctx.dataIndex]; console.log(label + ': ' + value); } }Eche un vistazo a su código modificado a continuación y vea cómo funciona.
new Chart('tot_pop_chart', { type: 'doughnut', data: { labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'], datasets: [{ data: [1, 2, 3, 4, 5, 6, 7, 8], backgroundColor: ['rgba(200,88,120, 1)', 'rgba(205,81,54, 1)', 'rgba(200,134,68, 1)', 'rgba(153,154,62, 1)', 'rgba(87,169,91, 1)', 'rgba(69,178,196, 1)', 'rgba(114,120,203, 1)', 'rgba(184,94,188, 1)' ], borderWidth: 1, borderColor: '#fff3e3' } ] }, options: { animation: {}, plugins: { title: { display: true, text: "Chart", font: { size: 16 } }, legend: { display: false }, tooltip: { enabled: true, }, }, onHover: (e, activeElements, chart) => { if (activeElements[0]) { let ctx = activeElements[0].element.$context; let label = chart.data.labels[ctx.dataIndex]; let value = chart.data.datasets[0].data[ctx.dataIndex]; console.log(label + ': ' + value); } } } } ); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script> <canvas id="tot_pop_chart"></canvas>Desde ChartJS v2.5 en adelante, los parámetros onHover() han cambiado. Puede acceder al elemento activo como onHover: (e, activeElements) => {}
onHover: (e, activeElements) => { // console.log("Hovering1", e); if (activeElements[0] != undefined){ console.log(activeElements[0].element.$context); // print label and data here } }