Manejar eventos de clic

event Elemento

El elemento event de la carga útil contiene información sobre el evento del ratón incluyendo:

• El tipo de evento del mouse, que debe ser click

• Las teclas modificadoras utilizadas para activar un evento de clic como altKey, ctrlKey, shiftKey, metaKey.

• Las coordenadas X y Y:

  • En comparación con el elemento de lienzo de la gráfica

  • Desde el punto de vista de la aplicación

  • Relativo a la página

  • Relative to the screen

data Elemento

El elemento data de la carga útil contiene información sobre el elemento de la gráfica cliqueado. Para cada campo de datos codificados (x, y, series, intensity, color, shape, size, label, arc, value, target, number, display, text, location), el elemento data contiene:

• El canal label

• El value del elemento pulsado

• El límite inferior solo para agrupamiento numérico o de fecha

Para las tablas, el controlador de eventos de clic del SDK de JavaScript de inserción de Charts captura eventos de clic para los campos que representan los datos del canal del elemento clicado:

• groups el campo, que contiene todos los canales de Grupos, incluido la etiqueta y el valor

• cell campo, que contiene la etiqueta del encabezado de columna y el valor de la celda en la que se hizo clic

Para gráficas geoespaciales, el controlador de eventos de clic del SDK JavaScript Charts Embedding captura eventos de clic en los siguientes elementos:

• Para gráficas de coropletas, el gestor de eventos de clic captura los campos que representan los datos de canal para el elemento clicado:

  • lat campo, que contiene latitud

  • lng campo, que contiene la longitud

  • location campo, que contiene la etiqueta del campo y el valor del área geoespacial clicada

• Para los gráficos geoespaciales de dispersión, el manejador de eventos de clic capta los campos que representan los datos de canal del elemento en que se hizo clic:

  • geopoint campo, que contiene el nombre del campo, el valor en formato GeoJSON, y las coordenadas del punto activado al hacer clic

selectionFilter Elemento

El selectionFilter elemento de la carga útil debe contener una Documento de filtroMQL que representa el filtro correspondiente a los canales de categoría de la marca seleccionada o al x canal de valor en un gráfico continuo. Puede modificar o implementar su selectionFilter propio.

El objeto de filtro representa un único ítem cliqueado:

• Una cadena o un número o fecha no binned, que se convierte en una consulta de coincidencia exacta ({field: value}) o una consulta usando $eq, $ne, $in o $nin operadores.

• Un número o fecha agrupado, que se convierte en una query usando los operadores gt, $gte, $lt o lte. Las fechas periódicas son ignoradas.

{ field: 'value' }
{ field1: 'value1', field2: 'value2' }
{ field: { $in: [ 'a', 'b', 'c' ] } }
{ field: { $nin: [ 'x', 'y', 'z' ] } }
{ field: { $gt: 10 } }
{ field: { $gt: 13, $lte: 30 } }
{ field: { $gt: Date("2020-01-01"), $lt: Date("2020-03-31") } }

El selectionFilter documento puede tener varios filtros de clave y valor. Por ejemplo, si se hace clic en una marca de una gráfica multiseries, el documento de filtro contiene tanto los pares de filtro de categoría como de series. Cada filtro debe hacer referencia a los campos de la fuente de datos real utilizados y no a sus etiquetas.

Puede habilitar el resaltado para los eventos clicados usando el método setHighlight.

const eventHandler = (payload) => {
  chart.setHighlight(payload.selectionFilter);
};
chart.render(container).then(() => {
  chart.addEventListener('click', eventHandler);
});

Para obtener más información, consulta Resaltar elementos de la gráfica.

En una gráfica incrustada que incluye controladores de eventos con un filtro para roles de elementos, la gráfica muestra:

• Cuando pasas el cursor sobre un elemento que activa un evento de clic filtrado

• El cuando se pasa el cursor sobre un elemento que no activa un evento de clic

Si el controlador de eventos no incluye un filtro para los roles de los elementos, el aparece cuando te pasas por encima de cualquier elemento de gráfica.

target Elemento

El elemento target de la carga útil contiene información sobre el objetivo seleccionado, incluyendo:

• El tipo de marca, como rect, line, arc, symbol, group o area

• El rol de marca, como mark, legend, axis-label, axis-title, tick-label, legend-entry, legend-title o frame

• Color de relleno de la marca

Para tablas, la carga útil del controlador de eventos de clic de JavaScript Charts Embedding captura lo siguiente:

• Tipo de marca, que es text

• Marcar rol, tales como group-cell, value-cell, dynamic-value-cell, row-total-cell, column-total-cell, header-column-total-cell, y grand-total-cell

Para gráficos geoespaciales, el payload del gestor del evento click de Charts Embedding SDK de JavaScript captura lo siguiente:

• El tipo de marca, como polygon, map o symbol

• El papel de la marca, como mark o map

• Color de relleno de la marca

El controlador de eventos de clic del SDK de JavaScript de incrustación de Charts no captura eventos de clic en los encabezados de columna.

Manejo básico de eventos de clic

En la aplicación de ejemplo para el manejo básico de eventos de clic, cuando haces clic en un elemento de la gráfica Movie Genres, el controlador de eventos de clic muestra datos basados en el elemento seleccionado. En esta aplicación de ejemplo, la gráfica muestra el en todos los elementos de la gráfica porque la gráfica no incluye un filtro para los roles de marca.

Cada vez que haga clic en un elemento en la gráfica, el controlador de eventos de clic actualizará el payload para reflejar los datos de los ejes x y y. Cuando haga clic en un elemento que representa un género y década específicos en la gráfica Movie Genres, el Clicked Element y el Full Event Payload muestran detalles sobre ese género y década de películas, incluidos:

• Campos que representan datos para el elemento clicado.

• Marca el tipo, el rol y el color de relleno.

Consulta la aplicación de ejemplo para ver la carga útil completa del evento.

Filtrado interactivo para eventos de click

En la aplicación de ejemplo para filtrado interactivo, cuando haces clic en un elemento de la gráfica Movie Genres, el SDK de embedding genera un filtro basado en el elemento en el que hiciste clic y luego aplica el filtro a una segunda gráfica. En este ejemplo de aplicación, la gráfica muestra:

• El cuando pasas el cursor sobre un elemento interactivo

• El al pasar el cursor sobre un elemento que no activa un evento de clic

El detector de eventos de click activa eventos solo para los roles de marca especificados a través del parámetro options. La carga útil define un filtro basado en el eje y, que representa los géneros cinematográficos, y el rango de límite inferior y superior, que representa la década. Cada vez que se haga clic en un elemento que representa un género y una década específicos en la Movie Genres gráfica, la Movie Details tabla se filtrará por el elemento seleccionado y cambiará para mostrar las películas disponibles en ese género y década.

Consulta la aplicación de ejemplo para ver una función de retorno de un controlador de eventos de muestra completa.