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

Cartesian Grid

rx.recharts.cartesian_grid

Offizielle Doku

Werkstattauftrag

Damit man die Balkenhöhen leichter ablesen kann, bitte hinter das Diagramm nur dezente waagerechte Linien legen.

rx.recharts.cartesian_grid zeichnet waagerechte und senkrechte Gitterlinien hinter das Diagramm. So lässt sich mit dem Auge leichter verfolgen, auf welcher Höhe der Skala ein Wert liegt. Du setzt es als Kind in Diagramme mit x- und y-Achse, etwa Linien-, Balken-, Flächen- und Streudiagramme.

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray entspricht stroke-dasharray in SVG: Zahlen, durch Kommas oder Leerzeichen getrennt, wiederholen „Strichlänge, Lückenlänge“. "5,5" sind 5 Pixel Strich und 5 Pixel Lücke, "10,5,5,5" wiederholt langen Strich, Lücke, kurzen Strich, Lücke. Leer gelassen ist die Linie durchgezogen.

Props ausprobieren

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

Props ausprobieren

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

Mit horizontal und vertical schaltest du waagerechte und senkrechte Linien getrennt ein und aus. fill und fill_opacity färben den Hintergrund der Gitterfelder.

Prop	Werte	Standard	Verwendung
`horizontal`	`True` / `False`	`True`	Waagerechte Linien anzeigen
`vertical`	`True` / `False`	`True`	Senkrechte Linien anzeigen
`stroke_dasharray`	`"4 4"`, `"5,5"` …	durchgezogen	Strichmuster
`stroke`	Farbe	`rx.color("gray", 7)`	Linienfarbe
`fill` · `fill_opacity`	Farbe · `0` bis `1`	keiner	Hintergrund der Gitterfelder und dessen Deckkraft
`horizontal_points` · `vertical_points`	Liste von Pixelpositionen	`[]`	Positionen der Linien direkt festlegen
`x` · `y` · `width` · `height`	Zahl	`0`	Lage und Größe des Gitters. Berechnet das Diagramm meist selbst

Nur eine Richtung behalten

Schaltest du mit vertical=False die senkrechten Linien aus, bleiben nur die waagerechten. Um die Höhe von Balken oder Flächen abzulesen, genügen waagerechte Linien, und die Anzeige wirkt gleich leichter.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

Dezent im Hintergrund

Senkst du mit class_name die Deckkraft der Gitterlinien, werden sie zu Hilfslinien, die sich nicht vor die Daten drängen. Diese Website nutzt Tailwind, deshalb wirken Klassen wie "opacity-25" direkt.

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"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

Linienpositionen selbst festlegen

horizontal_points und vertical_points nehmen die Positionen der Linien als Liste an. Bei waagerechten Linien ist es der Pixelabstand vom oberen Rand des Diagramms, bei senkrechten der vom linken Rand.

Achtung: Das sind keine Skalenwerte der Achse, sondern Pixelpositionen auf dem Bildschirm. Ändert sich die Größe des Diagramms, bleiben die Linien an denselben Pixelpositionen. Setze das sparsam ein, um einen bestimmten Bereich hervorzuheben.

cgrid_points = [
    {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 170, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280},
    {"x": 200, "y": 150}, {"x": 130, "y": 350}, {"x": 90, "y": 220},
    {"x": 180, "y": 320}, {"x": 140, "y": 230}, {"x": 160, "y": 180},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

Auftrag erledigt

Das Balkendiagramm bekommt keine senkrechten Linien, nur dezente gestrichelte waagerechte. Auch Achsenlinie und Skalenstriche fallen weg, sodass das Gitter die Rolle der Skala übernimmt.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

Werkstattnotizen

cartesian_grid kommt als Kind in Diagramme mit x- und y-Achse.
Gestrichelte Linien entstehen durch wiederholte Strich- und Lückenlängen wie stroke_dasharray="4 4".
Mit horizontal und vertical bleibt nur eine Richtung. Für Balken- und Flächendiagramme reichen waagerechte Linien.
Dezent gesetzt, etwa mit class_name="opacity-25", stehen die Daten im Vordergrund.
horizontal_points und vertical_points sind Pixelpositionen, keine Skalenwerte.

← Zurück

Diagrammbausteine · Axis

Weiter →

Diagrammbausteine · Chart Tooltip

Ü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