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

Treemap

rx.recharts.treemap

Offizielle Doku

Werkstattauftrag

Zeig in einem einzigen Bild, das über Flächen vergleicht, wie viel Handyspeicher Fotos, Videos und Apps belegen.

rx.recharts.treemap betrachtet das Ganze als ein Rechteck und füllt es mit kleineren Rechtecken, deren Fläche proportional zum Wert jedes Eintrags ist. Du nimmst es, wenn es so viele Einträge gibt, dass die Stücke eines Kreisdiagramms zu klein würden, oder um hierarchische Daten mit Unterkategorien in Kategorien zu zeigen.

Anders als bei den anderen Diagrammen zeichnest du ohne Kind-Bausteine, nur mit treemap. data_key ist der Wert, der zur Fläche wird, name_key der Name im Rechteck, und "fill" in den Daten wird zur Farbe des Rechtecks.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Props ausprobieren

Dieselben Daten enthalten zwei Größenwerte (size, visits). Wechselst du data_key, ändert sich die Grundlage der Flächen, und die Anordnung der Rechtecke wird neu berechnet. Probier dabei auch die Animationsarten aus.

Props ausprobieren

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

Bei jedem Wechsel von data_key wird mit neuer Anordnung gezeichnet. Ohne is_animation_active geschieht der Wechsel sofort.

Prop	Werte	Standard	Verwendung
`data`	Liste von Dicts	keiner	Die Einträge. Untereinträge über `"children"`, Farbe über `"fill"`
`data_key`	String	`"value"`	Schlüssel des Werts, der zur Fläche wird
`name_key`	String	`"name"`	Schlüssel des Namens im Rechteck
`aspect_ratio`	Zahl	automatisch	Seitenverhältnis (Breite:Höhe), das die Rechtecke anstreben
`width`, `height`	Zahl/Prozent	`"100%"`	Größe. Die Höhe als Zahl
`is_animation_active`	`True` / `False`	`True`	Animation einschalten
`animation_begin`, `animation_duration`	Millisekunden	`0` / `1500`	Startverzögerung, Dauer
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	Geschwindigkeitsverlauf
`on_animation_start`, `on_animation_end`	Event		Start und Ende der Animation
`on_click` `on_mouse_enter` `on_mouse_leave` …	Event		Maus-Events

Seitenverhältnis (aspect_ratio)

aspect_ratio ist das Verhältnis von Breite zu Höhe, dem sich jedes Rechteck annähern soll. Mit 1 wird möglichst quadratisch aufgeteilt, mit 4 in breite, flache Rechtecke. Je quadratischer, desto leichter vergleicht das Auge die Flächen, und desto besser passen die Namen hinein. In 0.10 sind nur ganze Zahlen erlaubt.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Hierarchische Daten (children)

Bekommt ein Eintrag eine "children"-Liste, wird er in sich noch einmal aufgeteilt. Die Fläche des Elternteils ist die Summe der Kinderwerte, und Kinder desselben Elternteils liegen in einem Block beisammen. Unten stecken in drei Lebensmittelkategorien jeweils einzelne Artikel. Jede Kategorie ist in Abstufungen derselben Farbe eingefärbt, damit die Blöcke erkennbar sind.

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

Animations-Events

on_animation_start und on_animation_end werden aufgerufen, wenn die Zeichenanimation beginnt und endet. Der Text unten lautet während der Animation „Drawing...“, wechselt nach 2,5 Sekunden am Ende auf „Done“, und die Zahl in Klammern steigt um eins.

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

Auftrag erledigt

Die fünf Speicherposten sind als Flächen gezeichnet, und der kleinste, „Other“, tritt in Grau zurück. aspect_ratio=2 erzeugt leicht breite Rechtecke, die zu einem breiten Bildschirm passen, und die Animation ist kurz gehalten.

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

Werkstattnotizen

Ein einziges treemap(data=…, data_key=…, name_key=…) genügt. Kind-Bausteine braucht es nicht.
Die Rechteckfarbe ist "fill" in den Daten, Unterkategorien sind eine "children"-Liste.
aspect_ratio (ganzzahlig) bestimmt die Rechteckform. Je näher an 1, desto leichter der Vergleich.
Animation über is_animation_active, animation_duration und animation_easing, am Ende feuert on_animation_end.
Bei nur wenigen Einträgen lesen sich Kreis- oder Balkendiagramm leichter.

← Zurück

Diagramme · Funnel Chart

Weiter →

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