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

Reference

rx.recharts.reference_linerx.recharts.reference_dotrx.recharts.reference_area

Offizielle Doku

Werkstattauftrag

Bitte im Diagramm der Monatsumsätze eine Ziellinie bei 5000 ziehen, den Zeitraum der Rabattaktion farbig hinterlegen und den besten Monat mit einem Punkt markieren.

Referenzbausteine legen unabhängig von den Daten Markierungen der Art „Schau hierhin“ über das Diagramm. reference_line zeichnet eine waagerechte oder senkrechte Linie bei einem Wert, reference_area ein gefärbtes Rechteck über einen Abschnitt und reference_dot einen Punkt an einer Koordinate. Du nimmst sie für Markierungen, die beim Deuten helfen: Zielwerte, Durchschnitte, Ausreißer, Aktionszeiträume.

reference_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="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Props ausprobieren

Hier änderst du das Aussehen der Referenzlinie. Ab dem nächsten Beispiel wird das oben angelegte reference_data weiterverwendet.

Props ausprobieren

label

stroke

stroke_width

stroke_dasharray

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 5)),
    rx.recharts.reference_line(
        y=4343,
        label="Average",
        stroke=rx.color("green", 10),
        stroke_width=1,
        stroke_dasharray="",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=280,
)

label setzt Text auf die Linie, stroke_dasharray macht sie gestrichelt.

Prop	Werte	Gilt für	Verwendung
`x` · `y`	Zahl oder Kategorienwert	line · dot	Stelle für Linie oder Punkt. Bei Kategorienachsen der Kategoriename
`x1` `x2` `y1` `y2`	Zahl oder Kategorienwert	area	Grenzen des Rechtecks. Ohne x-Werte die ganze x-Richtung, ohne y-Werte die ganze y-Richtung
`segment`	`[{"x", "y"}, {"x", "y"}]`	line	Schräge Linie zwischen zwei Endpunkten
`r`	Zahl	dot	Radius des Punkts
`label`	Zeichenkette, Zahl	line · dot	Text anhängen. Für mehr Gestaltung `rx.recharts.label` als Kind
`stroke` · `fill` · `fill_opacity`	Farbe · Farbe · `0` bis `1`	alle	Linienfarbe, Füllfarbe, Deckkraft der Füllung
`stroke_width` · `stroke_dasharray`	Zahl · `"4 4"`	line	Linienstärke (Standard `1`), Strichmuster
`if_overflow`	`"discard"` `"hidden"` `"visible"` `"extendDomain"`	alle	Verhalten außerhalb des Achsenbereichs (Standard `"discard"`)
`x_axis_id` · `y_axis_id`	Achsen-id	alle	Bezugsachse, wenn es mehrere Achsen gibt
`on_click` usw.	Event	dot	Beim Klicken auf oder Überfahren des Punkts (ohne Argumente)

Reference Area: Abschnitte einfärben

reference_area zeichnet ein Rechteck von x1 bis x2 und von y1 bis y2. Bei Zahlenachsen nimmst du Zahlen, bei Kategorienachsen Kategorienamen. Erst mit niedrigem fill_opacity scheinen die Daten darunter durch.

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill="#8884d8", name="A"),
    rx.recharts.reference_area(x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Reference Line: Linien ziehen

Mit y entsteht bei diesem Wert eine waagerechte Linie, mit x eine senkrechte. Ist die x-Achse eine Kategorienachse, schreibst du den Kategorienamen, etwa x="Page C". Gibst du segment zwei Endpunkte, zeichnest du auch schräge Linien (orange gestrichelt).

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE"),
    rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.reference_line(
        segment=[{"x": "Page A", "y": 2400}, {"x": "Page G", "y": 4300}],
        stroke=rx.color("orange", 9),
        stroke_dasharray="6 3",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Reference Dot: Punkte setzen

reference_dot setzt an die Koordinaten x, y einen Punkt mit dem Radius r. Damit umkreist du auffällige Datenpunkte oder markierst Bezugspunkte, die nicht in den Daten stehen. Unten wird das vorige reference_points verwendet.

rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill=rx.color("accent", 9), name="A"),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.reference_dot(x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10)),
    rx.recharts.reference_dot(x=170, y=300, r=20, fill=rx.color("accent", 7)),
    rx.recharts.reference_dot(x=90, y=220, r=18, fill=rx.color("green", 7)),
    width="100%",
    height=240,
)

Außerhalb des Achsenbereichs: if_overflow

Ist der größte Datenwert 4000 und du ziehst die Referenzlinie bei 6000, zeichnet der Standard "discard" die Linie gar nicht (links). "extendDomain" vergrößert den Achsenbereich, damit die Linie sichtbar wird (rechts). "hidden" schneidet ab, was außerhalb liegt, und "visible" zeichnet auch darüber hinaus.

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="discard", stroke=rx.color("red", 9)),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="extendDomain", stroke=rx.color("red", 9), if_overflow="extendDomain"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Referenzen über den State verschieben

Auch Positionswerte wie y lassen sich mit dem State verbinden. Änderst du das Ziel mit dem Schieberegler, wandert die Linie mit, und die Zahl der Monate über dem Ziel ändert sich ebenfalls.

Goal

5000

3 months reached

reference_sales = [
    {"month": "Jan", "sales": 3200}, {"month": "Feb", "sales": 4100}, {"month": "Mar", "sales": 5600},
    {"month": "Apr", "sales": 4700}, {"month": "May", "sales": 6300}, {"month": "Jun", "sales": 5900},
]


class ReferenceGoalState(rx.State):
    goal: int = 5000

    @rx.event
    def set_goal(self, value: list[float]):
        self.goal = int(value[0])

    @rx.var
    def hits(self) -> int:
        return sum(1 for row in reference_sales if row["sales"] >= self.goal)


rx.vstack(
    rx.hstack(
        rx.text("Goal", size="2"),
        rx.slider(value=[ReferenceGoalState.goal], min=2000, max=7000, step=100, on_change=ReferenceGoalState.set_goal, width="200px"),
        rx.badge(ReferenceGoalState.goal),
        rx.text(ReferenceGoalState.hits, " months reached", size="2"),
        align="center",
        wrap="wrap",
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="sales", fill=rx.color("accent", 8)),
        rx.recharts.reference_line(y=ReferenceGoalState.goal, stroke=rx.color("red", 9), stroke_dasharray="4 4"),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(domain=[0, 7000]),
        data=reference_sales,
        width="100%",
        height=260,
    ),
    width="100%",
)

Punkte anklicken

reference_dot hat Maus-Events wie on_click. Weil das Event selbst keinen Wert übergibt, gibst du dem Handler wie unten direkt ein Argument mit, das sagt, welcher Punkt es war.

Click a marked dot

reference_click_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
]


class ReferenceDotState(rx.State):
    picked: str = "Click a marked dot"

    @rx.event
    def pick(self, name: str):
        self.picked = name


rx.vstack(
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=reference_click_points, fill=rx.color("gray", 8)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.reference_dot(x=150, y=400, r=14, fill=rx.color("red", 7), on_click=ReferenceDotState.pick("Highest")),
        rx.recharts.reference_dot(x=45, y=100, r=14, fill=rx.color("blue", 7), on_click=ReferenceDotState.pick("Lowest")),
        width="100%",
        height=220,
    ),
    rx.text(ReferenceDotState.picked, size="2", weight="bold"),
    width="100%",
)

Auftrag erledigt

Der Aktionszeitraum ist ein reference_area, das Ziel eine reference_line, der beste Monat ein reference_dot. Den Bereich setzt du vor die Reihe, damit er hinter der Linie liegt. Verwendet wird das obige reference_sales.

rx.recharts.line_chart(
    rx.recharts.reference_area(
        rx.recharts.label(value="Sale week", position="insideTop"),
        x1="Mar",
        x2="Apr",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.line(data_key="sales", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopLeft"),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_dot(x="May", y=6300, r=8, fill=rx.color("green", 9), stroke="white"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=reference_sales,
    width="100%",
    height=280,
)

Werkstattnotizen

reference_line zieht eine Linie bei einem x- oder y-Wert, mit segment auch schräg.
reference_area ist ein Rechteck aus x1, x2, y1 und y2. Mit niedrigem fill_opacity scheinen die Daten durch.
reference_dot ist ein Punkt bei x, y mit Radius r. Bei on_click unterscheidest du über ein direkt übergebenes Argument.
Außerhalb des Achsenbereichs wird standardmäßig nichts gezeichnet. if_overflow="extendDomain" vergrößert die Achse.
Text mit label="…" oder rx.recharts.label als Kind. Die Zeichenreihenfolge ist zugleich die Stapelreihenfolge.

← Zurück

Diagrammbausteine · Label

Weiter →

Diagrammbausteine · Brush

Ü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