Tabelas de propriedades de consulta e visualização

Visualization

Esse componente coleta os dados e a configuração do contexto da consulta e renderiza a visualização apropriada. Você pode personalizar a largura e a altura passando valores numéricos de pixels para essas propriedades.

Propriedade Valores Observações
width número (em pixels) O padrão é 100% quando a propriedade é indefinida.
height número (em pixels) O padrão é 500 pixels quando a propriedade é indefinida.
chartTypeMap objeto de chave/valor Aceita um objeto de chave/valor que define qual componente será renderizado quando o sistema do adaptador encontrar valores de tipo de gráfico específicos. Isso pode ser usado para substituir os gráficos padrão do Looker ou para adicionar novos tipos de gráfico ao sistema do adaptador.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'
import { MyCustomRadar } from '../MyCustomRadar'

<Query query='12345' config={{ type: 'radar'}}>
   <Visualization
      width={1000}
      height={500}
      chartTypeMap={{ radar: MyCustomRadar}}
    />
</Query>

Query

O Query se integra à nossa API JavaScript para processar o ciclo de solicitação/resposta e capturar uma resposta da consulta pelo ID da consulta ou pelo valor qid. Você pode transmitir as substituições de configuração do vis para serem mesclados com a resposta da API e carregar todos os dados no contexto do React.

Propriedade Valores Observações
query número | string Pode aceitar a Query.client_id, que vem depois da propriedade qid no URL de uma exploração (3fdrdE0b3ATltUvXBaSOPN) ou um ID numérico de consulta (1234). Se você tiver acesso ao ID da consulta numérica, a partir desse valor poderá salvar uma solicitação de servidor adicional.

Query aceita a propriedade query ou dashboard, mas não ambas.
dashboard número Aceita um ID de painel numérico (1234). Se você tiver acesso ao ID do painel numérico, a partir desse valor, será possível salvar uma solicitação de servidor adicional.

dashboard não aceita os IDs de string de painéis do LookML.

Query aceita a propriedade query ou a propriedade dashboard, mas não ambas.
config Dependendo do valor de type, aceita as seguintes propriedades:
type, legend, positioning, render_null_values, tooltips, series, x_axis, y_axis

Consulte a documentação específica do gráfico mais adiante nesta página para ver os valores compatíveis.
Defina e modifique as configurações dos gráficos.
LoadingIndicator referência do componente Aceita uma referência de componente não montado. Padrão: ProgressCircular


import { Visualization, Query } from '@looker/visualizations'
import { ProgressCircular } from '@looker/components'

<Query
  query='12345'
  config={{
      /* specific properties described below */
  }}
  LoadingIndicator={ProgressCircular}
>
  <Visualization />
</Query>

Propriedades do gráfico de área

Veja a seguir as propriedades config dos gráficos de área.

Propriedade Valores Observações
type 'area'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou desativa a legenda como false.
Padrão: { position: 'bottom' }
positioning 'overlay' | 'stacked' | 'percent' Modo de empilhamento do gráfico. Padrão: 'overlay'
render_null_values booleano Trata valores nulos como 0. Padrão: false
tooltips booleano Para ativar ou desativar as dicas de ferramentas, passe o mouse sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
x_axis configuração do eixo x Consulte a seção eixo x para ver as opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção do eixo y para ver as opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'area',
    legend: { position: 'left' },
    positioning: 'stacked',
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado que substitui uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width número Defina a largura do traço da linha em pixels. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Padrão: 'none' (pontos desativados)
visible booleano Mostrar ou ocultar a série de dados. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      }
    }
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'area',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
reversed booleano Reverte a ordem dos pontos de dados. Padrão: false
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
range [número (min) | 'auto', número (máximo) | 'auto'] Define os valores mínimo e máximo do eixo y. O valor mínimo para 'auto' é 0, e o máximo para 'auto' é o valor máximo padrão em pontos de dados. Padrão: ['auto' | 'auto']
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'area',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [50, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Propriedades do gráfico de barras e colunas

Veja a seguir as propriedades config dos gráficos de barras e colunas.

Propriedade Valores Observações
type 'bar' | 'column'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa definindo-a como false. Padrão: { position: 'bottom' }
positioning 'grouped' | 'stacked' | 'percent' Modo de empilhamento do gráfico. Padrão: 'overlay'
tooltips booleano Ative ou desative as dicas ao passar o cursor sobre os pontos de dados.
Padrão: true
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
x_axis configuração do eixo x Consulte a seção eixo x para ver as opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção do eixo y para ver as opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'bar',
    legend: { position: 'left' },
    positioning: 'stacked',
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado que substitui uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
visible booleano Mostrar ou ocultar a série de dados. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'column',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        visible: false,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'column',
    series: [{ color: '#4285F4', label: 'Total Orders', visible: false }],
  }}
>
  <Visualization />
</Query>

x_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
reversed booleano Reverte a ordem dos pontos de dados. Padrão: false
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'column',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
range [número (min) | 'auto', número (máximo) | 'auto'] Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'bar',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Propriedades do gráfico de linhas

Veja a seguir as propriedades config dos gráficos de linha.

Propriedade Valores Observações
type 'line'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa definindo-a como false. Padrão: { position: 'bottom' }
render_null_values booleano Trata valores nulos como 0. Padrão: false
tooltips booleano Para ativar ou desativar as dicas de ferramentas, passe o mouse sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
x_axis configuração do eixo x Consulte a seção eixo x para ver as opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção do eixo y para ver as opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'line',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado que substitui uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width número Defina a largura do traço da linha em pixels. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Padrão: 'none' (pontos desativados)
visible booleano Mostrar ou ocultar a série de dados. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'line',
    series: [{ color: '#4285F4', label: 'Total Orders', shape: 'square' }],
  }}
>
  <Visualization />
</Query>

x_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
reversed booleano Reverte a ordem dos pontos de dados. Padrão: false
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
range [número (min) | 'auto', número (máximo) | 'auto'] Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'line',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Propriedades do gráfico de dispersão

Veja a seguir as propriedades config dos gráficos de dispersão.

Propriedade Valores Observações
type 'scatter'
legend false (para desativar) OU { position: 'left' | 'bottom' | 'right' | 'top' } Define a posição da legenda ou a desativa definindo-a como false. Padrão: { position: 'bottom' }
render_null_values booleano Trata valores nulos como 0. Padrão: false
tooltips booleano Para ativar ou desativar as dicas de ferramentas, passe o mouse sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
x_axis configuração do eixo x Consulte a seção eixo x para ver as opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção do eixo y para ver as opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'scatter',
    legend: { position: 'left' },
    render_null_values: true,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

series

A propriedade series pode aceitar uma matriz de configurações de série ou um objeto nomeado que substitui uma série específica na sua resposta.

Propriedade Valores Observações
color string Código hexadecimal
label string
line_width número Usado para definir o tamanho dos pontos em um gráfico de dispersão. Pense nela como o valor do contorno de cada ponto. Padrão: 3
shape 'circle' | 'diamond' | 'square' | 'triangle' | 'triangle-down' Definir forma do ponto. Padrão: 'circle'
style 'none' | 'filled' | 'outline' Definir estilo do ponto. Padrão: 'none' (pontos desativados)
size_by false | string Nome da série para calibrar o tamanho de cada ponto. Defina false para desativar o dimensionamento de ponto dinâmico. Padrão: false
visible booleano Mostrar ou ocultar a série de dados. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: {
      'orders.count': {
        color: '#4285F4',
        label: 'Total Orders',
        shape: 'square',
        size_by: 'orders.count',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
    query='12345'
    config={{
      type: 'scatter',
      series: [
        {
          color: '#4285F4',
          label: 'Total Orders',
          shape: 'square',
          size_by: 'orders.count',
        },
      ],
    }}
  >
    <Visualization />
  </Query>

x_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo x, nossa API está preparada para o futuro e está estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo x. Padrão: false (sem marcador)
reversed booleano Reverte a ordem dos pontos de dados. Padrão: false
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      x_axis: [{ gridlines: true, label: 'Date of first purchase' }],
    }}
  >
    <Visualization />
  </Query>

y_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
gridlines booleano Mostrar ou ocultar linhas de grade verticais. Padrão: false.
label false (para ocultar o rótulo) | string (valor para renderizar) Define o valor a ser renderizado como o rótulo do eixo y. Padrão: false (sem marcador)
range [número (min) | 'auto', número (máximo) | 'auto'] Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].
values booleano Mostre ou oculte os valores renderizados ao longo do eixo. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

  <Query
    query='12345'
    config={{
      type: 'scatter',
      y_axis: [
        { gridlines: true, label: 'Number of orders', range: [500, 'auto'] },
      ],
    }}
  >
    <Visualization />
  </Query>

Propriedades do gráfico de valor único

Veja a seguir as propriedades config dos gráficos de valor único.

Propriedade Valores Observações
type 'single_value'


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query query='12345' config={{ type: 'single_value' }}>
  <Visualization />
 </Query>

Propriedades do gráfico sparkline

Veja a seguir as propriedades config dos gráficos de gráficos sparkline.

Propriedade Valores Observações
type 'sparkline'
render_null_values booleano Trata valores nulos como 0. Padrão: false
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
y_axis configuração do eixo y Consulte a seção do eixo y para ver as opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query="12345"
  config={{ type: 'sparkline', render_null_values: true }}
>
  <Visualization />
</Query>

series

Embora o Sparkline ofereça suporte inerentemente a uma única série, mantemos um padrão de API envolvendo substituições de séries nomeadas ou de matrizes para manter a consistência com os outros tipos de gráficos na nossa biblioteca.

Propriedade Valores Observações
color string Código hexadecimal
line_width número Defina a largura do traço da linha em pixels. Padrão: 3


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

/* named series overrides */
<Query
  query='12345'
  config={{
    type: 'sparkline',
    series: {
      'orders.count': {
        color: '#4285F4',
        line_width: 10,
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'scatter',
    series: [
        {
          color: '#4285F4',
          line_width: 10,
        },
      ],
  }}
>
  <Visualization />
</Query>

y_axis

Embora nossos gráficos atualmente sejam compatíveis apenas com um único eixo y, nossa API é preparada para o futuro e estruturada para suportar a configuração de vários eixos.

Propriedade Valores Observações
range [número (min) | 'auto', número (máximo) | 'auto'] Define os valores mínimo e máximo do eixo y. Definir "mín" como "auto" assume o padrão 0 e "max" como "auto" assume como padrão o valor máximo do ponto de dados no conjunto. Padrão: ['auto' | 'auto'].


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'sparkline',
    y_axis: [
      { range: [50, 'auto'] },
    ],
  }}
>
  <Visualization />
</Query>

Propriedades do gráfico de tabela

Veja a seguir as propriedades config dos gráficos de tabela.

Propriedade Valores Observações
type 'table'
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.
column_order string[] Uma matriz de nomes de série (por exemplo, 'orders.count') indicando como você quer que as colunas da tabela sejam ordenadas da esquerda para a direita.
show_row_numbers boolean Alterne a exibição da linha de totais na parte inferior da tabela. Padrão: true
show_totals boolean Alterne a exibição da linha de totais na parte inferior da tabela. Padrão: true
show_row_totals boolean Alterne a exibição dos totais de linhas no lado direito da tabela. Padrão: true
truncate_text boolean Quando true, o texto da célula da tabela é limitado a uma única linha e o estouro de conteúdo é truncado com reticências. Quando false, o conteúdo pode ser dividido em várias linhas. Padrão: true
truncate_header boolean Quando true, os rótulos de cabeçalho da tabela são limitados a uma única linha e o estouro de conteúdo é truncado com reticências. Quando false, os cabeçalhos podem ser agrupados em várias linhas. Padrão: true


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    column_order: ['orders.count', 'users.city'],
    show_row_numbers: true,
    show_totals: true,
    show_row_totals: true,
    truncate_text: true,
    truncate_header: true
  }}
>
  <Visualization />
</Query>

series

A propriedade da série pode aceitar uma matriz de configurações da série ou um objeto nomeado que substitui uma série específica em sua resposta.

Propriedade Valores Observações
cell_visualization boolean Ativa ou desativa a visualização in-line. O padrão é true para a primeira medida e false para as outras.
color string Especifique a cor usada para renderizar a visualização das células da tabela.
value_format string Uma string de formatação de números que indica se os valores serão renderizados como moeda, a precisão do ponto flutuante, se serão usadas vírgulas ou pontos para delinear milhares e assim por diante.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'table',
    series: {
      'orders.count': {
        color: '#4285F4',
        cell_visualization: true,
        value_format: '$#,##0.00',
      },
    },
  }}
>
  <Visualization />
</Query>

/* ordered list series overrides */
<Query
  query='12345'
  config={{
    type: 'table',
    series: [{
      color: '#4285F4',
      cell_visualization: true,
      value_format: '$#,##0.00',
    }]
  }}
>
 <Visualization />
</Query>

Propriedades do gráfico de pizza

Veja a seguir as propriedades config dos gráficos de pizza.

Propriedade Valores Observações
type 'pie'
legend false (para desativar) | Configuração de legenda Definir como false desativa a legenda. Padrão: ativada. Consulte a seção legend para ver as opções de configuração e exemplos de uso quando ativados.
tooltips booleano Para ativar ou desativar as dicas de ferramentas, passe o mouse sobre os pontos de dados. Padrão: true
series série no formato view_name.field_name Consulte a seção série para ver opções de configuração e exemplos de uso.


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: false,
    tooltips: true,
  }}
>
  <Visualization />
</Query>

legend

A propriedade legend pode aceitar as seguintes configurações de legenda:

Propriedade Valores Observações
type 'labels' | 'legend' labels posiciona rótulos apontando para cada fatia. legend coloca uma legenda separada. Padrão: 'legend'
position 'top' | 'bottom' | 'left' | 'right' Posicione a legenda quando type: 'legend'. Padrão: 'right'
width número Largura máxima da legenda em pixels quando type: 'legend'. Padrão: 300
value 'label' | 'label_value' | 'value' | 'percent' | 'label_percent' Define o conteúdo da legenda: label, label and value, value, percent, label e percent. Padrão: 'label_percent'


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    legend: {
      type: 'legend'
      position: 'right'
      width: 200,
      value: 'label_value',
    },
  }}
>
  <Visualization />
</Query>

series

Ao contrário dos gráficos cartesianos, cada ponto de dados em um gráfico de pizza é tratado como uma nova série:

Propriedade Valores Observações
color string Código hexadecimal


Exemplo de uso:

import { Visualization, Query } from '@looker/visualizations'

<Query
  query='12345'
  config={{
    type: 'pie',
    series: {
      'New York': {
        color: '#4285F4',
      },
      'Los Angeles': {
        color: '#b73ec3',
      },
      'Chicago': {
        color: '#db4da8',
      },
    },
  }}
>
  <Visualization />
</Query>