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

Scatter Chart

rx.recharts.scatter_chartrx.recharts.scatterrx.recharts.z_axis

Offizielle Doku

Werkstattauftrag

Trag Größe und Gewicht der Spieler zweier Teams als Punkte ein und zeig das Alter über die Punktgröße, damit man die Statur der Teams vergleichen kann.

rx.recharts.scatter_chart ist ein Streudiagramm: Es setzt einen Punkt dorthin, wo sich x- und y-Wert treffen. Du nimmst es, um den Zusammenhang zweier Zahlen zu zeigen (Sind größere Menschen auch schwerer?) oder um Ausreißer abseits der Masse zu finden. Anders als bei den übrigen kartesischen Diagrammen bekommt jede Reihe (rx.recharts.scatter) ihr eigenes data, und über das data_key der Achsen legst du fest, welcher Wert x und welcher y ist.

Die x-Achse ist standardmäßig eine Kategorienachse; für Zahlen brauchst du unbedingt type_="number". Die Beispiele verwenden die beiden folgenden Datensätze.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    width="100%",
    height=280,
)

Props ausprobieren

Ändere die Punktform (shape), das Legendensymbol (legend_type), die Verbindungslinie (line) und deren Art (line_type). line_type="fitting" zeichnet eine Regressionsgerade durch die Punkte.

Props ausprobieren

color

shape

legend_type

line

line_type

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        data=scatterchart_a,
        name="A",
        fill=rx.color("indigo", 9),
        shape="circle",
        legend_type="circle",
        line=False,
        line_type="joint",
    ),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    width="100%",
    height=280,
)

line_type ist nur bei eingeschaltetem line zu sehen. joint verbindet die Punkte der Reihe nach, fitting zieht eine einzige Trendgerade.

Prop	Werte	Standard	Verwendung
`scatter_chart(width=, height=, margin=)`	Zahl/Prozent / Dict	`"100%"` / je 5	Größe und Außenabstand. `data` gehört nicht hierher
`scatter(data=)`	Liste von Dicts	keiner	Die Punkte dieser Reihe
`scatter(name=)`	String	keiner	Name in Legende und Tooltip
`scatter(fill=)`	Farbe	accent 9	Punktfarbe
`scatter(shape=)`	`"circle"` `"square"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	`"circle"`	Punktform
`scatter(legend_type=)`	Die Formen oben, `"line"` `"rect"` `"none"` …	`"circle"`	Legendensymbol
`scatter(line=, line_type=)`	`True` / `False`, `"joint"` `"fitting"`	`False` / `"joint"`	Linie durch die Punkte
`scatter(x_axis_id=, y_axis_id=, z_axis_id=)`	String/Zahl	`0`	An welche Achse die Reihe gebunden ist
`scatter(is_animation_active=, animation_duration=, …)`			Einblendanimation
`z_axis(data_key=, range=, name=, unit=)`	Schlüssel, `[min, max]` in Pixeln	`[60, 400]`	Dritter Wert als Punktgröße
Events	`on_click` `on_mouse_enter` `on_mouse_leave` …		Diagramm und `scatter` nehmen beide Events an

Mehrere Gruppen übereinander

Lege für jede Reihe ein eigenes scatter an und gib jedem data, name und eine Farbe. In der Legende erscheint name. Mit z_axis taucht der dritte Wert der Daten (z) zusätzlich im Tooltip auf und bestimmt die Punktgröße. Das Verteilen auf mehrere Achsen per x_axis_id und y_axis_id behandelt die Seite „Area Chart“.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Gruppen an der Form unterscheiden

Trennst du Gruppen nur über die Farbe, sehen sie für Menschen, die Farben schwer unterscheiden, womöglich gleich aus. Bekommt jede Reihe zusätzlich eine eigene shape, bleiben sie auch in Schwarzweiß unterscheidbar. Das Legendensymbol übernimmt diese Form.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
    rx.recharts.scatter(
        data=[
            {"x": 130, "y": 150},
            {"x": 160, "y": 180},
            {"x": 220, "y": 170},
            {"x": 250, "y": 200},
            {"x": 175, "y": 130},
        ],
        fill=rx.color("amber", 9),
        name="C",
        shape="star",
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Blasendiagramm (z_axis)

z_axis(data_key="z", range=[60, 400]) zeichnet den Punkt mit dem kleinsten z in Größe (Fläche) 60 und den mit dem größten in 400. Zeigt man zusätzlich zu x und y einen dritten Wert als Punktgröße, hat man ein Blasendiagramm. Das name der Achse ist der Name, der im Tooltip erscheint.

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Daten aus dem State

Hier wird die Folge der Collatz-Vermutung als Punkte eingetragen: Gerade Zahlen werden halbiert, ungerade mit 3 multipliziert und um 1 erhöht, bis man bei 1 ankommt. Gibst du eine Zahl ein und schickst sie ab, berechnet der Handler die Folge neu, legt sie in data, und das Diagramm wird neu gezeichnet. Der Startwert ist 15.

Start: 15

def scatterchart_collatz(n: int) -> list[dict[str, int]]:
    rows = []
    for step in range(400):
        rows.append({"x": step, "y": n})
        if n == 1:
            break
        n = n // 2 if n % 2 == 0 else 3 * n + 1
    return rows


class ScatterChartCollatzState(rx.State):
    start: int = 15
    data: list[dict[str, int]] = scatterchart_collatz(15)

    @rx.event
    def compute(self, form_data: dict):
        try:
            n = int(form_data.get("start") or 1)
        except ValueError:
            n = 1
        self.start = min(max(n, 1), 1_000_000)
        self.data = scatterchart_collatz(self.start)


rx.vstack(
    rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=260,
    ),
    rx.form.root(
        rx.hstack(
            rx.input(placeholder="Enter a number", name="start", type="number"),
            rx.button("Compute", type="submit"),
        ),
        on_submit=ScatterChartCollatzState.compute,
        reset_on_submit=True,
    ),
    width="100%",
)

Auftrag erledigt

Größe ist x, Gewicht ist y, das Alter steckt als Punktgröße in z_axis. Die beiden Teams unterscheiden sich in Farbe und Form, und unit und name an den Achsen sorgen dafür, dass der Tooltip etwa „height: 170cm“ zeigt. Die x-Achse zeigt per domain nur 150 bis 190, damit sich die Punkte weit verteilen.

rx.recharts.scatter_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.scatter(
        data=[
            {"height": 160, "weight": 52, "age": 21},
            {"height": 165, "weight": 58, "age": 34},
            {"height": 170, "weight": 63, "age": 28},
            {"height": 158, "weight": 49, "age": 45},
            {"height": 175, "weight": 70, "age": 39},
        ],
        name="Team A",
        fill=rx.color("accent", 9),
    ),
    rx.recharts.scatter(
        data=[
            {"height": 172, "weight": 66, "age": 25},
            {"height": 180, "weight": 78, "age": 31},
            {"height": 168, "weight": 61, "age": 52},
            {"height": 185, "weight": 82, "age": 27},
            {"height": 177, "weight": 74, "age": 44},
        ],
        name="Team B",
        fill=rx.color("teal", 9),
        shape="triangle",
    ),
    rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
    rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
    rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

Werkstattnotizen

data bekommt jedes scatter, nicht das Diagramm. x und y wählst du über das data_key der Achsen.
Eine numerische x-Achse braucht unbedingt x_axis(type_="number").
Pro Gruppe ein scatter. name für die Legende, shape für die Punktform (zusammen mit Farbe noch besser unterscheidbar).
z_axis(data_key=, range=[min, max]) zeigt einen dritten Wert als Punktgröße: ein Blasendiagramm.
line=True mit line_type="fitting" zieht eine Trendlinie.

← Zurück

Diagramme · Radial Bar Chart

Weiter →

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