Radar

Netzdiagramm, um mehrere Kennzahlen eines Datensatzes auf einer zweidimensionalen Canvas zu vergleichen.

Nimm es, wenn du ein Netz- oder Spinnendiagramm brauchst, um mehrere Kennzahlen eines Datensatzes zu vergleichen. Gib <r-radar> über das Attribut abilitys ein JSON-Array aus Achsennamen und Werten.

Die Daten kommen als JSON-Zeichenkette (ein Array von Objekten) über das Attribut abilitys. Da HTML-Attribute nur Zeichenketten halten können, muss der Wert gültiges JSON sein; intern wird er mit JSON.parse gelesen. Der Host <r-radar> hat keine eigene Größe — gib ihm also eine ausdrückliche Breite und Höhe.

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"Leben","scoreRate":"10"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Du kannst die Daten auch imperativ über die JS-Eigenschaft abilitys setzen; sie nimmt ein Array (das als Zeichenkette zurück ans Attribut geschrieben wird) oder eine JSON-Zeichenkette:

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

API-Referenz

Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
`abilitys`	`string` / `Array`	`''`	Diagrammdaten als JSON-Zeichenkette (oder Array über die JS-Eigenschaft)
`colorPolygon`	`string`	`var(--ran-radar-polygon-color)` / `#e6e6e6`	Farbe der konzentrischen Gitterpolygone
`colorLine`	`string`	`var(--ran-radar-line-color)` / `#e6e6e6`	Farbe der Achsenlinien und der Außenkante
`fillColor`	`string`	`rgba(255,121,35,0.60)`	Füllfarbe der Datenfläche
`strokeColor`	`string`	`rgba(255,121,35,0.60)`	Farbe der Umrisslinie und der Eckpunkte
`sheet`	`string`	`''`	CSS, das in das Shadow DOM der Komponente injiziert wird

Jeder Eintrag des abilitys-Arrays nimmt diese Schlüssel an:

Schlüssel	Typ	Pflicht	Beschreibung
`abilityName`	`string`	Ja	Beschriftung der Achse
`scoreRate`	`number`	Ja	Wert auf dieser Achse; das Gitter endet bei `100`
`backgroundColor`	`string`	Nein	Hintergrundfarbe der Beschriftung (standardmäßig transparent)
`fontSize`	`number`	Nein	Schriftgröße der Beschriftung (standardmäßig ans Diagramm skaliert)
`fontColor`	`string`	Nein	Textfarbe der Beschriftung (standardmäßig `--ran-color-text`)
`fontFamily`	`string`	Nein	Schriftfamilie der Beschriftung (standardmäßig `SimHei`)

Hinweis: colorPolygon, colorLine, fillColor und strokeColor werden ohne Rücksicht auf Groß- und Kleinschreibung gelesen, sie zeichnen also richtig, ob das Attribut von Anfang an da ist oder erst nach dem Mounten geändert wird; jede Änderung zeichnet das Diagramm neu. Für themebewusstes Styling nimm lieber die CSS-Variablen weiter unten.

Diagrammdaten `abilitys`

Das Aussehen einzelner Beschriftungen (backgroundColor, fontSize, fontColor) lässt sich pro Eintrag setzen:

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"Leben","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Gitterfarbe `colorPolygon`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorPolygon="green"
  abilitys='[{"abilityName":"Leben","scoreRate":"10"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Achsenfarbe `colorLine`

<r-radar
  style="width:300px;height:300px;display:block;"
  colorLine="blue"
  abilitys='[{"abilityName":"Leben","scoreRate":"10"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Füllfarbe der Fläche `fillColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  fillColor="red"
  abilitys='[{"abilityName":"Leben","scoreRate":"10"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Umrissfarbe der Fläche `strokeColor`

<r-radar
  style="width:300px;height:300px;display:block;"
  strokeColor="blue"
  abilitys='[{"abilityName":"Leben","scoreRate":"10"},{"abilityName":"Angriff","scoreRate":"90"},{"abilityName":"Verteidigung","scoreRate":"20"},{"abilityName":"Elementarkunde","scoreRate":"50"},{"abilityName":"Krit-Chance","scoreRate":"80"},{"abilityName":"Krit-Schaden","scoreRate":"50"}]'
></r-radar>

Vollständige Beispieldaten

Weil ein HTML-attribute nur eine string tragen kann, müssen die übergebenen Daten eine json-Zeichenkette sein, die mit JSON.parse zurück in ein Array von Objekten gelesen wird; fehlerhaftes JSON lässt sich nicht lesen:

[
  {
    "abilityName": "Leben",
    "scoreRate": "10",
    "backgroundColor": "red",
    "fontSize": "30",
    "fontColor": "blue"
  },
  {
    "abilityName": "Angriff",
    "scoreRate": "90"
  },
  {
    "abilityName": "Verteidigung",
    "scoreRate": "20"
  },
  {
    "abilityName": "Elementarkunde",
    "scoreRate": "50"
  },
  {
    "abilityName": "Krit-Chance",
    "scoreRate": "80"
  },
  {
    "abilityName": "Krit-Schaden",
    "scoreRate": "50"
  }
]

CSS-Variablen

Die Diagrammfarben lassen sich auch (themereaktiv) über CSS-Custom-Properties am Host setzen:

Variable	Standard	Beschreibung
`--ran-radar-polygon-color`	`var(--ran-color-border)` / `#e6e6e6`	Farbe der Gitterpolygone
`--ran-radar-line-color`	`var(--ran-color-border)` / `#e6e6e6`	Farbe der Achsenlinien
`--ran-radar-fill-color`	`rgba(255,121,35,0.60)`	Füllfarbe der Datenfläche
`--ran-radar-stroke-color`	`rgba(255,121,35,0.60)`	Umrissfarbe der Datenfläche
`--ran-radar-width`	`100%`	Breite des Canvas-Containers
`--ran-radar-height`	`100%`	Höhe des Canvas-Containers
`--ran-radar-display`	`block`	`display` des Canvas-Containers
`--ran-radar-position`	`relative`	`position` des Canvas-Containers

Die Textfarbe der Beschriftungen greift ebenfalls auf das Theme-Token --ran-color-text zurück, damit sie im hellen wie im dunklen Modus lesbar bleiben.

Events

Keine. <r-radar> löst keine eigenen Events aus.

Bewährte Praxis

Größe: Der Host hat keine eigene Größe; setze immer eine ausdrückliche width/height (über style oder die Variablen --ran-radar-width/--ran-radar-height). Bei Größenänderungen des Containers zeichnet sich das Diagramm über einen ResizeObserver selbst neu.
Datenformat: Übergib gültiges JSON in abilitys; fehlerhaftes JSON wird protokolliert und kann nicht gelesen werden. Arbeite im Skript mit echten Arrays über die JS-Eigenschaft abilitys.
Skala: scoreRate misst gegen ein festes Maximum von 100; normalisiere deine Werte auf diesen Bereich.
Theming: Die Farbattribute (colorPolygon, colorLine, fillColor, strokeColor) sind reaktiv und zeichnen das Diagramm neu, wenn du sie nach dem Mounten änderst. Sollen die Farben dem hellen bzw. dunklen Theme von selbst folgen, nimm die CSS-Variablen --ran-radar-*.