Radar

Gráfico de radar para comparar várias métricas de um mesmo conjunto de dados num canvas bidimensional.

Use quando precisar de um gráfico de radar para comparar várias métricas de um conjunto de dados. Passe ao <r-radar> um array JSON de nomes de eixo e pontuações pelo atributo abilitys.

Os dados vêm pelo atributo abilitys como uma string JSON (um array de objetos). Como atributos HTML só podem guardar strings, o valor precisa ser JSON válido; ele é analisado internamente com JSON.parse. O host <r-radar> não tem tamanho próprio, então dê a ele largura e altura explícitas.

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"Vida","scoreRate":"10"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Você também pode definir os dados de forma imperativa pela propriedade JS abilitys, que aceita um array (convertido de volta em string no atributo) ou uma string JSON:

const radar = document.createElement('r-radar');
radar.abilitys = [
  { abilityName: 'Vida', scoreRate: 10 },
  { abilityName: 'Ataque', scoreRate: 90 },
  { abilityName: 'Defesa', scoreRate: 20 },
];
chart.append(radar);

Referência da API

Propriedades

Propriedade	Tipo	Padrão	Descrição
`abilitys`	`string` / `Array`	`''`	Dados do gráfico como string JSON (ou array pela propriedade JS)
`colorPolygon`	`string`	`var(--ran-radar-polygon-color)` / `#e6e6e6`	Cor dos polígonos concêntricos da grade
`colorLine`	`string`	`var(--ran-radar-line-color)` / `#e6e6e6`	Cor dos eixos e da borda externa
`fillColor`	`string`	`rgba(255,121,35,0.60)`	Cor de preenchimento da região de dados
`strokeColor`	`string`	`rgba(255,121,35,0.60)`	Cor do contorno da região e dos pontos de vértice
`sheet`	`string`	`''`	CSS injetado no shadow DOM do componente

Cada entrada do array abilitys aceita estas chaves:

Chave	Tipo	Obrigatória	Descrição
`abilityName`	`string`	Sim	Texto do rótulo do eixo
`scoreRate`	`number`	Sim	Valor naquele eixo; a grade vai no máximo até `100`
`backgroundColor`	`string`	Não	Cor de fundo do rótulo (padrão transparente)
`fontSize`	`number`	Não	Tamanho da fonte do rótulo (padrão escalado ao gráfico)
`fontColor`	`string`	Não	Cor do texto do rótulo (padrão `--ran-color-text`)
`fontFamily`	`string`	Não	Família tipográfica do rótulo (padrão `SimHei`)

Nota: colorPolygon, colorLine, fillColor e strokeColor são lidos sem diferenciar maiúsculas, então desenham certo tanto se o atributo já estiver lá quanto se mudar depois da montagem; atualizar qualquer um deles redesenha o gráfico. Para um estilo que siga o tema, prefira as variáveis CSS mais abaixo.

Dados do gráfico `abilitys`

O estilo do rótulo por eixo (backgroundColor, fontSize, fontColor) pode ser definido em entradas específicas:

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"Vida","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Cor da grade `colorPolygon`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorPolygon="green"
  abilitys='[{"abilityName":"Vida","scoreRate":"10"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Cor dos eixos `colorLine`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorLine="blue"
  abilitys='[{"abilityName":"Vida","scoreRate":"10"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Preenchimento da região `fillColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  fillColor="red"
  abilitys='[{"abilityName":"Vida","scoreRate":"10"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Contorno da região `strokeColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  strokeColor="blue"
  abilitys='[{"abilityName":"Vida","scoreRate":"10"},{"abilityName":"Ataque","scoreRate":"90"},{"abilityName":"Defesa","scoreRate":"20"},{"abilityName":"Maestria elemental","scoreRate":"50"},{"abilityName":"Chance de crítico","scoreRate":"80"},{"abilityName":"Dano crítico","scoreRate":"50"}]'
></r-radar>

Dados de exemplo completos

Como um attribute de HTML só consegue carregar uma string, os dados que você passa precisam ser uma string json, convertida de volta num array de objetos com JSON.parse; um JSON malformado não pode ser analisado:

[
  {
    "abilityName": "Vida",
    "scoreRate": "10",
    "backgroundColor": "red",
    "fontSize": "30",
    "fontColor": "blue"
  },
  {
    "abilityName": "Ataque",
    "scoreRate": "90"
  },
  {
    "abilityName": "Defesa",
    "scoreRate": "20"
  },
  {
    "abilityName": "Maestria elemental",
    "scoreRate": "50"
  },
  {
    "abilityName": "Chance de crítico",
    "scoreRate": "80"
  },
  {
    "abilityName": "Dano crítico",
    "scoreRate": "50"
  }
]

Variáveis CSS

As cores do gráfico também podem ser definidas (de forma reativa ao tema) por propriedades personalizadas de CSS no host:

Variável	Padrão	Descrição
`--ran-radar-polygon-color`	`var(--ran-color-border)` / `#e6e6e6`	Cor da grade
`--ran-radar-line-color`	`var(--ran-color-border)` / `#e6e6e6`	Cor dos eixos
`--ran-radar-fill-color`	`rgba(255,121,35,0.60)`	Preenchimento da região de dados
`--ran-radar-stroke-color`	`rgba(255,121,35,0.60)`	Contorno da região de dados
`--ran-radar-width`	`100%`	Largura do contêiner do canvas
`--ran-radar-height`	`100%`	Altura do contêiner do canvas
`--ran-radar-display`	`block`	`display` do contêiner do canvas
`--ran-radar-position`	`relative`	`position` do contêiner do canvas

A cor do texto dos rótulos também recorre ao token de tema --ran-color-text, então os rótulos continuam legíveis nos modos claro e escuro.

Eventos

Nenhum. O <r-radar> não despacha eventos personalizados.

Boas práticas

Dimensionamento: o host não tem tamanho próprio; sempre defina width/height explícitos (pelo style ou pelas variáveis --ran-radar-width/--ran-radar-height). O gráfico se redesenha sozinho quando o contêiner muda de tamanho, via ResizeObserver.
Formato dos dados: passe JSON válido em abilitys; JSON malformado é registrado e não pode ser analisado. Use a propriedade JS abilitys quando trabalhar com arrays de verdade no código.
Escala: scoreRate é medido contra um máximo fixo de 100; normalize seus valores para essa faixa.
Temas: os atributos de cor (colorPolygon, colorLine, fillColor, strokeColor) são reativos e redesenham o gráfico quando mudam após a montagem. Prefira as variáveis CSS --ran-radar-* quando quiser que as cores sigam sozinhas o tema claro ou escuro.