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

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

Offizielle Doku

Werkstattauftrag

Bitte im Diagramm der monatlichen Besuche die Achsen mit „Monat“ und „Besuche“ beschriften und den Umsatz getrennt auf einer rechten Achse zeigen.

Achsen sind die Bausteine, die den Maßstab eines Diagramms festlegen. Setzt du rx.recharts.x_axis und rx.recharts.y_axis als Kinder in ein Diagramm, entstehen waagerechte und senkrechte Skalen; mit data_key wählst du, welche Spalte die Skala bestimmt. Die dritte Achse, die im Streudiagramm die Punktgröße festlegt, ist rx.recharts.z_axis.

axis_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Übergibst du an label ein dict, erscheint neben der Achse eine Beschriftung: value ist der Text, position die Lage, angle der Drehwinkel. Weil die Beschriftung aus dem Diagramm herausragt, schaffst du mit dem margin des Diagramms Platz dafür.

Props ausprobieren

Hier änderst du Ausrichtung der Achsen und Anzeige der Skalen. Ab dem nächsten Beispiel wird das oben angelegte axis_data weiterverwendet.

Props ausprobieren

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation verlegt die Achse auf die Gegenseite, mirror setzt die Skalenbeschriftung ins Diagramm hinein. reversed dreht die Reihenfolge der Skala um.

Prop	Werte	Standard	Verwendung
`data_key`	Spaltenname	-	Datenspalte für die Skala
`type_`	`"number"` `"category"` `"auto"`	x: category, y: number	Zahlenachse oder Kategorienachse
`domain`	`[min, max]`	`[0, "auto"]`	Bereich einer Zahlenachse. Auch `"auto"`, `"dataMin"` und `"dataMax"` sind möglich
`allow_data_overflow`	`True` / `False`	`False`	Ob Daten außerhalb von `domain` abgeschnitten werden
`orientation`	x: `"bottom"` `"top"`, y: `"left"` `"right"`	`"bottom"` / `"left"`	Seite, auf der die Achse liegt
`x_axis_id` / `y_axis_id`	Zeichenkette oder Zahl	`0`	Name, über den Reihen bei mehreren Achsen zugeordnet werden
`label`	Zeichenkette, Zahl, dict	-	Achsenbeschriftung. Im dict: `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`, Zahl	`"preserveEnd"`	Wie überlappende Skalenbeschriftungen ausgedünnt werden. Bei `0` erscheinen alle
`tick_count`	Zahl	`5`	Anzahl der Skalenstriche einer Zahlenachse
`ticks`	Liste	-	Skalenwerte direkt festlegen
`tick_formatter`	JS-Funktionsausdruck als Zeichenkette	-	Form der Skalenbeschriftung ändern
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	Skalenbeschriftung, Skalenstriche, Achsenlinie anzeigen
`tick_size` · `min_tick_gap`	Zahl	`6` · `5`	Länge der Skalenstriche, Mindestabstand zwischen Beschriftungen
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	Beschriftung nach innen, Reihenfolge umdrehen, Achse verbergen
`unit` · `name`	Zeichenkette	-	Einheit und Name, die im Tooltip mit erscheinen
`stroke`	Farbe	`rx.color("gray", 9)`	Farbe von Achsenlinie und Skala
`angle` · `padding` (x-Achse)	Zahl · dict	`0` · `{"left": 0, "right": 0}`	Drehung der Beschriftung, Rand an beiden Enden
`on_click` usw.	Event	-	Beim Klicken auf oder Überfahren der Skala (ohne Argumente)

Mehrere Achsen

Zwei Reihen mit unterschiedlichen Einheiten bekommen je eine eigene Achse. Gibst du der Achse ein y_axis_id und der Reihe dasselbe y_axis_id, gehören sie zusammen. Die zweite Achse legst du mit orientation="right" nach rechts.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

Die Skala verfeinern

axis_line=False und tick_line=False entfernen Achsenlinie und Skalenstriche, übrig bleibt nur die Beschriftung. tick_size vergrößert den Abstand zwischen Achse und Beschriftung, und interval="preserveStartEnd" behält Anfang und Ende, auch wenn überlappende Beschriftungen wegfallen. Eine Schriftgröße, für die es keine Prop gibt, reichst du mit custom_attrs unverändert an Recharts weiter.

tick_formatter ist ein JavaScript-Funktionsausdruck, der die Skalenbeschriftung umformt. Unten wird 4000 als 4k angezeigt. Der Wert geht nur als Zeichenkette; State-Werte kannst du nicht übergeben.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        data_key="name",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

Lage der Achsenbeschriftung

position im label-dict nimmt 14 Werte an, und mit offset schiebst du die Beschriftung von dort ein Stück weiter weg oder näher heran. Auch die Werte im dict lassen sich über State-Werte ändern.

Props ausprobieren

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Werte, die mit inside beginnen, setzen die Beschriftung innerhalb der Achse, top, bottom, left und right außerhalb.

Bereich einer Zahlenachse

domain legt Minimum und Maximum einer Zahlenachse fest. Standardmäßig dehnt sich die Achse von selbst aus, wenn Daten über den Bereich hinausgehen (links). Mit allow_data_overflow=True bleibt der Bereich bestehen, und was übersteht, wird abgeschnitten (rechts, Page C mit 9800).

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis: Punktgröße

Im Streudiagramm wird rx.recharts.z_axis nicht gezeichnet, sondern bestimmt die Größe der Punkte. Je kleiner der Wert in data_key, desto näher am Anfang von range (kleine Fläche), je größer, desto näher am Ende (große Fläche). Im Tooltip erscheinen name und unit mit.

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Auftrag erledigt

Die Besuche werden zu Balken an der linken Achse, der Umsatz zu einer Linie an der rechten. Beide Achsen bekommen eine Beschriftung, und die Legende rückt nach oben, damit sie sich nicht mit den Achsenbeschriftungen überschneidet.

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

Werkstattnotizen

x_axis und y_axis als Kinder ins Diagramm setzen; data_key wählt die Spalte für die Skala.
label als dict: value, position, offset, angle. Mit dem margin des Diagramms Platz schaffen.
Bei zwei Achsen ordnet y_axis_id die Reihen zu; die zweite Achse bekommt orientation="right".
domain legt den Bereich fest; mit allow_data_overflow=True wird Überstehendes abgeschnitten.
tick_formatter ist eine JS-Funktion als Zeichenkette; z_axis steuert die Punktgröße im Streudiagramm (range).

← Zurück

Diagramme · Error Bar

Weiter →

Diagrammbausteine · Cartesian Grid

Ü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