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

Composed Chart

rx.recharts.composed_chart

Offizielle Doku

Werkstattauftrag

Leg die monatlichen Bestellungen als Balken und das Ziel als gestrichelte Linie in ein Diagramm, damit die Monate über dem Ziel sofort auffallen.

rx.recharts.composed_chart ist ein Container, in dem du Flächen (area), Balken (bar) und Linien (line) in einem Diagramm mischst. Du nimmst es, wenn eine einzige Diagrammart nicht alles sagt, etwa Istwerte als Balken und Ziel oder Durchschnitt als Linie. Die Kinder werden in der Reihenfolge gezeichnet, in der sie stehen; spätere Reihen liegen also über früheren.

Die Beispiele verwenden das folgende composedchart_data.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

Props ausprobieren

Das Verbunddiagramm hat sowohl die Abstands-Props des Balkendiagramms als auch base_value aus dem Flächendiagramm. base_value ist der Boden, an dem die Fläche beginnt. Mit "dataMin" beginnt sie beim kleinsten Datenwert, und die Fläche hebt sich nach oben ab.

Props ausprobieren

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_value wirkt nur auf area, bar_category_gap nur auf bar. Die Props eines Containers verteilen sich auf die jeweilige Reihenart.

Prop	Werte	Standard	Verwendung
`data`	Liste von Dicts	keiner	Gemeinsame Daten aller Reihen
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Verlaufsrichtung
`base_value`	Zahl, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	Bodenwert von `area`
`bar_category_gap`	Prozent/Zahl	`"10%"`	Abstand zwischen Kategorien (`bar`)
`bar_gap`	Zahl	`4`	Abstand der Balken einer Kategorie (`bar`)
`bar_size`	Zahl	automatisch	Breite aller Balken
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	keiner	Basisberechnung gestapelter Reihen
`reverse_stack_order`	`True` / `False`	`False`	Stapelreihenfolge umkehren
`sync_id`, `sync_method`	String / `"index"` `"value"`	keiner / `"index"`	Tooltip und Brush mit anderen Diagrammen koppeln
`margin`, `width`, `height`	Dict / Zahl/Prozent		Außenabstand und Größe
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	Event		Maus-Events im Diagrammbereich

Die Props von area, bar und line sind dieselben wie auf den Seiten der jeweiligen Diagramme. In 0.10 nimmt bar_gap von composed_chart nur Zahlen an (bar_chart akzeptiert auch Prozent-Strings).

Wann ein Verbunddiagramm?

Wenn du Istwerte (Balken) zusammen mit Ziel, Durchschnitt oder Trend (Linie) zeigen willst
Wenn du Werte unterschiedlicher Art auf derselben x-Achse vergleichst, etwa eine Menge (Fläche) und die Anzahl von Ereignissen darin (Balken)

Alle Reihen teilen sich dieselben data, dieselben Achsen, denselben Tooltip und dieselbe Legende. Deshalb stehen Balken- und Linienwert in einem einzigen Tooltip.

Zeichenreihenfolge

Die Kinder werden in ihrer Reihenfolge von unten nach oben geschichtet. Im oberen Diagramm stehen die Balken zuerst, im unteren die Fläche. Kommt eine kräftige Fläche später, verdeckt sie die Balken; großflächige Reihen schreibt man daher meist zuerst.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Zwei Achsen

Werte völlig unterschiedlicher Größe, etwa Bestellungen (Dutzende) und Umsatz (Tausende), drücken sich auf einer gemeinsamen Achse gegenseitig an den Boden. Setz eine zweite y-Achse mit orientation="right" nach rechts und ordne Reihen und Achsen per y_axis_id einander zu. Zwei Skalen werden leicht falsch gelesen; mach deshalb mit Legende und Achsenfarbe klar, welcher Wert zu welcher Achse gehört.

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

Auftrag erledigt

Die Bestellungen sind Balken, das Ziel eine gestrichelte line darüber. Die Linie steht hinter den Balken im Code und wird deshalb obenauf gezeichnet; dot=False entfernt die Punkte, sodass sie wie eine Referenzlinie wirkt.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

Werkstattnotizen

Ein composed_chart mischt area, bar und line. Daten, Achsen und Tooltip teilen sie sich.
Später notierte Kinder werden obenauf gezeichnet. Großflächige Reihen zuerst.
base_value gilt für area, bar_category_gap, bar_gap und bar_size für bar.
Werte anderer Größenordnung per y_axis_id auf eine zweite Achse. Nur wenn wirklich nötig.
Das Koppeln mit anderen Diagrammen per sync_id funktioniert wie auf der Seite „Area Chart“.

← Zurück

Diagramme · Line Chart

Weiter →

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