Gerenciar eventos de clique

Nesta página

Pré-requisitos

Clique em sintaxe do evento
Carga útil
event Elemento
data Elemento
selectionFilter Elemento
target Elemento
Exemplos
Tratamento básico de eventos de clique
Filtragem interativa para eventos de clique

Observação

Clique em Eventos no Charts Embedding SDK está disponível na versão 2.1.0 e mais tarde.

O SDK JavaScript de incorporação de Charts inclui um manipulador de evento que permite que você assine evento. Quando você clica em um elemento específico em seu gráfico, o manipulador de eventos de clique captura detalhes do elemento em que você clicou. Use esse recurso para criar experiências interativas semelhantes às seguintes em seu aplicativo:

Clique em um elemento em um gráfico e abra um painel com mais detalhes sobre o elemento clicado.
Crie um filtro para outro gráfico.

Pré-requisitos

Antes de começar, instale a versão 2.1.0 ou posterior do Charts Embedding JavaScript SDK.

Clique em sintaxe do evento

O manipulador de evento usa um tipo de evento , click e uma função de chamada de resposta de chamada que contém informações sobre o evento de clique e o elemento clicado como um único objeto de carga útil . A sintaxe do manipulador de evento de clique é semelhante a esta:

chart.addEventListener("click", callback);

O manipulador de eventos também permite que você defina as funções de marcação para as quais deseja receber informações de eventos, eliminando a necessidade de verificar a carga útil. A sintaxe do manipulador de eventos de clique para definir as funções de marcação a serem filtradas é semelhante à seguinte:

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

O manipulador de eventos de clique deve ser adicionado após a conclusão da renderização do gráfico, conforme mostrado no exemplo a seguir:

Exemplo

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

Observação

Se você especificar o parâmetro options , o manipulador de eventos de clique capturará eventos somente se a função da marca clicada corresponder a um dos valores especificados no parâmetro. Se você omitir este parâmetro, o manipulador de eventos de clique capturará todos os eventos de clique no gráfico.

Carga útil

Você pode usar a carga útil do evento para construir um filtro personalizado que pode ser aplicado em outros Atlas Charts em sua aplicação. A sintaxe do objeto de carga útil para a função de chamada de resposta é semelhante ao seguinte:

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

O exemplo de objeto de carga útil a seguir mostra os elementos dentro da carga útil:

Exemplo

{
  "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 saber mais sobre os elementos dentro do objeto de carga útil, consulte:

event Elemento
data Elemento
selectionFilter Elemento
target Elemento

`event` Elemento

O elemento event da carga contém informações sobre o evento do mouse, incluindo:

O tipo de evento do mouse, que deve ser click
As teclas modificadoras usadas para trigger um evento de clique, como altKey, ctrlKey, shiftKey, metaKey
As coordenadas X e Y :
- Relativo ao elemento de tela do gráfico
- Do ponto de vista do aplicativo
- Relativo à página
- Em relação à tela

`data` Elemento

O elemento data da carga contém informações sobre o elemento de gráfico clicado. Para cada campo de dados codificado (x, y, series, intensity, color, shape, size, label, arc, value, target, number, display, text, location), o elemento data contém:

O canal label
O value do elemento clicado
O limite inferior apenas para categorização numérica ou de data

Para tabelas, o evento de clique do SDK do JavaScript de incorporação de Charts captura evento para campo que representam os dados do canal para o elemento clicado:

groups campo, que contém todos os canais do Grupos, incluindo rótulo e valor
cell campo, que contém o rótulo do cabeçalho da coluna e o valor da célula clicada

Para gráficos geoespaciais, o manipulador de eventos de clique do SDK do JavaScript de incorporação de gráficos captura eventos de clique para os seguintes elementos:

Para Atlas Charts, o manipulador de evento de clique captura o campo que representam os dados do canal para o elemento clicado:
- lat campo, que contém latitude
- lng campo, que contém longitude
- location campo, que contém a etiqueta do campo e valor da área geoespacial clicada
Para gráficos de dispersão geoespacial , o manipulador de eventos de clique captura os campos que representam os dados do canal para o elemento clicado:
- geopoint campo, que contém o nome do campo, valor no formato GeoJSON e as coordenadas do ponto clicado

`selectionFilter` Elemento

O elemento selectionFilter da carga útil deve conter um documento de filtroMQL válido, que representa o filtro que corresponde aos canais de categoria da marca clicada ou ao canal de valor x em um gráfico contínuo. Você pode modificar ou implementar seu próprio selectionFilter.

O objeto de filtro representa um único item clicado:

Uma string ou número ou data não categorizada, que se torna uma query de correspondência de igualdade ({field: value}) ou uma query usando operadores $eq , $ne , $in ou $nin .
Um número ou data categorizada, que se torna uma query usando os operadores gt , $gte , $lt ou lte . As datas periódicas são ignoradas.

Exemplo

{ 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") } }

O documento selectionFilter pode ter vários filtros de chave e valor. Por exemplo, se uma marca de um gráfico de múltiplas séries for clicada, o documento de filtro conterá os pares de filtros de categoria e série. Cada filtro deve fazer referência ao campo do conjunto de dados reais usados e não a seus rótulos.

Você pode habilitar o realce para eventos clicados utilizando o método setHighlight .

Exemplo

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

Para saber mais, consulte Destacar elementos do gráfico.

Em um gráfico incorporado que inclui manipuladores de eventos com um filtro para funções de elementos, o gráfico mostra:

Os quando você passa o mouse sobre um elemento que Atlas Triggers um evento de clique filtrado
Os quando você passa o mouse sobre um elemento que não aciona um evento de clique

Se o manipulador de eventos não incluir filtro para roles de elemento, o aparece quando você passa o mouse sobre qualquer elemento do gráfico.

`target` Elemento

O elemento target da carga contém informações sobre o destino clicado, incluindo:

O tipo de marca, como rect, line, arc, symbol, group ou area
O role da marca, como mark , legend , axis-label , axis-title , tick-label , legend-entry , legend-title ou frame
A cor de preenchimento da marca

Para tabelas , a carga útil do manipulador de eventos de clique do SDK do JavaScript de incorporação de gráficos captura o seguinte:

Tipo de marca, que é text
Marcar função, como group-cell, value-cell, dynamic-value-cell, row-total-cell, column-total-cell, header-column-total-cell e grand-total-cell

Para gráficos geoespaciais , a carga útil do manipulador de eventos de cliques do SDK do JavaScript de incorporação de gráficos captura o seguinte:

O tipo de marca, como polygon, map ou symbol
O role da marca, como mark ou map
A cor de preenchimento da marca

O manipulador de evento de clique do SDK do JavaScript de incorporação do Charts não captura evento de clique nos cabeçalhos das colunas.

Exemplos

O SDK JavaScript de incorporação de Charts inclui exemplos que demonstram usos comuns para evento de clique em uma aplicação. O primeiro exemplo mostra eventos básicos de clique e o manuseio de carga útil. O segundo exemplo mostra a filtragem interativa de elementos de gráfico clicados.

Para saber mais sobre como instalar o SDK de incorporação e executar o aplicativo de exemplo com seus próprios dados ou dados de amostra, consulte Atlas Charts Exemplo de incorporação de para eventos de clique no Github. Cada aplicação de exemplo é configurada com uma ID de gráfico e uma URL base que são específicas para a aplicação. Certifique-se de configurar seus próprios aplicativos com a ID do gráfico e a URL base corretas.

Tratamento básico de eventos de clique

No aplicativo de exemplo para o tratamento básico de eventos de clique, quando você clica em um elemento no Movie Genres gráfico , o manipulador de evento de clique exibe dados com base no elemento clicado. Neste exemplo de aplicação, o gráfico mostra o em todos os elementos do gráfico porque o gráfico não inclui um filtro para marcar funções.

Cada vez que você clica em um elemento no gráfico, o ouvinte de eventos de clique atualiza o payload para refletir os dados do eixo x e y . Quando você clica em um elemento que representa um gênero e uma década específicos no gráfico Movie Genres , o Clicked Element e Full Event Payload exibem detalhes sobre esse gênero de filme e década, incluindo:

Campos que representam dados para o elemento clicado.
Marque o tipo, a função e a cor de preenchimento.

Consulte o aplicativo de exemplo para visualizar a carga útil completa do evento.

Filtragem interativa para eventos de clique

No aplicativo de exemplo para filtragem interativa, quando você clica em um elemento no Movie Genres gráfico , o SDK de incorporação gera um filtro com base no elemento em que você clicou e, em seguida, aplica o filtro a um segundo gráfico. Neste exemplo de aplicação, o gráfico mostra:

Os quando você passa o mouse sobre um elemento interativo
Os quando você passa o mouse sobre um elemento que não trigger um evento de clique

O ouvinte de evento de clique Atlas Triggers evento somente para as funções de marca especificadas por meio do parâmetro options . A carga útil define um filtro com base no eixo y , que representa os gêneros de filme, e na faixa dos limites inferior e superior, que representa a década. Cada vez que você clica em um elemento que representa um gênero e uma década específicos no gráfico Movie Genres , a tabela Movie Details é filtrada pelo elemento clicado e muda para exibir os filmes disponíveis nesse gênero e década.

Consulte o aplicativo de exemplo para ver a função completa de chamada de resposta do manipulador de evento de uma amostra.

Voltar

Configurar provedores de autenticação

Destacar elementos do Chart

Observação

Pré-requisitos

Clique em sintaxe do evento

Exemplo

Observação

Carga útil

Exemplo

event Elemento

data Elemento

selectionFilter Elemento

Exemplo

Exemplo

target Elemento

Exemplos

Tratamento básico de eventos de clique

Filtragem interativa para eventos de clique

`event` Elemento

`data` Elemento

`selectionFilter` Elemento

`target` Elemento