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

Line Chart

rx.recharts.line_chartrx.recharts.line

Offizielle Doku

Werkstattauftrag

Zeichne den wöchentlichen Besucherverlauf der Filialen Seoul und Busan als zwei Linien, damit man sieht, wie unterschiedlich sie sich entwickeln.

rx.recharts.line_chart verbindet Punkte zu Linien und zeigt so Veränderungen über die Zeit. Es passt, wenn Anstieg, Abfall und Trend wichtiger sind als die absolute Größe. Du gibst dem Diagramm-Container data und legst für jede Reihe ein rx.recharts.line(data_key=…) hinein.

Die folgenden Beispiele verwenden dieses linechart_data. Auch ohne Farbangabe wird in der accent-Farbe des Themes gezeichnet.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul"),
    rx.recharts.line(data_key="busan"),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    data=linechart_data,
    width="100%",
    height=250,
)

Props ausprobieren

Das Aussehen der Linie bestimmst du größtenteils an line. In den Daten ist der Mittwochswert None; schaltest du connect_nulls ein und aus, siehst du, wie die Lücke geschlossen wird oder offen bleibt.

Props ausprobieren

curve

color

stroke_width

dash

dot

connect_nulls

hide

rx.recharts.line_chart(
    rx.recharts.line(
        data_key="sales",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        stroke_width=2,
        stroke_dasharray="",
        dot=True,
        connect_nulls=False,
        hide=False,
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "sales": 12},
        {"day": "Tue", "sales": 18},
        {"day": "Wed", "sales": None},
        {"day": "Thu", "sales": 15},
        {"day": "Fri", "sales": 24},
        {"day": "Sat", "sales": 20},
    ],
    width="100%",
    height=250,
)

stroke_dasharray ist ein String aus "Strichlänge Lückenlänge" in Pixeln. hide blendet nur die Linie aus, die Achsen bleiben stehen.

Prop	Werte	Standard	Verwendung
`line_chart(data=)`	Liste von Dicts	keiner	Daten für das ganze Diagramm
`line_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	Verlauf waagerecht oder senkrecht
`line_chart(margin=, sync_id=)`	Dict / String	keiner	Außenabstand, mit anderen Diagrammen koppeln
`line(data_key=)`	String	keiner	Schlüssel des zu zeichnenden Werts
`line(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	keiner (gerade)	Wie die Punkte verbunden werden
`line(stroke=, stroke_width=)`	Farbe / Zahl	accent 9 / `1`	Linienfarbe und -stärke
`line(stroke_dasharray=)`	String wie `"5 5"`	keiner	Gestrichelte Linie
`line(dot=, active_dot=)`	`True` / `False` / Dict	accent-Punkt	Datenpunkte, Punkt beim Überfahren mit der Maus
`line(connect_nulls=)`	`True` / `False`	`False`	Leere Werte überspringen und durchgehend zeichnen
`line(hide=)`	`True` / `False`	`False`	Blendet die Linie aus
`line(name=, unit=, legend_type=)`	String		Name in Tooltip und Legende, Einheit, Legendensymbol
`line(x_axis_id=, y_axis_id=)`	String/Zahl	`0`	An welche Achse die Linie gebunden ist
`on_click` `on_mouse_enter` …	Event		Diagramm und Linie nehmen beide Events an. `line` hat zusätzlich `on_animation_start` und `on_animation_end`

Raster, Tooltip und Legende

Diagrammbausteine, die du als Kinder hineinlegst, erscheinen sofort. cartesian_grid ist das Hintergrundraster, graphing_tooltip zeigt den Wert unter dem Mauszeiger, legend beschriftet die Reihen. Mit type_="monotone" an jeder Linie werden aus Knicken weiche Kurven.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", type_="monotone", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", type_="monotone", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=280,
)

Achsentitel

Ein rx.recharts.label als Kind einer Achse wird zu deren Titel. Den Titel der y-Achse stellst du mit custom_attrs={"angle": 270} hochkant. Damit der Titel Platz hat, gib der x-Achse eine großzügige height und dem Diagramm genug margin. Die möglichen Positionen des Labels findest du auf der Seite „Label“ unter den Diagrammbausteinen.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(
        data_key="seoul",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        type_="natural",
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Week", position="center"),
        data_key="week",
        height=60,
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Visits", position="left", custom_attrs={"angle": 270}),
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=linechart_data,
    margin={"left": 20, "right": 20, "top": 20},
    width="100%",
    height=300,
)

Hochkant drehen (layout)

Mit layout="vertical" verläuft die Linie von oben nach unten. Mach die x-Achse zur Zahlenachse (type_="number") und die y-Achse zur Kategorienachse (type_="category"), und gib margin in alle vier Richtungen, damit keine Beschriftung abgeschnitten wird.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="week", type_="category"),
    data=linechart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=300,
)

Daten aus dem State

data und type_ sind hier an State-Werte gebunden. Ein Klick auf den Button lässt die Werte etwas schwanken, und mit den beiden Auswahlboxen änderst du die Form jeder Linie einzeln. Jeder Browser-Tab hat seinen eigenen State, die Bildschirme anderer Leute bleiben also unberührt. Zwei Achsen per y_axis_id und das Koppeln von Diagrammen per sync_id behandelt die Seite „Area Chart“.

import random
from typing import Any


class LineChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"week": "W1", "seoul": 4000, "busan": 2400},
        {"week": "W2", "seoul": 3000, "busan": 1398},
        {"week": "W3", "seoul": 2000, "busan": 5800},
        {"week": "W4", "seoul": 2780, "busan": 3908},
        {"week": "W5", "seoul": 1890, "busan": 4800},
    ]
    seoul_type: str = "monotone"
    busan_type: str = "monotone"

    @rx.event
    def set_seoul_type(self, value: str):
        self.seoul_type = value

    @rx.event
    def set_busan_type(self, value: str):
        self.busan_type = value

    @rx.event
    def munge(self):
        self.data = [
            {**row, "seoul": row["seoul"] + random.randint(-500, 500), "busan": row["busan"] + random.randint(-1000, 1000)}
            for row in self.data
        ]


rx.vstack(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="seoul", type_=LineChartLiveState.seoul_type, stroke=rx.color("accent", 9)),
        rx.recharts.line(data_key="busan", type_=LineChartLiveState.busan_type, stroke=rx.color("teal", 9)),
        rx.recharts.x_axis(data_key="week"),
        rx.recharts.y_axis(),
        data=LineChartLiveState.data,
        margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
        width="100%",
        height=280,
    ),
    rx.hstack(
        rx.button("Munge data", on_click=LineChartLiveState.munge),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.seoul_type,
            on_change=LineChartLiveState.set_seoul_type,
        ),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.busan_type,
            on_change=LineChartLiveState.set_busan_type,
        ),
        wrap="wrap",
    ),
    width="100%",
)

Auftrag erledigt

Die Linien der beiden Filialen unterscheiden sich in Farbe und Strichart (durchgezogen, gestrichelt) zugleich. Wer nicht allein auf Farbe setzt, macht das Diagramm auch im Schwarzweißdruck und für Menschen mit Farbsehschwäche lesbar.

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.line(data_key="seoul", name="Seoul", type_="monotone", stroke=rx.color("accent", 9), stroke_width=2),
    rx.recharts.line(
        data_key="busan",
        name="Busan",
        type_="monotone",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
    ),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=300,
)

Werkstattnotizen

In line_chart(data=…) kommt pro Reihe ein line(data_key=…).
type_ bestimmt die Verbindung (monotone, linear, step …), stroke, stroke_width und stroke_dasharray die Linienform.
dot für Punkte, connect_nulls zum Überbrücken leerer Werte, hide zum Ausblenden.
Achsentitel: rx.recharts.label in die Achse legen, Platz schaffen margin und die height der Achse.
State-Werte in data und type_ lassen Buttons und Auswahlboxen das Diagramm verändern.

← Zurück

Diagramme · Bar Chart

Weiter →

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