0
414
Visualizações¿Cómo puedo cambiar el cursor en el segmento de gráfico circular en ChartJS 3?
¿En una situación similar a Cambiar el cursor al puntero en el gráfico de barras Chart.js cuando el evento hover (movemove) está deshabilitado? Estoy tratando de cambiar el cursor al pasar el mouse. Sin embargo, en mi caso, se trata de un segmento de gráfico circular y no de una etiqueta. Estamos navegando a páginas relacionadas al hacer clic en cada segmento.
Para la versión 2 hicimos esto:
options: { hover: { onHover: function(ev, el) { ev.target.style.cursor = el[0] ? 'pointer' : 'default'; } } }Sin embargo, esto ya no funciona con v3. El elemento nativo no parece estar disponible. Revisé los datos disponibles sobre el evento y no puedo encontrar el elemento real.
Aquí está mi último intento:
options: { onHover: function(e) { e.native.target.style.cursor = 'pointer'; } } También probé a través activeEls :
options: { onHover: function(e, activeEls) { if (activeEls.length) { activeEls[0].style.cursor = 'pointer'; } } }Los datos allí se ven así:
¿Cómo puedo acceder al elemento del segmento para aplicar estilo?
1 Respostas
Responde à pergunta0
Puede obtener la instancia del gráfico del evento que tiene el lienzo en el que puede apuntar el mouse de la siguiente manera:
const 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: { onHover: (evt, activeEls) => { activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default'; } } } 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.1/chart.js"></script> </body>