Saltar al contenido

Chart.js: eventos de clic en gráfico de barras

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *