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

Diagrammbausteine

Brush

rx.recharts.brush

Offizielle Doku

Werkstattauftrag

Bitte 30 Tage Bestellungen in ein Diagramm packen, anfangs aber nur die letzte Woche groß zeigen, und mit Griffen soll man den Abschnitt verschieben können.

rx.recharts.brush ist eine Leiste zur Bereichsauswahl unter dem Diagramm. Ziehst du an den Griffen auf beiden Seiten und wählst den gewünschten Datenbereich, zeichnet das Diagramm darüber nur diesen Bereich groß. Du nimmst es, wenn es zu viele Datenpunkte für einen Bildschirm gibt. Es kommt als Kind in Linien-, Balken-, Flächen- und kombinierte Diagramme.

import math

brush_data = [
    {"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
    for i in range(1, 41)
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=300,
)

Die Werte aus data_key erscheinen als Text neben den Griffen. Ziehst du den grauen Abschnitt in der Mitte, bleibt die Länge des Bereichs gleich, nur seine Lage verschiebt sich.

Props ausprobieren

Ab dem nächsten Beispiel wird das oben angelegte brush_data weiterverwendet.

Props ausprobieren

data_key

stroke

fill

rx.recharts.line_chart(
    rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=280,
)

stroke ist die Farbe von Rahmen und Griffen, fill die Hintergrundfarbe. Änderst du data_key, ändert sich der Text neben den Griffen.

Prop	Werte	Standard	Verwendung
`data_key`	Spaltenname	-	Wert, der neben den Griffen erscheint
`start_index` · `end_index`	Datenindex	`0` · letzter	Anfangs gewählter Bereich
`height`	Zahl	`40`	Höhe der Leiste
`traveller_width`	Zahl	`5`	Breite der Griffe (traveller)
`gap`	Zahl	`1`	Nach wie vielen Schritten das Diagramm neu gezeichnet wird
`stroke` · `fill`	Farbe	`rx.color("gray", 9)` · `rx.color("gray", 2)`	Farbe von Rahmen und Griffen, Hintergrundfarbe
`x` · `y` · `width`	Zahl	automatisch	Lage und Breite der Leiste. Berechnet meist das Diagramm
`data`	Liste	data des Diagramms	Ursprungsdaten für den Brush
`on_change`	Event	-	Wenn sich der Bereich ändert (in 0.10 ohne Argumente)

Anfangsbereich und Griffgröße

start_index und end_index sind der anfangs gewählte Bereich. Es sind Indizes der Daten (ab 0), unten sind also der 4. bis 11. Punkt zu sehen. traveller_width ist die Breite der Griffe; je breiter, desto leichter zu greifen.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(
        data_key="name",
        traveller_width=15,
        start_index=3,
        end_index=10,
        stroke=rx.color("mauve", 10),
        fill=rx.color("mauve", 3),
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=200,
)

gap ist das Intervall, in dem das Diagramm darüber neu gezeichnet wird. Bei gap=5 wird es nur alle fünf Schritte des Griffs aktualisiert, bei sehr vielen Punkten also seltener neu gezeichnet.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=240,
)

Wenn sich der Bereich ändert: on_change

on_change feuert bei jeder Bewegung eines Griffs. In Reflex 0.10 übergibt dieses Event den neuen Bereich nicht (auch in der Tabelle der offiziellen Doku fehlt die Beschreibung), du erfährst also nur, dass sich etwas bewegt hat. Damit beim Ziehen keine Flut von Events entsteht, hat der Handler ein debounce.

Brush moved 0 times

brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]


class BrushMoveState(rx.State):
    moves: int = 0

    @rx.event(debounce=300)
    def moved(self):
        self.moves += 1


rx.vstack(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
        rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
        rx.recharts.x_axis(data_key="day"),
        data=brush_days,
        width="100%",
        height=240,
    ),
    rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
    width="100%",
)

Auftrag erledigt

Alle 30 Tage kommen hinein, und mit start_index=23 und end_index=29 ist zuerst nur die letzte Woche zu sehen. Verwendet wird das obige brush_days.

rx.recharts.composed_chart(
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
    rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.brush(
        data_key="day",
        start_index=23,
        end_index=29,
        height=28,
        traveller_width=10,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 2),
    ),
    data=brush_days,
    width="100%",
    height=300,
)

Werkstattnotizen

brush als Kind in ein Linien-, Balken- oder Flächendiagramm setzen, dann erscheint darunter eine Leiste zur Bereichsauswahl.
data_key ist der Text neben den Griffen, start_index und end_index der Anfangsbereich (Indizes).
Größe mit height und traveller_width, Farbe mit stroke und fill, Neuzeichnen-Intervall mit gap.
on_change übergibt in 0.10 keinen Bereich. Du erfährst nur, ob sich etwas bewegt hat.

← Zurück

Diagrammbausteine · Reference

Weiter →

Andere Diagrammbibliotheken · Plotly

Ü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