Estoy usando chartsjs. Quiero hacer clic en un sector del gráfico circular y establecer una alerta para mostrar el nombre del sector en el que se hizo clic.
responsive: false, onClick : (event, items) =>{ alert("Clicked"); } esto producirá el término 'clic' en cualquier segmento. Pero, ¿cómo puedo obtener la rebanada? Cuando cambio el término “clicked” para los items el resultado es [object Object] . ¿Cómo aíslo el nombre de la rebanada? Conoce el nombre que aparece cuando pasa el mouse sobre una porción del gráfico circular chartsjs.
cuando inspecciono la sección del gráfico en la que hago clic (tomando la primera sección circular, por ejemplo) veo:
[i] 0: i hidden: false _chart: ni {id: 2, ctx: CanvasRenderingContext2D, canvas: canvas#myChart4, config: {…}, width: 650, …} _datasetIndex: 0 _index: 0 _model: backgroundColor: "rgb(0, 72, 165)" borderAlign: "center" borderColor: "#fff" borderWidth: 2 circumference: 1.3057964574823102 endAngle: -0.26499986931258634 innerRadius: 78.4 label: false outerRadius: 156.8 startAngle: -1.5707963267948966 x: 325 y: 192.2 [[Prototype]]: ObjectComo dijiste, obtienes un objeto, si registras este objeto, verás que es una matriz que contiene todos los elementos activos. Si registra el elemento en sí, verá que contiene el índice del conjunto de datos y el índice de datos, con estos puede obtener la etiqueta actual del gráfico 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: { onClick: (evt, activeEls, chart) => { console.log(chart.data.labels[activeEls[0].index]) } } } 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>Editar
Parece que está utilizando V2, el proceso es básicamente el mismo pero la variable del gráfico se define en un lugar diferente:
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: { onClick: (evt, activeEls) => { console.log(activeEls[0]._chart.data.labels[activeEls[0]._index]) } } } 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/2.9.4/Chart.js"></script> </body>