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

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

Offizielle Doku

Werkstattauftrag

Zeig als Trichter, wie viele Leute von Besuch über Anmeldung und Testphase bis zur Zahlung in jeder Stufe übrig bleiben.

rx.recharts.funnel_chart zeigt als Trichter, wie stark ein Wert über aufeinanderfolgende Stufen schrumpft. Du nimmst es, um Abbrüche in jeder Stufe sichtbar zu machen, etwa bei Registrierung oder Kaufprozess. data gehört an rx.recharts.funnel, und ein "fill" in jedem Dict legt die Farbe der Stufe fest.

Die Stufennamen bringst du an, indem du rx.recharts.label_list in funnel legst. Mit data_key wählst du, welcher Wert als Text erscheint, mit position, wo er steht.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

Props ausprobieren

Ändere Position und Inhalt der Labels, die Randfarbe der Stufen und die Animation. Die Daten sind das funnelchart_data von oben.

Props ausprobieren

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside" setzt den Text mittig in die Stufe. Ohne is_animation_active erscheint der Trichter sofort fertig gezeichnet.

Prop	Werte	Standard	Verwendung
`funnel_chart(width=, height=, margin=)`	Zahl/Prozent / Dict	`"100%"` / je 5	Größe und Außenabstand
`funnel_chart(layout=, stroke=)`	String / Farbe	`"centric"`	Anordnung der Stufen, Randfarbe
`funnel(data=)`	Liste von Dicts	keiner	Daten der Stufen. Farbe über den Schlüssel `"fill"`
`funnel(data_key=, name_key=)`	String	keiner / `"name"`	Schlüssel für Wert und Name einer Stufe
`funnel(stroke=)`	Farbe	gray 3	Rand der Stufen
`funnel(legend_type=)`	Legendensymbol	`"line"`	Legendenform
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	Einblendanimation
`label_list(data_key=, position=)`	Schlüssel / `"right"` `"inside"` …		Text an jeder Stufe
`label_list(fill=, stroke=, offset=)`	Farbe / Zahl	gray 10 / `"none"` / `5`	Textfarbe, Kontur, Abstand
Events	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		Diagramm und `funnel`. `funnel` hat zusätzlich `on_animation_start` und `on_animation_end`

Events

funnel_chart nimmt Klick- und Maus-Events an. Fahr im Diagramm unten mit der Maus darüber, klick hinein und verlass es wieder: Zu jedem Event erscheint eine Meldung (Toast). An Events kannst du State-Handler ebenso hängen wie eingebaute Aktionen wie rx.toast.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

Daten aus dem State

data von funnel ist an einen State-Wert gebunden, und on_click von funnel setzt neue Werte. Bei jedem Klick auf den Trichter bleibt die erste Stufe bei 100, und jede weitere Stufe bekommt einen um 0 bis 20 kleineren Wert.

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

Animation anpassen

animation_begin verzögert den Start des Zeichnens, animation_duration ist die Dauer des Zeichnens (in Millisekunden). Mit animation_easing wählst du, wie beschleunigt und abgebremst wird. Mit legend erscheinen die Stufennamen als Legende.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

Auftrag erledigt

Zwei label_list beschriften den Trichter: rechts die Stufennamen, innen die Personenzahlen. Die Farben sind Abstufungen eines einzigen Tons und werden nach unten hin heller, und ein breiterer rechter margin verhindert, dass Namen abgeschnitten werden.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

Werkstattnotizen

In funnel_chart kommt funnel(data=…, data_key=…). Die Stufenfarbe ist "fill" in den Daten.
Stufennamen über label_list(data_key=, position=) in funnel. Auch mehrere sind möglich.
funnel_chart nimmt on_click, on_mouse_enter und on_mouse_leave an.
on_click von funnel plus State-data zeichnet den Trichter neu.
animation_begin, animation_duration und animation_easing bestimmen, wie gezeichnet wird.

← Zurück

Diagramme · Scatter Chart

Weiter →

Diagramme · Treemap

Ü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