Você está visualizando a documentação do Looker. Para conferir a documentação do Looker Studio, acesse https://support.google.com/looker-studio.

Esta página foi traduzida pela API Cloud Translation.

Como personalizar visualizações usando o editor de configuração de gráficos

Você pode usar o editor de configuração de gráficos para personalizar as opções de formatação nas visualizações do Looker que usam a API HighCharts. Isso inclui a maioria dos gráficos cartesianos, como de colunas, de barras e de linhas, entre outros.

Pré-requisitos

Para acessar o Editor de configuração de gráficos, é preciso ter a permissão can_override_vis_config.

Personalizar uma visualização

Para personalizar uma visualização com o editor de configuração de gráficos, siga estas etapas:

Acessar uma visualização em uma Análise ou editar uma visualização em um Look ou painel.
Abra o menu Editar na visualização.
Clique no botão Edit Chart Config na guia Plot. O Looker mostra a caixa de diálogo Editar configuração do gráfico.
- O painel Configuração do gráfico (origem) contém o JSON original da sua visualização e não pode ser editado.
- O painel Configuração do gráfico (substituir) contém o JSON que vai substituir o JSON de origem. Quando você abre a caixa de diálogo Edit Chart Config pela primeira vez, o Looker preenche o painel com um JSON padrão. Você pode começar com esse JSON ou excluí-lo e inserir qualquer JSON válido do HighCharts.
Selecione a seção Chart Config (Override) e insira um arquivo JSON válido de HighCharts. Os novos valores substituirão os valores na seção Configuração do gráfico (origem).
- Consulte a seção Exemplos deste artigo para conferir exemplos de JSON válido do HighCharts.
- O Looker aceita qualquer valor JSON válido. O Looker não aceita funções, datas ou valores indefinidos.
Clique em <> (Código de formatação) para permitir que o Looker formate o JSON corretamente.
Clique em Visualizar para testar as mudanças.
Clique em Aplicar para aceitar as mudanças. A visualização será mostrada usando os valores JSON personalizados.

Depois de personalizar a visualização, você pode salvá-la. Se você acessou a visualização em uma Análise, salve a Análise. Se você editou um Look ou um dashboard, clique em Salvar.

Se você tentar visualizar o código com JSON inválido, o Looker vai mostrar uma mensagem de erro Invalid JSON detected . É possível limpar um JSON inválido usando a opção Corrigir código automaticamente na parte de baixo do painel Configuração do gráfico (Substituição).

Se você quiser editar as opções de visualização padrão, primeiro remova as alterações feitas no editor de configuração de gráficos e substitua-as mais tarde. Especificamente, siga estas etapas:

Clique no botão Edit Chart Config na guia Plot. O Looker mostra a caixa de diálogo Edit Chart Config.
Copie o texto no painel Configuração do gráfico (substituir).
Clique no botão Limpar substituições de gráfico para excluir todas as alterações.
Clique em Aplicar.
Edite sua visualização usando as opções padrão.
Clique no botão Editar configuração do gráfico na guia Plot. O Looker mostra a caixa de diálogo Editar configuração do gráfico.
Insira um JSON de HighCharts válido no painel Configuração do gráfico (Substituir). Você pode usar o texto copiado na etapa 2 como modelo, mas não se esqueça de testar as mudanças usando o botão Visualizar para garantir que não haja conflitos.
Clique em Aplicar.

Formatação condicional com `series formatters`

O editor de configuração de gráficos aceita a maioria dos JSONs válidos do HighCharts. Ele também aceita o atributo series formatters, que só existe no Looker. Cada série pode ter vários formatadores para combinar diferentes regras de estilo.

O atributo series formatters aceita dois atributos: select e style.

Insira uma expressão lógica no atributo select para indicar quais valores de dados serão formatados.
Digite um JSON no atributo style para indicar como formatar os valores de dados.

Por exemplo, o JSON a seguir colore cada valor de dados de laranja se for maior ou igual a 380:

{
  series: [{
    formatters: [{
      select: 'value >= 380',
      style: {
        color: 'orange'
      }
    }]
  }]
}

As seções a seguir descrevem os possíveis valores dos atributos select e style em mais detalhes.

O atributo `select`

É possível usar os seguintes valores em uma expressão select:

value: essa variável retorna o valor da série. Por exemplo, você pode usar select: value > 0 para segmentar todos os valores positivos ou value = 100 para corresponder apenas a séries com um valor de 100.
max: use select: max para segmentar o valor da série que tem o valor máximo.
min: use select: min para segmentar o valor da série que tem o valor mínimo.
percent_rank: esta variável segmenta o valor da série com um percentil especificado. Por exemplo, é possível usar select: percent_rank >= 0.9 para segmentar valores de série no percentil 90.
name: essa variável retorna o valor de dimensão da série. Por exemplo, se você tiver um gráfico mostrando pedidos "Vendidos", "Cancelados" e "Devolvidos", use select: name = Sold para segmentar a série em que o valor da dimensão é "Vendido".
AND/OR Use AND e OR para combinar várias expressões lógicas.

Para ver essas expressões implementadas no Editor de configuração de gráficos, consulte o exemplo Colorir os valores máximo, mínimo e percentil.

O atributo `style`

O atributo style pode ser usado para aplicar estilos compatíveis com o HighCharts. Por exemplo, é possível colorir valores de séries usando style.color, colorir as bordas das séries usando style.borderColor e definir a largura com style.borderWidth. Para conferir uma lista mais completa de opções de estilo, consulte as opções do Highcharts para series.column.data.

Para visualizações de linhas, use style.marker.fillColor e style.marker.lineColor em vez de style.color. Para conferir uma lista mais completa de opções de estilo de linha, consulte as opções do Highcharts para series.line.data.marker.

Para conferir a formatação de cor implementada no Editor de configuração do gráfico, consulte o exemplo Cor para os valores máximo, mínimo e percentil.

Exemplos

As seções a seguir apresentam exemplos de alguns casos de uso comuns do editor de configuração de gráficos. Para uma lista completa dos atributos que você pode editar, consulte a documentação da API HighCharts.

Mudar a cor do plano de fundo e do texto do eixo
Personalizar a cor da dica de ferramenta
Adicionar anotações e legendas ao gráfico
Adicionar intervalos de referência verticais
Colorir os valores máximo, mínimo e percentil

Mudar a cor do plano de fundo e do texto do eixo

Para mudar a cor de fundo de uma visualização, use o atributo chart.backgroundColor.

Da mesma forma, para alterar a cor do texto dos eixos em uma visualização, use os seguintes atributos:

O JSON do HighCharts a seguir altera a cor do plano de fundo da visualização para roxo e o texto dos títulos e rótulos dos eixos para branco.

{
  chart: {
    backgroundColor: "purple"
  },

  xAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  },

  yAxis: {
    labels: {
      style: {
        color: "white"
      }
    },
    title: {
      style: {
        color: "white"
      }
    }
  }
}

Para personalizar a cor da dica, use os seguintes atributos:

O JSON do HighCharts a seguir altera a cor do plano de fundo da dica para ciano e altera a cor do texto da dica para preto.

{
  tooltip: {
    backgroundColor: "cyan",
    style: {
      color: "black"
    }
  }
}

Para personalizar o conteúdo da dica, use os seguintes atributos:

O JSON do HighCharts a seguir altera o formato da dica de ferramenta de forma que o valor do eixo x apareça em uma fonte maior na parte superior da dica, seguido de uma lista de todos os valores das séries naquele ponto.

Este exemplo usa as seguintes funções e variáveis do HighCharts:

{key} é uma variável que retorna o valor do eixo X do ponto selecionado. (neste exemplo, o mês e o ano).
{#each points}{/each} é uma função que repete o código fechado para cada série no gráfico.
{series.name} é uma variável que retorna o nome da série.
{y:.2f} é uma variável que retorna o valor do eixo y do ponto selecionado, arredondado para duas casas decimais.
- {y} é uma variável que retorna o valor do eixo y do ponto selecionado.
- {variable:.2f} arredonda variable para duas casas decimais. Consulte a documentação de modelos de Highcharts para mais exemplos de formatação de valores.

{
  tooltip: {
    format: '<span style="font-size: 1.8em">{key}</span><br/>{#each points}<span style="color:{color}; font-weight: bold;">\u25CF {series.name}: </span>{y:.2f}<br/>{/each}',
    shared: true
  },
}

Adicionar legendas e anotações de gráficos

Para adicionar uma anotação, use o atributo annotations. Para adicionar uma legenda ao gráfico, use o atributo caption.

Para conferir as coordenadas de um ponto, clique em Inspect Point Metadata na parte de cima da caixa de diálogo Edit Chart Config. Em seguida, mantenha o ponteiro sobre o ponto de dados que você quer anotar. O Looker mostra um ID de ponto, que pode ser usado no atributo annotations.labels.point.

O JSON do HighCharts a seguir adiciona duas anotações ao gráfico para explicar uma diminuição nos itens de inventário após determinados períodos. Ele também adiciona uma legenda na parte de baixo do gráfico para explicar as anotações com mais detalhes.

{
  caption: {
    text: 'Items go on clearance after 60 days, and are thrown away after 80 days. Thus we see large drops in inventory after these events.'
  },
  annotations: [{
    labels: [{
        point: "inventory_items.count-60-79",
        text: "Clearance sale"
      },
      {
        point: "inventory_items.count-80+",
        text: "Thrown away"
      },
    ]
  }]
}

Adicionar bandas de referência verticais

Para adicionar uma banda de referência vertical, use o atributo xAxis.plotBands.

O JSON do HighCharts a seguir adiciona uma faixa de referência vertical entre 24 de novembro de 2022 e 29 de novembro de 2022 para indicar um período de venda. Ele também adiciona uma legenda à parte inferior do gráfico para explicar o significado da banda.

Os atributos to e from de xAxis.plotBands precisam corresponder aos valores de dados no gráfico. Neste exemplo, como os dados são baseados em tempo, os atributos aceitam valores de carimbo de data/hora Unix (1669680000000 para 29 de novembro de 2022 e 1669248000000 para 24 de novembro de 2022). Formatos de data baseados em string, como MM/DD/YYYY e DD-MM-YY, não são aceitos nos atributos to e from do HighCharts.

{
  caption: {
    text: 'This chart uses the HighCharts plotBands attribute to display a band around the Black Friday Cyber Monday sale period.'
  },
  xAxis: {
    plotBands: [{
      to: 1669680000000,
      from: 1669248000000,
      label: {
        text: 'BFCM Sale Period'
      }
    }]
  },
}

Adicione linhas pontilhadas e tracejadas

Para transformar linhas contínuas em linhas pontilhadas ou tracejadas, use o atributo series.dashStyle.

O JSON do HighCharts a seguir muda o atributo dashStyle da série Customers para uma linha pontilhada e o atributo dashStyle da série Sales para uma linha pontilhada.

{
  series: [{
    name: 'Customers',
    dashStyle: 'Dash'
  }, {
    name: 'Sales',
    dashStyle: 'Dot'
  }]
}

Colorir os valores máximo, mínimo e percentil

Consulte a página Como aproveitar ao máximo as visualizações do Looker: personalização da formatação condicional em gráficos cartesianos para ver um exemplo detalhado sobre como colorir os valores máximo, mínimo e percentil de uma visualização cartesiana.

Criar novos tipos de visualização

Você pode usar o editor de configuração de gráficos para criar tipos de visualização que não estão incluídos nos tipos de visualização padrão do Looker. Os artigos a seguir fornecem exemplos de algumas das visualizações que você pode criar com o editor de configuração de gráficos: