ReflexKR

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Kursüberblick

Layout

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Typografie

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formulare

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Datenanzeige

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Auf- und Zuklappen

Tabs

Accordion

Segmented Control

Overlays

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Dynamisches Rendern

Cond

Match

Foreach

Auto Scroll

Medien

Image

Audio

Video

Tabellen und Datengrids

Table

Data Table

Data Editor

Diagramme

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Diagrammbausteine

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Andere Diagrammbibliotheken

Plotly

Pyplot

HTML-Elemente

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Weitere Werkzeuge

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

Die Komponentenwerkstatt: Reflex' 100 Bibliotheksbausteine

Diagramme

Radar Chart

rx.recharts.radar_chartrx.recharts.radarrx.recharts.polar_gridrx.recharts.polar_angle_axisrx.recharts.polar_radius_axis

Offizielle Doku

Werkstattauftrag

Leg die Fachnoten zweier Schüler als Spinnennetz übereinander, damit man auf einen Blick sieht, wer in welchem Fach stark ist.

rx.recharts.radar_chart trägt die Werte mehrerer Kategorien auf Achsen ab, die vom Mittelpunkt ausgehen, und verbindet sie zu einem Vieleck. Du nimmst es, wenn du die „Form“ von Objekten anhand von fünf oder sechs gleich skalierten Kategorien vergleichen willst. Gib dem Diagramm data und lege für jede Reihe ein rx.recharts.radar(data_key=…) hinein.

Kreisförmige Diagramme verwenden statt kartesischer Achsen polare Bausteine: polar_grid ist das Spinnennetzraster, polar_angle_axis trägt die Kategorienamen am Rand, polar_radius_axis die Skala vom Mittelpunkt nach außen.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(data_key="Mina", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    width="100%",
    height=300,
)

Props ausprobieren

Ändere die Deckkraft der Füllung (fill_opacity), die Eckpunkte (dot), die Rasterform (grid_type) sowie Innen- und Außenradius des Diagramms. Die Daten sind das radarchart_data von oben.

Props ausprobieren

color

fill_opacity

0.6

dot

grid_type

inner_radius

outer_radius

rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 8),
        fill_opacity=0.6,
        dot=False,
    ),
    rx.recharts.polar_grid(grid_type="polygon"),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    inner_radius="0%",
    outer_radius="80%",
    width="100%",
    height=300,
)

Ein größerer inner_radius lässt die Mitte frei, sodass Unterschiede zwischen kleinen Werten besser sichtbar werden. grid_type="circle" zeichnet das Raster als Kreise.

Prop	Werte	Standard	Verwendung
`radar_chart(data=)`	Liste von Dicts	keiner	Ein Dict pro Kategorie
`radar_chart(cx=, cy=)`	Zahl/Prozent	`"50%"`	Lage des Mittelpunkts
`radar_chart(inner_radius=, outer_radius=)`	Zahl/Prozent	`0` / `"80%"`	Radius des inneren und äußeren Rasters
`radar_chart(start_angle=, end_angle=)`	Zahl (Grad)	`90` / `-270`	Winkel der ersten Achse und Drehrichtung
`radar_chart(margin=)`	Dict	0	Außenabstand
`radar(data_key=)`	String	keiner	Schlüssel des zu zeichnenden Werts
`radar(stroke=, fill=, fill_opacity=)`	Farbe / 0–1	accent 9 / accent 3 / `0.6`	Rand, Füllung, Deckkraft der Füllung
`radar(dot=)`	`True` / `False` / Dict	keiner	Punkte an den Ecken
`radar(legend_type=, label=)`	Legendensymbol / bool	`"rect"`	Legendenform, Wertanzeige
`radar(animation_begin=, animation_duration=, animation_easing=)`	ms / ms / `"ease"` …	`0` / `1500` / `"ease"`	Einblendanimation
`polar_grid(grid_type=)`	`"polygon"` `"circle"`	`"polygon"`	Rasterform
`polar_radius_axis(angle=, domain=)`	Zahl / `[min, max]`		Richtung und Bereich der Skalenachse
Events	`on_click` `on_mouse_enter` `on_mouse_leave`		Diagramm. `radar` hat zusätzlich `on_animation_start` und `on_animation_end`

Mehrere Radare übereinander

Mit zwei radar liegen zwei Vielecke auf demselben Raster. Die später notierte Reihe wird obenauf gezeichnet; senke daher fill_opacity, damit die untere durchscheint. inner_radius und outer_radius des Diagramms bestimmen die Größe der Grafik und den freien Raum in der Mitte.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.6,
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    inner_radius="15%",
    outer_radius="80%",
    width="100%",
    height=300,
)

Punkte, Legende, Animation

dot=True setzt an jede Ecke einen Punkt, legend_type="line" macht das Legendensymbol zur Linie. Mit animation_begin, animation_duration und animation_easing legst du fest, wie sich das Diagramm beim ersten Zeichnen aufbaut. Das Beispiel unten entfaltet sich langsam über vier Sekunden.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        dot=True,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.6,
        legend_type="line",
        animation_begin=0,
        animation_duration=4000,
        animation_easing="ease-in",
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=300,
)

Daten aus dem State

In diesem Beispiel verteilst du 100 Punkte auf fünf Eigenschaften. Bewegst du einen Schieberegler, ändert sich traits im State, und das Diagramm wird sofort neu gezeichnet. Der Handler verhindert, dass du mehr vergibst, als Punkte übrig sind. tick=False und axis_line=False an polar_radius_axis blenden die Skala aus, sodass nur die Form bleibt.

Strength

Speed

Stamina

Wisdom

Charm

Remaining: 25

from typing import Any


class RadarChartTraitState(rx.State):
    budget: int = 100
    traits: list[dict[str, Any]] = [
        {"trait": "Strength", "value": 15},
        {"trait": "Speed", "value": 15},
        {"trait": "Stamina", "value": 15},
        {"trait": "Wisdom", "value": 15},
        {"trait": "Charm", "value": 15},
    ]

    @rx.var
    def remaining(self) -> int:
        return self.budget - sum(t["value"] for t in self.traits)

    @rx.event
    def set_trait(self, trait: str, value: list[float]):
        new = int(value[0])
        rows = []
        for t in self.traits:
            if t["trait"] == trait:
                new = min(new, self.remaining + t["value"])
                t = {**t, "value": new}
            rows.append(t)
        self.traits = rows


rx.flex(
    rx.box(
        rx.recharts.radar_chart(
            rx.recharts.radar(data_key="value", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
            rx.recharts.polar_grid(),
            rx.recharts.polar_angle_axis(data_key="trait"),
            rx.recharts.polar_radius_axis(domain=[0, 100], tick=False, axis_line=False),
            data=RadarChartTraitState.traits,
            width="100%",
            height=260,
        ),
        flex="1 1 240px",
    ),
    rx.vstack(
        rx.foreach(
            RadarChartTraitState.traits,
            lambda t: rx.hstack(
                rx.text(t["trait"], size="2", width="5em"),
                rx.slider(
                    value=[t["value"].to(int)],
                    max=100,
                    on_change=lambda v: RadarChartTraitState.set_trait(t["trait"].to(str), v),
                    width="10em",
                ),
                rx.text(t["value"], size="2"),
                align="center",
            ),
        ),
        rx.text("Remaining: ", RadarChartTraitState.remaining, size="2", weight="bold"),
        flex="1 1 240px",
    ),
    spacing="4",
    wrap="wrap",
    align="center",
    width="100%",
)

Auftrag erledigt

Die Datenschlüssel heißen wie die Schüler ("Mina", "Joon"), und genau diese Namen erscheinen in Legende und Tooltip. radar hat in 0.10 kein name-Prop, daher ist ein gut lesbarer Schlüsselname der einfachste Weg. Beide sind mit fill_opacity=0.4 blass gefüllt, damit auch die Überlappung lesbar bleibt, und Farbe plus Punkte unterscheiden die Reihen.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150], tick=False, axis_line=False),
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=320,
)

Werkstattnotizen

In radar_chart(data=…) kommen radar(data_key=…) sowie polar_grid, polar_angle_axis und polar_radius_axis.
polar_angle_axis(data_key=) liefert die Kategorienamen am Rand, polar_radius_axis(domain=) den Skalenbereich.
Mehrere Reihen sind mehrere radar. Mit niedrigerer fill_opacity bleibt die Überlappung sichtbar.
inner_radius, outer_radius, start_angle und end_angle am Diagramm bestimmen Form und Richtung.
Ein State-Wert in data lässt Eingaben wie Schieberegler das Vieleck sofort verändern.

← Zurück

Diagramme · Pie Chart

Weiter →

Diagramme · Radial Bar Chart

Über neue Lektionen informiert werden

Wir schicken dir eine E-Mail, wenn dieser Kurs neue Lektionen bekommt oder ein Folgekurs erscheint.

Fragen & Antworten

Frag alles zu dieser Lektion. Fragen aus allen Sprachversionen dieser Seite erscheinen hier gemeinsam.

ReflexKR

Python und Reflex zum Anfassen. Alle Beispiele wurden mit Reflex 0.10.0 ausgeführt und geprüft.

ReflexKR ist kostenlos und ohne Werbebanner. Wenn es dir geholfen hat, kannst du es mit einem Kaffee unterstützen. ☕ Spendier uns einen Kaffee

Hinweis zu Affiliate-Links

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex