Ya no tienes que investigar más por otras webs ya que estás al sitio correcto, contamos con la respuesta que quieres pero sin complicaciones.
Solución:
Logré encontrar la respuesta a mi pregunta mirando el código fuente de Chart.js.
Proporcionado en la línea 3727 de Chart.js, Standard Build, es el método .getElementAtEvent
. Este método me devuelve el “elemento del gráfico” en el que se hizo clic. Aquí hay suficientes datos para determinar qué datos mostrar en una vista detallada del conjunto de datos en el que se hizo clic.
En el primer índice de la array devuelto por chart.getElementAtEvent
es un valor _datasetIndex
. Este valor muestra el índice del conjunto de datos en el que se hizo clic.
La barra específica en la que se hizo clic, creo, está anotada por el valor _index
. En mi ejemplo en mi pregunta, _index
apuntaría a One
en chart_config.data.labels
.
Mi handleClick
la función ahora se ve así:
function handleClick(evt)
{
var activeElement = chart.getElementAtEvent(evt);
..dónde chart
es la referencia del gráfico creado por chart.js al hacer:
chart = new Chart(canv, chart_config);
Por lo tanto, el conjunto específico de datos que se seleccionó con el clic se puede encontrar como:
chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
Y ahí lo tienes. Ahora tengo un punto de datos desde el que puedo crear una consulta para mostrar los datos de la barra en la que se hizo clic.
Hola, este es el evento de clic en las opciones que obtiene valores de los ejes x e y
onClick: function(c,i)
e = i[0];
console.log(e._index)
var x_value = this.data.labels[e._index];
var y_value = this.data.datasets[0].data[e._index];
console.log(x_value);
console.log(y_value);
Encontré esta solución en https://github.com/valor-software/ng2-charts/issues/489
public chartClicked(e: any): void
if (e.active.length > 0)
const chart = e.active[0]._chart;
const activePoints = chart.getElementAtEvent(e.event);
if ( activePoints.length > 0)
// get the internal index of slice in pie chart
const clickedElementIndex = activePoints[0]._index;
const label = chart.data.labels[clickedElementIndex];
// get value by index
const value = chart.data.datasets[0].data[clickedElementIndex];
console.log(clickedElementIndex, label, value)
Si te ha resultado de utilidad nuestro post, nos gustaría que lo compartas con otros seniors de esta manera contrubuyes a difundir este contenido.