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

Error Bar

rx.recharts.error_bar

Offizielle Doku

Werkstattauftrag

Zeichne zu den Balken mit den Durchschnittsnoten jeder Klasse Fehlerbalken, die zeigen, wie weit die Noten streuen.

rx.recharts.error_bar ist ein Baustein, der an einen Wert eine Spanne „so groß ist die Unsicherheit“ als Antennenlinie anzeichnet. Du nimmst ihn, um Unsicherheit mitzuzeigen, etwa bei Messwerten, Mittelwert und Standardabweichung oder Prognosebereichen. Er steht nie allein, sondern kommt als Kind in die Reihe, die den Fehler bekommen soll (scatter, line, bar).

data_key ist der Schlüssel, unter dem die Fehlergröße in den Daten steht. Im Streudiagramm legst du mit direction="y" einen senkrechten und mit direction="x" einen waagerechten Fehler fest; beide lassen sich auch kombinieren.

errorbar_data = [
    {"x": 45, "y": 100, "errorY": [30, 20], "errorX": 5},
    {"x": 100, "y": 200, "errorY": [20, 30], "errorX": 3},
    {"x": 120, "y": 100, "errorY": 20, "errorX": [5, 3]},
    {"x": 170, "y": 300, "errorY": [15, 18], "errorX": 4},
    {"x": 140, "y": 250, "errorY": 23, "errorX": [6, 7]},
    {"x": 150, "y": 400, "errorY": [21, 10], "errorX": 4},
    {"x": 110, "y": 280, "errorY": 21, "errorX": [5, 6]},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(data_key="errorY", direction="y", width=4, stroke_width=2, stroke=rx.color("red", 9)),
        rx.recharts.error_bar(data_key="errorX", direction="x", width=4, stroke_width=2),
        data=errorbar_data,
        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"),
    width="100%",
    height=300,
)

Props ausprobieren

Ändere Richtung, Farbe und Linienstärke der Fehlerbalken. Diese Daten verwenden einen einzigen Fehlerwert (err) für beide Richtungen.

Props ausprobieren

direction

color

stroke_width

1.5

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(
            data_key="err",
            direction="y",
            stroke=rx.color("red", 9),
            stroke_width=1.5,
        ),
        data=[
            {"x": 10, "y": 30, "err": 4},
            {"x": 20, "y": 45, "err": [6, 2]},
            {"x": 30, "y": 38, "err": 3},
            {"x": 40, "y": 60, "err": [2, 8]},
            {"x": 50, "y": 52, "err": 5},
        ],
        fill=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="x", type_="number", domain=[0, 60]),
    rx.recharts.y_axis(data_key="y", type_="number", domain=[0, 80]),
    width="100%",
    height=280,
)

direction lässt sich nur im Streudiagramm wählen. In Balken- und Liniendiagrammen wird entlang der Wertachse gezeichnet.

Prop	Werte	Standard	Verwendung
`data_key`	String	keiner	Schlüssel der Fehlergröße. Der Wert ist eine Zahl oder `[unten, oben]`
`direction`	`"x"` `"y"`	keiner	Richtung des Fehlers im Streudiagramm
`width`	Zahl	`5`	Länge des Querstrichs am Antennenende (Pixel)
`stroke`	Farbe	gray 8	Linienfarbe
`stroke_width`	Zahl	`1.5`	Linienstärke

error_bar kommt in scatter, line oder bar. In 0.10 lässt es sich nicht in area verwenden.

Symmetrische und asymmetrische Fehler

Ist der Fehlerwert eine einzelne Zahl (20), wird über und unter (bzw. links und rechts von) dem Wert gleich weit gezeichnet. Bei zwei Werten wie [30, 20] ist der erste die Länge nach unten (links), der zweite die nach oben (rechts). Das errorbar_data im obersten Beispiel mischt beide Varianten: Der erste Punkt reicht 30 nach unten und 20 nach oben, der dritte je 20 nach oben und unten.

Fehlerbalken im Liniendiagramm

Legst du error_bar in line, bekommt jeder Punkt der Linie einen senkrechten Fehlerbalken. So zeigst du zu Werten wie der monatlichen Durchschnittstemperatur gleich mit, wie stark sie schwanken können.

rx.recharts.line_chart(
    rx.recharts.line(
        rx.recharts.error_bar(
            data_key="error",
            direction="y",
            width=4,
            stroke_width=2,
            stroke=rx.color("accent", 9),
        ),
        data_key="temp",
        stroke=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=[
        {"month": "Jan", "temp": 7, "error": [2, 3]},
        {"month": "Feb", "temp": 9, "error": 2},
        {"month": "Mar", "temp": 12, "error": [3, 2]},
        {"month": "Apr", "temp": 16, "error": 3},
        {"month": "May", "temp": 20, "error": [2, 4]},
        {"month": "Jun", "temp": 24, "error": 3},
    ],
    width="100%",
    height=280,
)

Auftrag erledigt

Die Durchschnittsnoten der Klassen stehen als Balken, und ein error_bar in bar zeigt die Streuung der Noten. Class B und Class D haben asymmetrische Fehler mit unterschiedlicher Länge nach unten und oben. Die Antennen sind in einem dunkleren Grau als die Balken gezeichnet, damit sie auch über der Balkenfarbe sichtbar bleiben.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(
        rx.recharts.error_bar(data_key="spread", width=6, stroke_width=1.5, stroke=rx.color("gray", 12)),
        data_key="score",
        name="Average score",
        fill=rx.color("accent", 8),
        radius=[4, 4, 0, 0],
        max_bar_size=40,
    ),
    rx.recharts.x_axis(data_key="group"),
    rx.recharts.y_axis(domain=[0, 100]),
    rx.recharts.graphing_tooltip(),
    data=[
        {"group": "Class A", "score": 72, "spread": 8},
        {"group": "Class B", "score": 65, "spread": [12, 6]},
        {"group": "Class C", "score": 81, "spread": 5},
        {"group": "Class D", "score": 58, "spread": [9, 14]},
    ],
    width="100%",
    height=300,
)

Werkstattnotizen

error_bar kommt als Kind in scatter, line oder bar.
Ist der data_key-Wert eine einzelne Zahl, ist der Fehler symmetrisch, bei [unten, oben] asymmetrisch.
Im Streudiagramm bestimmt direction="x"/"y" die Richtung, und beide lassen sich kombinieren.
width ist die Länge des Antennenendes, stroke und stroke_width sind Farbe und Stärke der Linie.

← Zurück

Diagramme · Sankey Chart

Weiter →

Diagrammbausteine · Axis

Ü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