mailinapp
Documentation menu

Bloco Radar

Uma comparação multieixo — até 3 séries plotadas em um conjunto de eixos compartilhados, desenhadas como um polígono sobreposto (ou "teia") em vez de barras ou linha. É o formato para comparar categorias em várias dimensões ao mesmo tempo: um produto avaliado em preço, qualidade, velocidade e suporte, ou um plano comparado a outro nos mesmos critérios.

Como funciona

Cada linha autorada é um eixo. Sua posição em torno do círculo vem puramente da ordem de autoria (o ângulo é igual ao índice da linha dividido pelo número de linhas), nunca reordenada ou classificada por valor. Até 3 séries plotam seu próprio valor em todo eixo, compartilhando uma escala 0..máximo: o mesmo modelo de "um único eixo de valor compartilhado" que os gráficos de barras e de linha já usam, apenas disposto de forma radial em vez de em linha reta. É por isso que a lista de linhas de um radar reutiliza exatamente as mesmas colunas de autoria de barras/linha — um eixo de radar é idêntico, em modelo de dados, a uma categoria de gráfico de barras.

Um polígono precisa de pelo menos 3 vértices para ser uma forma significativa — 2 pontos desenham uma linha, 1 ponto não desenha nada — então o radar é o único gráfico dessa família com um piso além de um teto. Menos de 3 eixos autorados (incluindo zero) renderiza o mesmo placeholder de "adicione mais dados" que um gráfico vazio recebe em outros pontos da família. No outro extremo, o radar tem um limite de 8 eixos; além disso, os raios ficam apertados e os rótulos dos eixos começam a se sobrepor, o mesmo teto de "marcas demais" que todo outro tipo de gráfico dessa família aplica em 8 categorias/fatias/séries.

A tabela de dados sempre visível abaixo da imagem lista cada eixo como uma linha, com uma coluna por série ativa — a mesma forma categoria × série que as tabelas de barras e linha já usam. Uma legenda só aparece quando há 2 ou mais séries em jogo; uma única série já tem sua identidade nomeada pelo próprio título do bloco, a mesma convenção que os gráficos de barras/linha seguem.

A identidade da série vem de você ter dado um nome a ela. A série 1 sempre é renderizada, recorrendo ao próprio título do bloco se deixada sem nome, enquanto as séries 2 e 3 só aparecem depois que você digita um nome no respectivo campo de rótulo. Uma coluna de valores parcialmente preenchida sem nome de série nunca aparece como uma série-fantasma sem rótulo.

Campos configuráveis:

  • Título do gráfico — texto de cabeçalho opcional acima do gráfico.
  • Dados (pelo menos 3 linhas) — a lista de linhas: um rótulo de Categoria do eixo mais até 3 valores numéricos de série por linha.
  • Nome da série 1/2/3 e Cor da série 1/2/3 — a série 1 é renderizada incondicionalmente; as séries 2 e 3 só são renderizadas depois de nomeadas.
  • Cor de fundo, espaçamento interno, borda e raio da borda no cartão.
  • Cor/tamanho do título e cor/tamanho da legenda — estilo de texto para o cabeçalho e para o texto da legenda/tabela abaixo da imagem.

Exemplos

Comparar dois planos de produto pelos mesmos critérios — preço, profundidade de recursos, capacidade de resposta do suporte, facilidade de configuração — como duas séries sobrepostas em um radar dá a um e-mail de vendas ou marketing um único visual em vez de uma tabela de comparação de recursos. Um recapitulativo interno de operações pode pontuar vários fornecedores ou prestadores de serviço pela mesma rubrica (custo, qualidade, confiabilidade, comunicação) para justificar uma decisão de renovação num relance. Uma equipe de produto conduzindo uma pesquisa de clientes com várias dimensões avaliadas (usabilidade, valor, suporte, confiabilidade, design) pode traçar a pontuação média por dimensão como uma série, com as pontuações de um trimestre anterior como segunda série para mostrar a evolução.

Como é o fallback estático

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Vendor scorecard</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="360" height="360"
       alt="Radar chart: Speed (Vendor A 8); Reliability (Vendor A 6); Design (Vendor A 9); Price (Vendor A 5); Support (Vendor A 7)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Category</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Vendor A</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Speed</td>
      <td style="padding:4px 8px">8</td>
    </tr>
  </table>
</div>

Com apenas uma série nomeada, a legenda é omitida (o título já a nomeia), mas a tabela de dados continua listando todo eixo e valor.

Veja também