Opções de SDK de Charts Incorporados

Nesta página

Opções de Gráfico Incorporado

Configuração do Gráfico
getCustomizableAxes()
setAutoRefresh(boolean)
setPreFilter(object)
setFilter(object)
setMaxDataAge(number)
setRenderingSpecOverride(object)
setTheme("dark" | "light")
Exemplo
Opções de especificação de renderização
Operadores de Formatação Condicional
Exemplo de canais
Exemplo de formatação condicional

O SDK de incorporação fornece o JavaScript createChart() para renderizar um gráfico em uma página da web. Você pode usar opções para controlar a altura e a largura do gráfico, bem como o intervalo de atualização e outros aspectos.

Exemplo

O exemplo seguinte utiliza o método createChart() com opções.

const chart = new ChartsEmbedSDK({}).createChart({
  baseUrl: 'https://charts.mongodb.com/charts-rendering-spec-project-aygif',
  chartId: '38de4b38-42ea-422a-b702-a0220c8885e8',
  height: 300,
  width: 400,
  renderingSpec: {
    version: 1,
    title: 'Customized chart title',
    description: 'Customized chart description',
    axes: {
      y: {
        logScale: true
      },
    },
    channels: {
      x: {
        labelOverride: "New field label"
      },
      y: {
        numberSuffix: "%"
      }
    },
    options: {
      labelSize: 150,
      lineSmoothing: 'monotone'
    }
  }
});
await chart.render(embedContainer);

Opções de Gráfico Incorporado

O método createChart() utiliza as seguintes opções:

Opção	Tipo	Descrição	Obrigatório?
`autoRefresh`	booleano	Sinalizador que indica se o gráfico é atualizado automaticamente. Se omitidos, os Atlas Charts não são atualizados automaticamente. Use essa opção com a opção `maxDataAge` para configurar a frequência de atualização automática do dashboard.	no
`background`	string	Cor de fundo para aplicar a um gráfico em vez do fundo `theme` . Você pode especificar: Um código hexadecimal de cor Um nome de corCSS Um plano de fundo transparente usando o valor `transparent` Se omitido, a cor de fundo tem como padrão o `theme` atual : `#FFFFFF` para o tema `light` ou `#21313C` para o tema `dark` .	no
`baseUrl`	string	URL base do gráfico.	sim
`chartID`	string	Identificador único do gráfico.	sim
`preFilter`	objeto	Pré-filtro a ser aplicado no gráfico. Os pré-filtros são executados antes do início da execução da query do gráfico.	no
`filter`	objeto	Filtro para aplicar ao gráfico.	no
`getUserToken`	objeto	Função que retorna um token JSON web token codificado em `base64` . O Charts valida este token para determinar se o Charts renderiza um gráfico autenticado. Se o acesso autenticado estiver habilitado, o Charts renderizará a visualização do gráfico autenticado somente se o Charts puder validar o token usando os provedores de autenticação configurados. Se o token for inválido, os Atlas Charts renderizarão o gráfico não autenticado se você habilitou o acesso não autenticado. Caso contrário, os Charts não renderizarão o gráfico. Para saber mais, consulte Incorporar um gráfico autenticado usando um provedor JSON web token personalizado.	no
`height`	número	Altura do gráfico. Se omitido, o gráfico padroniza para a altura do seu container. Se você fornecer um valor sem unidades, a unidade padronizará para pixels (px).	no
`maxDataAge`	número	Especifica a idade máxima dos dados a serem carregados do cache ao carregar ou atualizar o gráfico. Se omitido, o Atlas Charts renderiza o gráfico com dados do cache se os dados tiverem menos de uma hora. Se os dados do cache tiverem mais de uma hora, o Charts consultará a fonte de dados para obter os dados mais recentes, atualizará o cache e renderizará o gráfico usando esses dados. Para saber como o Atlas Charts carrega dados do cache ao carregar ou atualizar o gráfico com base nos valores `autoRefresh` e `maxDataAge` , consulte Atualizar e Comportamento de Cache de Dados.	no
`renderingSpec`	objeto	Especificação de renderização que especifica como personalizar um gráfico incorporado. Para obter uma lista de personalizações disponíveis, consulte Opções de especificação de renderização.	no
`showAttribution`	booleano	Sinalizador que indica se o logotipo MongoDB deve ser exibido abaixo do gráfico. O padrão é `true`.	no
`theme`	string	Tema para o gráfico a ser usado. As opções válidas são: `light` para um plano de fundo claro com elementos de texto e gráfico escuros, ou `dark` para um plano de fundo escuro com texto claro e elementos gráficos. Padrão é `light`.	no
`width`	número	Largura do gráfico. Se omitido, o gráfico padroniza para a largura do seu container. Se você fornecer um valor sem unidades, o padrão será pixels (px).	no

Configuração do Gráfico

Após criar um gráfico, você pode controlar a configuração do gráfico chamando métodos na instância do Chart retornada pelo ChartsEmbedSDK.createChart({ ... }).

`getCustomizableAxes()`

Retorna os eixos do gráfico para o gráfico incorporado.

`setAutoRefresh(boolean)`

Especifica se o gráfico é atualizado automaticamente. Se omitidos, os Atlas Charts não são atualizados automaticamente.

Utilize este método com o método setMaxDataAge para configurar com que frequência o gráfico atualiza.

`setPreFilter(object)`

Aplica um pré-filtro de query ao gráfico incorporado ou ao gráfico dentro de um dashboard incorporado. Este método leva um objeto com operadores de query válidos. Adicione campos referenciados neste pré-filtro à lista Allowed filter fields na janela modal Embed Chart . Um documento vazio {} significa que você omite o pré-filtro.

Para saber mais sobre como habilitar a incorporação de um gráfico e aplicar pré-filtros, consulte os Tutoriais de Incorporação.

`setFilter(object)`

Applies a query filter to the embedded chart or chart within an embedded dashboard. Este método recebe um objeto com operadores de query válidos. Quaisquer campos referenciados neste filtro devem ser adicionados à lista Allowed filter fields na janela modal Embed Chart . Um documento vazio {} é equivalente a nenhum filtro.

Para saber mais sobre como habilitar a incorporação de um gráfico e aplicar filtros, consulte os Tutoriais de incorporação.

`setMaxDataAge(number)`

Especifica a idade máxima dos dados a serem carregados do cache ao carregar ou atualizar o gráfico. Se omitido, o Atlas Charts renderiza o gráfico com dados do cache se os dados tiverem menos de uma hora.

Se os dados do cache tiverem mais de uma hora, o Charts consultará a fonte de dados para obter os dados mais recentes, atualizará o cache e renderizará o gráfico usando esses dados.

Para saber como o Atlas Charts carrega dados do cache ao carregar ou atualizar o gráfico com base nos valores setAutoRefresh e setMaxDataAge , consulte Atualizar e Comportamento de Cache de Dados.

`setRenderingSpecOverride(object)`

Especifica como personalizar um gráfico.

Para obter uma lista de personalizações disponíveis, consulte Opções de especificação de renderização.

`setTheme("dark" | "light")`

Define o tema atual do gráfico incorporado. Ao definir o tema para dark, você precisa garantir que a cor de fundo de um gráfico tenha o contraste apropriado para que as informações permaneçam visíveis.

Dica

Veja também:

Exemplo

O exemplo a seguir configura uma instância do Chart denominada chart para utilizar o tema dark e atualizar a cada 60 segundos.

chart.setTheme("dark");
chart.setAutoRefresh(true);
chart.setMaxDataAge(60);

Opções de especificação de renderização

Você pode especificar as seguintes opções para o objeto renderingSpec :

Observação

Todas as opções, exceto version são opcionais.

Opção

Tipo

Descrição

eixos

objeto

objeto que descreve como personalizar os eixos dos Atlas Charts.

axes

.labelOverride

string

Valor para substituir o rótulo de eixos atual.

Para saber mais, consulte Substituição de etiquetas.

axes

.labelAngle

enum

ângulo no qual exibir uma etiqueta.

O valor pode ser um dos seguintes: 'vertical', 'horizontal', 'diagonal'

Isso se aplica a Atlas Charts de Todas as Colunas, 100% de Área Empilhado, Área Discreta, Linha Discreta, Combinação Agrupada, Combinação Empilhado e Mapa de Calor.

Para saber mais, consulte Ajustar ângulo do rótulo X-Axis.

axes

.logScale

booleano

Sinalizador que indica se a escala logorítmica deve ser usada para os valores de dados em um gráfico.

Isso se aplica apenas a Atlas Charts de Coluna Agrupada, Coluna Colorido, Barra Agrupada, Barra Colorido, Linha Contínua, Linha Discreta, Combinação Agrupada e Dispersão.

Para saber mais, consulte Escala logarítmica.

axes

.scaleMax

número | false

Valor máximo a ser exibido no gráfico. false faz com que esta opção se comporte em seu estado padrão.

Isso se aplica apenas a gráficos de coluna agrupada, coluna coloridas, coluna empilhada, barras agrupadas, barras coloridas, barras empilhadas, área contínua, área discreta, linha contínua, linha discreta, dispersão, combinação agrupada, combinação empilhada e medidor.

Para saber mais, consulte Máx e Mín.

axes

.scaleMin

número | false

Valor mínimo a ser exibido no gráfico. false faz com que esta opção se comporte em seu estado padrão.

Para saber mais, consulte Máx e Mín.

canais

objeto

objeto que descreve como personalizar os canais de Atlas Charts.

channels

.labelOverride

string

Valor para substituir o rótulo do canal atual.

Para saber mais, consulte Substituição de etiqueta de campo.

channels

.numberDecimals

número

Quantidade de casas decimais para arredondar cada valor de dados numéricos ou etiqueta.

Para saber mais, consulte Formatos de número.

channels

.numberMultiplier

número

Número pelo qual multiplicar cada valor de dados numéricos ou rótulo.

Para saber mais, consulte Formatos de número.

channels

.numberPrefix

string

String para preceder a cada valor de dados numéricos ou etiqueta.

Para saber mais, consulte Formatos de número.

channels

.numberSuffix

string

String a ser anexada ao final de cada valor de dados numéricos ou etiqueta.

Para saber mais, consulte Formatos de número.

channels

.numberThousandsSeparators

booleano

Sinalizador que indica se vírgulas devem ser mostradas como separadores de milhagem para valores de dados numéricos.

Para saber mais, consulte Formatos de número.

channels

.plotOnSecondaryAxis

booleano

Sinalizador que indica se um campo que corresponde a um canal em um eixo Y secundário deve ser traçado.

Isso se aplica apenas aos Atlas Charts de Área Contínua, Coluna Agrupada, Combinação Agrupada, Combinação Empilhado, Linha Contínua e Linha Discreta.

Para saber mais, consulte Eixo Y secundário.

channels

.wrapText

booleano

Sinalizador que indica se o texto deve ser agrupado para Tabela Charts.

Para saber mais, consulte Quebrar Texto.

Formatação condicional

objeto

objeto que descreve como formatar uma seção de um gráfico.

Para saber mais, consulte Formatação condicional.

conditionalFormatting

.applyToEntireRow

booleano

Sinalizador que indica se o formato especificado deve ser aplicado a uma linha inteira.

conditionalFormatting

.backgroundColor

enumeração | corda

objeto que indica como personalizar a cor do plano de fundo.

O valor pode ser um dos seguintes:

Regras condicionais	Tipo	Values
`'continuous'`	enum	`'redwhitegreen'` `'redwhiteblue'` `'yellowgreen'` `'redyellowgreen'` `'greenwhite'` `'bluewhite'` `'redwhite'`
`'discrete'`	string	Assemelha-se ao modelo de cores GB, à cor hexadecimal ou ao nome de uma cor. Se você especificar `'transparent'`, a cor anterior se aplicará, se houver.

conditionalFormatting

.conditions

array

Isso se aplica às regras condicionais 'continuous' e 'discrete' .

Regras condicionais	Descrição
`'continuous'`	objeto que descreve como formatar o `targetChannel`. Isso se aplica aos Atlas Charts de tabela.
`'discrete'`	objeto que descreve como formatar o `targetChannel`. Isso se aplica aos Atlas Charts de tabela e número.

conditionalFormatting
.conditions
.operator

NumericOperator
NumericBinnedOperator
StringOperator
StringRegexOperator
DateOperator
DateBinnedOperator

Operador para aplicar às suas regras condicionais 'discrete' .

Isso se aplica aos Atlas Charts de tabela e número.

Para saber mais sobre os operadores válidos, consulte Operadores de Formatação Condicional.

conditionalFormatting
.conditions
.targetChannel

string

Coluna da tabela que recebe a cor contínua para 'continuous' ou 'discrete' regras condicionais.

Isso se aplica aos Atlas Charts de tabela 'continuous' e 'discrete' e aos Atlas Charts de número 'discrete' .

conditionalFormatting
.conditions
.targetType

enum

Parte do Gráfico da tabela para aplicar o operator e value para 'discrete' regras condicionais.

O valor pode ser um dos seguintes: 'CHANNEL', 'ROW_INDEX', 'COLUMN_NAME', 'CELL_VALUE', 'ROW_TOTAL', 'COLUMN_TOTAL', 'COLUMN_ID'

conditionalFormatting
.conditions
.value

number
string
array of strings
object

O valor a ser aplicado às regras condicionais operator para 'discrete' . O tipo de dados depende do operator que você seleciona.

Isso se aplica aos Atlas Charts de tabela e número.

conditionalFormatting

.fontStyle

enum

Fonte a ser usada para 'discrete' regras condicionais.

O valor pode ser um dos seguintes: 'italic', 'normal'

Isso se aplica aos Atlas Charts de tabela e número.

conditionalFormatting

.fontWeight

enum

peso da fonte para 'discrete' regras condicionais.

O valor pode ser um dos seguintes: 'bold', 'normal'

Isso se aplica aos Atlas Charts de tabela e número.

conditionalFormatting

.reverseColor

booleano

Sinalizador que indica se a cor contínua escolhida deve ser revertida para 'continuous' regras condicionais.

Isso se aplica apenas aos gráficos de tabela.

conditionalFormatting

.textColor

string

Cor do texto para 'discrete' regras condicionais.

O valor deve ser uma string que se assemelhe ao modelo de cores GB, à cor hexadecimal ou ao nome de uma cor. Se você especificar 'auto', nenhuma cor se aplicará.

conditionalFormatting

.textDecoration

enum

Construção de texto para 'discrete' regras condicionais.

O valor pode ser um dos seguintes: 'underline', 'line-through', 'underline line-through', 'initial'

Isso se aplica aos Atlas Charts de tabela e número.

conditionalFormatting

.type

enum

Tipo de regras condicionais que seu gráfico utiliza.

O valor pode ser um dos seguintes: 'discrete', 'continuous'

As regras condicionais 'discrete' se aplicam aos gráficos de Tabela e Número.

As regras condicionais do 'continuous' se aplicam aos gráficos de tabela.

Descrição

string

Descrição do gráfico.

opções

objeto

objeto que descreve como personalizar as opções do gráfico.

options

.categoryLabels

booleano

Sinalizador que indica se os rótulos de categoria devem ser mostrados em um gráfico de pizza.

Para saber mais, consulte Mostrar ou Ocultar Etiquetas de Categoria.

options

.colorPalette

objeto | false

objeto que descreve como personalizar a paleta de cores. false desmarca qualquer paleta de cores personalizada que você defina no Construtor de Gráficos.

Para saber mais, consulte Personalização da paleta de cores.

options
.colorPalette
.channels

array

Nomes dos canais para receber uma cor personalizada.

options
.colorPalette
.color

objeto

objeto que descreve como personalizar a paleta de cores.

Isso se aplica a todos os tipos de Atlas Charts que podem ter vários campo no canal de série: todos os Atlas Charts de barras, exceto barras coloridas, todos os Atlas Charts de colunas, exceto colunas coloridas e velas, combinação agrupada, combinação empilhada, todos os Atlas Charts de linhas, todos os Atlas Charts de áreas e cifrões.

options
.colorPalette
.marks

array

Os valores de campo codificados no canal da série para receber uma cor personalizada.

Isso se aplica a todos os tipos de gráficos que podem ter múltiplas séries em um canal.

Para arrays que contêm os valores positive e negative, isso se aplica somente aos Atlas Charts de velas.

options
.colorPalette
.reverseColor

booleano

Sinalizador que indica se a cor contínua contínua deve ser revertida.

options
.colorPalette
.type

enum

Tipo de paleta de cores que seu gráfico usa.

O valor pode ser um dos seguintes: 'discrete', 'continuous'

A paleta de cores 'discrete' se aplica aos seguintes tipos de gráfico: Barra Agrupada, Barra Empilhado, Barra 100% Empilhado, Coluna Agrupada, Coluna Empilhado, 100% Coluna Empilhado, Área Contínua, Área Discreta, 100% Área Empilhado, Linha Contínua, Linha Discreta, Candlestick, Dispersão, Filhós, Geo Dispersão, Nuvem de Palavras, Medidor, Combinação Agrupada e Combinação Empilhado.

A paleta de cores 'continuous' se aplica aos seguintes tipos de gráficos: Coluna Colorido, Barra Colorido, Mapa de Calor Geo, Geo Coropleta e Mapa de Calor.

options
.colorPalette
.values

array

Valores de cores para personalizar as cores para Atlas Charts de série única ou o channels e marks para Atlas Charts de múltiplas séries.

options

.labelSize

número | false

Tamanho para o qual alterar um rótulo. O tamanho deve estar entre 50 e 200. false é equivalente a definir o tamanho para 100 e faz com que essa opção se comporte em seu estado padrão.

Para saber mais, consulte Redimensionar etiquetas.

options

.legendPosition

enum

Local para colocar uma legenda em relação ao gráfico. Isso se aplica apenas a gráficos que suportam legendas.

O valor pode ser um dos seguintes: 'right', 'bottom', 'top'

Para saber mais, consulte Personalizar legenda.

options

.lineSmoothing

enum

Método que o Charts usa para traçar uma linha em um gráfico.

O valor pode ser um dos seguintes: 'linear', 'monotone', 'step-before', 'step-after'

Isso se aplica apenas aos Atlas Charts de Área Contínua, Área Discreta, 100% Área Empilhado, Linha Contínua, Linha Discreta, Combinação Agrupada e Combinação Empilhado.

Para saber mais, consulte Linhas suaves.

options

.markers

booleano

Sinalizador que indica se marcadores de dados visíveis que representam pontos de dados individuais devem ser exibidos.

Para saber mais, consulte Mostrar ou Ocultar Marcadores de Dados.

options

.textSize

número | false

Tamanho do texto em um gráfico. false faz com que esta opção se comporte em seu estado padrão.

Para saber mais, consulte Redimensionar Texto da Tabela.

options

.totalsColumn

booleano

Sinalizador que indica se a soma total de cada coluna deve ser exibida.

Para saber mais, consulte Alternar totais de linhas e colunas da tabela.

options

.totalsRow

booleano

Sinalizador que indica se a soma total de cada linha deve ser exibida.

Para saber mais, consulte Alternar totais de linhas e colunas da tabela.

options

.valueLabels

enum

Método que o Charts usa para exibir o valor exato de um ponto de dados.

O valor pode ser um dos seguintes: 'value', 'percentage'

Isso se aplica a todos os Atlas Charts de barras, exceto 100% barra empilhada, Atlas Charts de todas as colunas, exceto Atlas Charts de coluna empilhada 100%, área contínua, área discreta, área empilhada 100%, linha contínua, linha discreta, combinação agrupada e combinação empilhada.

Para saber mais, consulte Substituição de etiquetas.

title

string

Título do gráfico.

Versão

número

Versão da especificação de renderização. A primeira versão e a atual é 1.

Este é um campo obrigatório.

Operadores de Formatação Condicional

A tabela a seguir mostra os operadores disponíveis para usar com formatação condicional, o tipo de dados ao qual se aplicam e seus valores possíveis.

Operador

Tipo

Values

DateBinnedOperator

objeto

BINNED_DATE_AFTER, BINNED_DATE_AFTER_OR_INCLUDES, BINNED_DATE_BEFORE, BINNED_DATE_BEFORE_OR_INCLUDES, BINNED_DATE_INCLUDES

O objeto deve ter as seguintes chaves:

date: string
time: string

Operador de data

objeto

DATE_AFTER, DATE_BEFORE, DATE_EXACTLY, DATE_ON_OR_AFTER, DATE_ON_OR_BEFORE

O objeto deve ter as seguintes chaves:

date: string
time: string

NumericBinnedOperator

número

BINNED_NUMBER_GREATER_THAN, BINNED_NUMBER_GREATER_THAN_OR_INCLUDES, BINNED_NUMBER_INCLUDES, BINNED_NUMBER_LESS_THAN, BINNED_NUMBER_LESS_THAN_OR_INCLUDES

NumericOperator

número

NUMBER_EQUAL_TO, NUMBER_GREATER_THAN, NUMBER_GREATER_THAN_OR_EQUAL_TO, NUMBER_LESS_THAN, NUMBER_LESS_THAN_OR_EQUAL_TO, NUMBER_NOT_EQUAL_TO, NUMBER_RANKED_IN_BOTTOM, NUMBER_RANKED_IN_BOTTOM_PERCENT, NUMBER_RANKED_IN_TOP, NUMBER_RANKED_IN_TOP_PERCENT

StringOperator

corda | array de strings

STRING_CONTAINS, STRING_EMPTY, STRING_EQUAL_TO, STRING_NOT_CONTAINS, STRING_NOT_EMPTY, STRING_NOT_EQUAL_TO, STRING_ONE_OF, STRING_STARTS_WITH

StringRegexOperator

objeto

STRING_REGEX

O objeto deve ter as seguintes chaves:

source: regex string
flags: string

O valor para flag pode ser um dos seguintes:

Valor	Descrição
`'i'`	Insensível a maiúsculas e minúsculas.
`'m'`	Multilinha.
`'x'`	Estendido.
`'s'`	Linha única.

Exemplo de canais

O exemplo seguinte configura uma instância do Gráfico denominada chart com estas opções:

Use a versão 1 da especificação de renderização.
Atualize o canal de codificação x para:
- Não use vírgulas para o separador de mil.
- Comece todos os valores numéricos com um $.
Atualize o canal de codificação y para encerrar todos os valores numéricos com um %.
Atualize o canal de codificação color para:
- Arredonde todos os valores decimais para duas casas decimais.
- Multiplique todos os valores numéricos por dois.
Use o tipo de paleta de cores continuous com a cor rainbow e para inverter a cor contínua escolhida.

await chart.setRenderingSpecOverride({
  version: 1,
  channels: {
    x: {
      numberThousandsSeparators: false,
      numberPrefix: '$',
    },
    y: {
      numberSuffix: '%',
    },
    color: {
      numberDecimals: 2,
      numberMultiplier: 2,
    },
  },
  options: {
    colorPalette: {
      type: 'continuous',
      color: 'rainbow',
      reverseColor: true,
    },
  },
});

Exemplo de formatação condicional

O exemplo seguinte configura uma instância do Gráfico denominada chart com estas opções:

Use a versão 1 da especificação de renderização.
Execute a seguinte formatação condicional para um CHANNEL onde o valor é maior que 200:
- Use as regras de formatação condicional do 'discrete' .
- Defina a cor de plano de fundo para um modelo de cores GB onde o vermelho é 240, o verde é 209 e o azul é 117.
- Defina a cor do texto como red.
- Defina o estilo da fonte como 'italic'.
- Enfeite o texto com 'underline'.
Para a coluna value_series_0 :
- Use a paleta de cores 'continuous' .
- Defina a cor de plano de fundo para redyellowgreen.
- Inverta a cor contínua escolhida.

await chart.setRenderingSpecOverride({
  version: 1,
  conditionalFormatting: [{
    type: 'discrete',
    backgroundColor: 'rgb(240, 209, 117)',
    textColor: 'red',
    fontStyle: 'italic',
    fontWeight: 'bold',
    textDecoration: 'underline',
    applyToEntireRow: false,
    conditions: [{
        operator: 'NUMBER_GREATER_THAN',
        targetType: 'CHANNEL',
        targetChannel: 'value',
        value: 200,
    }],
  },{
    type: 'continuous',
    backgroundColor: 'redyellowgreen',
    reverseColor: true,
    conditions: [{ targetChannel: 'value_series_0' }],
  }],
});

Voltar

Opções

iframe