Introdução ao gráfico de radar
O gráfico de radar é uma maneira simples de plotar dados de baixa dimensão em formato circular.
O gráfico de radar também é conhecido como gráfico de aranha, gráfico de estrela, gráfico de teia ou gráfico polar.
Aplicação
O gráfico de radar é especialmente útil para desenvolvedores, cientistas de dados e engenheiros que precisam representar dados de forma clara e concisa em formato circular.
Ele é geralmente usado para resumir e comparar graficamente o desempenho de várias entidades em múltiplas dimensões.
Sintaxe
Copiar
Incorporar
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Exemplo
Copiar
Incorporar
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Detalhes da sintaxe
Título
title: renderizado no topo do gráfico de radar.
Copiar
Incorporar
radar-beta
title Title of the Radar Diagram
...
Eixo
axis: a sintaxe axis é usada para definir os eixos do gráfico de radar.
Cada eixo é representado por um ID e um rótulo opcional.
É possível definir vários eixos em uma linha.
Copiar
Incorporar
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Curva
curve: a sintaxe curve é usada para definir os pontos de dados das curvas no gráfico de radar.
Cada curva é representada por um ID, um rótulo opcional e uma lista de valores.
Os valores podem ser definidos por uma lista de números ou por uma lista de pares chave-valor. Se forem usados pares chave-valor, a chave representa o ID do eixo e o valor representa o ponto de dados.
É possível definir várias curvas em uma linha.
Copiar
Incorporar
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Opções
- showLegend: a sintaxe showLegend é usada para exibir ou ocultar a legenda no gráfico de radar; a legenda é exibida por padrão.
- max: o valor máximo do gráfico de radar, usado para dimensioná-lo. Se não for fornecido, o valor máximo será calculado a partir dos pontos de dados.
- min: o valor mínimo do gráfico de radar, usado para dimensioná-lo. Se não for fornecido, o valor mínimo será 0.
- graticule: a sintaxe graticule é usada para definir o tipo de linhas de latitude/longitude a serem renderizadas no gráfico de radar. As linhas de latitude/longitude podem ser circle ou polygon. Se não for fornecido, o padrão é circle.
- ticks: a sintaxe ticks é usada para definir o número de escalas nas linhas de latitude/longitude. É o número de círculos concêntricos ou polígonos desenhados, usados para indicar a proporção do gráfico de radar. Se não for fornecido, o número padrão de escalas é 5.
Copiar
Incorporar
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Configuração
| Parâmetro | Descrição | Valor padrão |
|---|---|---|
| width | Largura do gráfico de radar | 600 |
| height | Altura do gráfico de radar | 600 |
| marginTop | Margem superior do gráfico de radar | 50 |
| marginBottom | Margem inferior do gráfico de radar | 50 |
| marginLeft | Margem esquerda do gráfico de radar | 50 |
| marginRight | Margem direita do gráfico de radar | 50 |
| axisScaleFactor | Fator de escala do eixo | 1 |
| axisLabelFactor | Fator que ajusta a posição do rótulo do eixo | 1.05 |
| curveTension | Tensão das curvas arredondadas | 0.17 |
Variáveis de tema
Variáveis de tema globais
Os valores padrão dessas variáveis dependem do tema usado. Para sobrescrever os valores padrão, defina os valores desejados na seção themeVariables da configuração: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
O gráfico de radar suporta a escala de cores cScale${i}, em que i é um número de 0 até o número máximo de cores da escala de cores do tema. Normalmente, o número máximo de cores é 12.
| Propriedade | Descrição |
|---|---|
| fontSize | Tamanho da fonte do título |
| titleColor | Cor do título |
| cScale$ | Escala de cores da i-ésima curva |
Opções de estilo do radar
As variáveis específicas do radar ficam dentro da chave radar. Para definir as opções de estilo do radar, use a seguinte sintaxe. config: themeVariables: radar: axisColor: "#FF0000"
| Propriedade | Descrição | Valor padrão |
|---|---|---|
| axisColor | Cor da linha do eixo | black |
| axisStrokeWidth | Largura da linha do eixo | 1 |
| axisLabelFontSize | Tamanho da fonte do rótulo do eixo | 12px |
| curveOpacity | Opacidade da curva | 0.7 |
| curveStrokeWidth | Largura da curva | 2 |
| graticuleColor | Cor das linhas de latitude/longitude | black |
| graticuleOpacity | Opacidade das linhas de latitude/longitude | 0.5 |
| graticuleStrokeWidth | Largura das linhas de latitude/longitude | 1 |
| legendBoxSize | Tamanho da caixa da legenda | 10 |
| legendFontSize | Tamanho da fonte da legenda | 14px |
Exemplo de configuração e tema
Copiar
Incorporar
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
