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

Pie Chart

rx.recharts.pie_chartrx.recharts.pierx.recharts.cell

Offizielle Doku

Werkstattauftrag

Zeig die Browseranteile der Besucher vom letzten Monat als Donut, und an jedem Stück sollen Name und Wert zu sehen sein.

rx.recharts.pie_chart betrachtet das Ganze als 100 und zeigt den Anteil jedes Teils als Kreisstück. Es passt bei höchstens fünf oder sechs Stücken, wenn die Frage „Wie viel vom Ganzen?“ im Mittelpunkt steht. Anders als bei den anderen Diagrammen gehört data nicht in den Diagramm-Container, sondern in rx.recharts.pie. data_key ist die Größe eines Stücks, name_key sein Name.

Steht in einem Dict der Daten ein "fill", bekommt nur dieses Stück diese Farbe; sonst gilt das fill von pie.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Group A", "value": 400},
            {"name": "Group B", "value": 300, "fill": rx.color("teal", 9)},
            {"name": "Group C", "value": 300, "fill": rx.color("orange", 9)},
            {"name": "Group D", "value": 200, "fill": rx.color("plum", 9)},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 9),
        label=True,
    ),
    width="100%",
    height=300,
)

Props ausprobieren

Ist inner_radius größer als 0, bleibt die Mitte frei, und es entsteht ein Donut. Radien gibst du als Zahl (Pixel) oder als Prozent-String an.

Props ausprobieren

inner_radius

outer_radius

color

label

label_line

legend_type

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Chrome", "value": 275},
            {"name": "Safari", "value": 150},
            {"name": "Firefox", "value": 100},
            {"name": "Edge", "value": 130},
        ],
        data_key="value",
        name_key="name",
        inner_radius="0%",
        outer_radius="80%",
        fill=rx.color("indigo", 8),
        stroke=rx.color("gray", 1),
        label=True,
        label_line=True,
        legend_type="rect",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

Mit label erscheint der Wert außerhalb des Stücks, label_line ist die Verbindungslinie zwischen Stück und Wert. legend_type ist die Form des Legendensymbols.

Prop	Werte	Standard	Verwendung
`pie_chart(width=, height=, margin=)`	Zahl/Prozent / Dict	`"100%"`	Größe und Außenabstand des Diagramms. `data` gehört nicht hierher
`pie(data=)`	Liste von Dicts	keiner	Daten der Stücke
`pie(data_key=, name_key=)`	String	keiner / `"name"`	Schlüssel für Größe und Name eines Stücks
`pie(cx=, cy=)`	Zahl/Prozent	`"50%"`	Lage des Mittelpunkts
`pie(inner_radius=, outer_radius=)`	Zahl/Prozent	`0` / `"80%"`	Innen- und Außenradius. Innen größer als 0 ergibt einen Donut
`pie(start_angle=, end_angle=)`	Zahl (Grad)	`0` / `360`	Gezeichneter Winkelbereich. `180` und `0` ergeben einen Halbkreis
`pie(padding_angle=, min_angle=)`	Zahl (Grad)	`0`	Lücke zwischen den Stücken, Mindestwinkel kleiner Stücke
`pie(fill=, stroke=)`	Farbe	accent 3 / accent 9	Stück- und Randfarbe
`pie(label=, label_line=)`	`True` / `False` / Dict	`False`	Wertanzeige und Verbindungslinie
`pie(legend_type=)`	`"rect"` `"circle"` … `"none"`	`"rect"`	Legendensymbol
`pie(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `400` / `1500` / `"ease"`	Einblendanimation
`cell(fill=, stroke=)`	Farbe		Farbe eines einzelnen Stücks innerhalb von `pie`
Events	`on_click` `on_mouse_enter` `on_mouse_leave` …		`pie_chart`, `pie` und `cell` nehmen alle Events an

Zwei Kreise übereinander

Zwei pie werden um denselben Mittelpunkt übereinandergezeichnet. Machst du den inneren Kreis mit outer_radius="50%" klein und lässt beim äußeren Ring mit inner_radius="60%" die Mitte frei, vergleichst du zwei Datensätze in einem Bild. padding_angle lässt zwischen den Stücken eine Lücke von so vielen Grad.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 400},
            {"name": "Q2", "value": 300},
            {"name": "Q3", "value": 300},
            {"name": "Q4", "value": 200},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("teal", 8),
        inner_radius="60%",
        padding_angle=5,
    ),
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 2400},
            {"name": "Q2", "value": 4567},
            {"name": "Q3", "value": 1398},
            {"name": "Q4", "value": 9800},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 8),
        outer_radius="50%",
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Jedes Stück einfärben (cell)

Auch ohne Farben in den Daten kannst du die Farben festlegen, indem du in pie so viele rx.recharts.cell legst, wie es Stücke gibt. Erzeuge die cells mit rx.foreach über die Daten und nimm aus einer Farbliste die Farbe an Position index. Die Reihenfolge der cells ist die Reihenfolge der Stücke. Setzt du stroke auf die Hintergrundfarbe und machst den Rand dick, entstehen Lücken zwischen den Stücken.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create(["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"])[index % 5],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="40%",
        outer_radius="80%",
        padding_angle=2,
        stroke="#fff",
        custom_attrs={"strokeWidth": 2},
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Mit Farbverlauf füllen

Definiere in einem rx.el.svg der Größe 0 einen radial_gradient und verweise im fill jeder cell mit url(#id) darauf. Die Verlaufsdefinition darf außerhalb des Diagramms liegen, solange sie auf derselben Seite steht. Wähle die id so, dass sie auf der Seite nur einmal vorkommt.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.box(
    rx.el.svg(
        rx.el.svg.defs(
            *[
                rx.el.svg.radial_gradient(
                    rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1),
                    rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6),
                    id=f"piechart_grad_{i}",
                    cx="50%",
                    cy="50%",
                    r="50%",
                )
                for i, color in enumerate(["#6366F1", "#8B5CF6", "#EC4899", "#F59E0B"])
            ],
        ),
        width=0,
        height=0,
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            *[rx.recharts.cell(fill=f"url(#piechart_grad_{i})") for i in range(4)],
            data=piechart_data[:4],
            data_key="value",
            name_key="name",
            inner_radius="60%",
            outer_radius="80%",
            padding_angle=5,
            stroke="#fff",
            custom_attrs={"strokeWidth": 2},
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=300,
    ),
    width="100%",
)

Daten aus dem State

Gibst du data von pie einen State-Wert, ändern sich die Stückgrößen mit jeder Änderung der Zahlen. Mit start_angle=180 und end_angle=0 entsteht ein Halbkreisdiagramm, dessen Mittelpunkt nach unten (cy="80%") verschoben ist.

Wood 3

Stone 2

Gold 1

Food 4

from typing import Any


class PieChartStockState(rx.State):
    stock: list[dict[str, Any]] = [
        {"item": "Wood", "count": 3},
        {"item": "Stone", "count": 2},
        {"item": "Gold", "count": 1},
        {"item": "Food", "count": 4},
    ]

    @rx.event
    def change(self, item: str, delta: int):
        self.stock = [
            {**row, "count": max(0, row["count"] + delta)} if row["item"] == item else row
            for row in self.stock
        ]


rx.vstack(
    rx.recharts.pie_chart(
        rx.recharts.pie(
            data=PieChartStockState.stock,
            data_key="count",
            name_key="item",
            cx="50%",
            cy="80%",
            start_angle=180,
            end_angle=0,
            fill=rx.color("accent", 8),
            label=True,
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=240,
    ),
    rx.flex(
        rx.foreach(
            PieChartStockState.stock,
            lambda row: rx.hstack(
                rx.button("-", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), -1)),
                rx.text(row["item"], " ", row["count"], size="2"),
                rx.button("+", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), 1)),
                align="center",
            ),
        ),
        spacing="4",
        wrap="wrap",
    ),
    align="center",
    width="100%",
)

Beim Überfahren mit der Maus (Hover-Events)

Übergib dem on_mouse_enter jeder cell den index ihres Stücks und lösche ihn in on_mouse_leave wieder. Wert und Name des gewählten Stücks erscheinen als Text, der über die Mitte des Donuts gelegt ist. Mit pointer_events="none" an der Textbox kommt die Maus weiterhin bis zu den Stücken durch.

Hover a slice

class PieChartHoverState(rx.State):
    languages: list[dict[str, str | int]] = [
        {"name": "Python", "value": 35},
        {"name": "JavaScript", "value": 25},
        {"name": "Java", "value": 20},
        {"name": "C++", "value": 15},
        {"name": "Ruby", "value": 5},
    ]
    hovered_name: str = ""
    hovered_value: int = 0

    @rx.event
    def enter(self, index: int):
        self.hovered_name = str(self.languages[index]["name"])
        self.hovered_value = int(self.languages[index]["value"])

    @rx.event
    def leave(self):
        self.hovered_name, self.hovered_value = "", 0


rx.box(
    rx.vstack(
        rx.cond(
            PieChartHoverState.hovered_name != "",
            rx.fragment(
                rx.heading(PieChartHoverState.hovered_value, "%", size="7"),
                rx.text(PieChartHoverState.hovered_name, size="2"),
            ),
            rx.text("Hover a slice", size="2", color_scheme="gray"),
        ),
        align="center",
        spacing="1",
        position="absolute",
        top="50%",
        left="50%",
        transform="translate(-50%, -50%)",
        pointer_events="none",
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            rx.foreach(
                PieChartHoverState.languages,
                lambda item, index: rx.recharts.cell(
                    fill=rx.Var.create(["#2B79D1", "#2469B3", "#1E5AA1", "#3D8EE1", "#61A9E4"])[index % 5],
                    on_mouse_enter=PieChartHoverState.enter(index),
                    on_mouse_leave=PieChartHoverState.leave,
                ),
            ),
            data=PieChartHoverState.languages,
            data_key="value",
            name_key="name",
            inner_radius=90,
            stroke="0",
        ),
        width="100%",
        height=300,
    ),
    position="relative",
    width="100%",
)

Auftrag erledigt

Fünf Browser als Donut, jedes Stück per cell in einer festen Farbreihenfolge eingefärbt. Das letzte Stück „Other“ tritt in Grau zurück. Die Werte liest man über label, die Namen über Legende und Tooltip.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create([
                    rx.color("indigo", 9), rx.color("teal", 9), rx.color("orange", 9),
                    rx.color("plum", 9), rx.color("gray", 8),
                ])[index],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="55%",
        outer_radius="80%",
        padding_angle=2,
        stroke=rx.color("gray", 1),
        label=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

Werkstattnotizen

data gehört an pie, nicht an pie_chart. data_key ist die Größe, name_key der Name.
inner_radius > 0 ergibt einen Donut, start_angle und end_angle einen Halbkreis.
Stückfarben kommen aus dem Datenschlüssel "fill" oder aus rx.recharts.cell, per foreach in pie gelegt.
Zwei pie liegen um denselben Mittelpunkt. outer_radius und inner_radius teilen den Platz auf.
Mit on_mouse_enter(index) an cell landet das gewählte Stück im State.

← Zurück

Diagramme · Composed Chart

Weiter →

Diagramme · Radar 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