/ /

/ /

Manejar eventos de clic

Nota

Haga clic en Eventos en el El SDK de incrustación de gráficos está disponible en 2 la1 versión..0 y posteriores.

El SDK de JavaScript para incrustar gráficos incluye un controlador de eventos de clic que permite suscribirse a ellos. Al hacer clic en un elemento específico del gráfico, el controlador captura los detalles del elemento. Utilice esta función para crear experiencias interactivas similares a las siguientes en su aplicación:

Haga clic en un elemento de un gráfico y abrirá un panel con más detalles sobre el elemento en el que hizo clic.
Crear un filtro para otro gráfico.

Requisitos previos

Antes de empezar, Instale 2.1.0 la versión o posterior del SDK de JavaScript para incrustar gráficos.

Sintaxis del evento de clic

El controlador de eventos toma un tipo de evento, clicky una función de devolución de llamada que contiene información sobre el evento de clic y el elemento en el que se hizo clic como un único objeto de carga útil. La sintaxis del controlador del evento de clic es similar a la siguiente:

chart.addEventListener("click", callback);

El controlador de eventos también permite definir los roles de marca para los que se desea recibir información de eventos, eliminando así la necesidad de verificar la carga útil. La sintaxis del controlador de eventos de clic para definir los roles de marca por los que se filtrará es similar a la siguiente:

const options = { includes: [{ roles: ['mark', 'axis-label'] }] };
chart.addEventListener("click", callback, options);

El controlador del evento de clic debe agregarse después de que el gráfico haya terminado de representarse, como se muestra en el siguiente ejemplo:

Ejemplo

chart.render(document.getElementById("chart")).then(
     () => chart.addEventListener('click',
       (payload) => alert(JSON.stringify(payload)),
       options)
   );

Nota

Si especifica el parámetro options, el controlador de eventos de clic captura eventos solo si la función de la marca en la que se hizo clic coincide con uno de los valores especificados en el parámetro. Si omite este parámetro, el controlador de eventos de clic captura todos los eventos de clic del gráfico.

Carga útil

Puede usar la carga útil del evento de clic para crear un filtro personalizado que pueda aplicar a otros gráficos de su aplicación. La sintaxis del objeto de carga útil para la función de devolución de llamada es similar a la siguiente:

chart.addEventListener("click", (payload) => {
    // handle events
}

El siguiente ejemplo de objeto de carga útil muestra los elementos dentro de la carga útil:

Ejemplo

{
  "chartId": "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
  "chartTitle": "This is my chart's title",
  "chartDescription": "This is my chart's description",
  "event": { // information about the mouse event. For example:
    "type": "click", // event type
    "altKey": false, // modifier keys
    "ctrlKey": false,
    "shiftKey": false,
    "metaKey": false,
    "offsetX": 152, // element coordinates
    "offsetY": 176,
    "clientX": 172, // coordinates from application viewpoint
    "clientY": 241,
    "pageX": 172, // coordinates relative to the page
    "pageY": 241,
    "screenX": 172, // coordinates relative to screen
    "screenY": 312
  },
  "data": { // information about the clicked chart element. For example:
    "y": {
      "label": "unwind array 'genres'",
      "value": "Adventure"
    },
    "x": {
      "label": "count ( _id )",
      "value": 659
    },
    "color": {
      "label": "year",
      "value": "2000 - 2010",
      "lowerBound": 2000,
      "upperBound": 2010
    }
  },
  selectionFilter: {
    // category data expressed as MQL filter query that
    // interactive filters would output to filter other charts.
    // For example:
    genres: 'Adventure',
    year: {
      $gte: 2000,
      $lt: 2010,
    },
  },
  "target": { // information about the clicked target. For example:
    "type": "rect", // type of mark, such as rect, line, etc.
    "role": "mark", // role of mark, such as mark, legend, etc.
    "fill": "#8CB6F2" // fill color of the mark
  },
  "apiVersion": 1 // API version of event payload
}

Para obtener más información sobre los elementos dentro del objeto de carga útil, consulte:

event Elemento
data Elemento
selectionFilter Elemento
target Elemento

`event` Elemento

El event elemento de la carga útil contiene información sobre el evento del mouse, que incluye:

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:
- Relativo al elemento de lienzo del gráfico
- Desde el punto de vista de la aplicación
- Relativo a la página
- Relativo a la pantalla

`data` Elemento

El data elemento de la carga útil contiene información sobre el elemento del gráfico en el que se hizo clic. Para cada campo de datos codificadosx yseriesintensitycolorshapesizelabelarcvaluetargetnumberdisplaytextlocation(,,,,,,,,,,,,,,), el data elemento contiene:

El canal label
El value del elemento en el que se hizo clic
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 para incrustar gráficos captura eventos de clic para los campos que representan los datos del canal del elemento en el que se hizo clic:

groups campo, que contiene todos los canales de Grupos, incluida 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 los gráficos geoespaciales, el controlador de eventos de clic del SDK de JavaScript para incrustar gráficos captura eventos de clic para los siguientes elementos:

Para los gráficos coropletas, el controlador de eventos de clic captura los campos que representan los datos del canal para el elemento en el que se hizo clic:
- lat campo, que contiene la 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 de dispersión geoespaciales, el controlador de eventos de clic captura los campos que representan los datos del canal para el elemento en el que se hizo clic:
- geopoint campo, que contiene el nombre del campo, el valor en formato GeoJSON y las coordenadas del punto en el que se hizo clic

`selectionFilter` Elemento

El selectionFilter elemento de la carga útil debe contener un valor válido 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 elemento en el que se hizo clic una sola vez:

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.

Ejemplo

{ 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 documento selectionFilter puede tener varios filtros de clave y valor. Por ejemplo, si se hace clic en una marca de un gráfico multiseries, el documento de filtro contiene los pares de filtros de categoría y serie. Cada filtro debe hacer referencia a los campos de la fuente de datos utilizados, no a sus etiquetas.

Puede habilitar el resaltado de los eventos en los que se hizo clic utilizando el método setHighlight.

Ejemplo

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

Para obtener más información, consulte Resaltar elementos del gráfico.

En un gráfico incrustado que incluye controladores de eventos con un filtro para roles de elementos, el gráfico muestra:

Cuando pasas el cursor sobre un elemento que activa un evento de clic filtrado
Cuando pasas 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, aparece cuando pasa el cursor sobre cualquier elemento del gráfico.

`target` Elemento

El target elemento de la carga útil contiene información sobre el objetivo en el que se hizo clic, que incluye:

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
El 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 roles, 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
El color de relleno de la marca

El controlador de eventos de clic del SDK de JavaScript para incrustar gráficos no captura eventos de clic en los encabezados de columna.

Ejemplos

El SDK de JavaScript para la incrustación de gráficos incluye ejemplos que demuestran usos comunes de los eventos de clic en una aplicación. El primer ejemplo muestra eventos de clic básicos y la gestión de la carga útil. El segundo ejemplo muestra el filtrado interactivo de los elementos de gráficos en los que se ha hecho clic.

Para obtener más información sobre la instalación del SDK de incrustación y la ejecución de la aplicación de ejemplo con sus propios datos o datos de muestra, consulte el ejemplo de incrustación de gráficos Atlas para eventos de clic en GitHub. Cada aplicación de ejemplo se configura con un ID de gráfico y una URL base específicos de la aplicación. Asegúrese de configurar sus aplicaciones con el ID de gráfico y la URL base correctos.

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 del elemento en el que se hizo clic.
Marcar tipo, rol y color de relleno.

Consulte la aplicación de ejemplo para ver la carga completa del evento.

Filtrado interactivo para eventos de clic

En la aplicación de ejemplo para el filtrado interactivo, al hacer clic en un elemento del Movie Genres gráfico, el SDK de incrustación genera un filtro basado en el elemento en el que se hizo clic y luego lo aplica a un segundo gráfico. En esta aplicación de ejemplo, el gráfico muestra:

Cuando pasas el cursor sobre un elemento interactivo
Cuando pasas el cursor sobre un elemento que no activa un evento de clic

El detector de eventos de clic activa eventos solo para los roles de marca especificados mediante el parámetro options. La carga útil define un filtro basado en el eje y, que representa los géneros cinematográficos, y los límites inferior y superior, que representan la década. Cada vez que se hace clic en un elemento que representa un género y una década específicos en el gráfico Movie Genres, la tabla Movie Details se filtra por el elemento seleccionado y cambia para mostrar las películas disponibles en ese género y década.

Consulta la aplicación de ejemplo para ver la función de devolución de llamada del controlador de eventos de muestra completa.

Volver

Configurar proveedores de autenticación

Resaltar elementos del gráfico

Nota

Requisitos previos

Sintaxis del evento de clic

Ejemplo

Nota

Carga útil

Ejemplo

event Elemento

data Elemento

selectionFilter Elemento

Ejemplo

Ejemplo

target Elemento

Ejemplos

Manejo básico de eventos de clic

Filtrado interactivo para eventos de clic

`event` Elemento

`data` Elemento

`selectionFilter` Elemento

`target` Elemento