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

Legend

rx.recharts.legend

Offizielle Doku

Werkstattauftrag

Ich habe die wöchentlichen Bestellungen dreier Filialen als drei Linien gezeichnet. Bitte oben rechts anzeigen, welche Linie zu welcher Filiale gehört.

rx.recharts.legend ist die Legende, die erklärt, wofür jede Reihe im Diagramm steht. Wie die Legende einer Landkarte reiht sie Reihennamen neben Farben und Formen auf. Bei Diagrammen mit mehr als einer Reihe gehört sie fast immer dazu.

legend_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.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=300,
)

Props ausprobieren

Hier änderst du Richtung, Lage und Symbolform der Legende. Ab dem nächsten Beispiel wird das oben angelegte legend_data weiterverwendet.

Props ausprobieren

layout

align

vertical_align

icon_type

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="amt", stroke=rx.color("green", 9)),
    rx.recharts.line(data_key="uv", stroke=rx.color("red", 9)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        layout="horizontal",
        align="center",
        vertical_align="bottom",
        icon_type="line",
    ),
    data=legend_data,
    width="100%",
    height=280,
)

layout ist die Richtung, in der die Einträge aufgereiht werden; align und vertical_align bestimmen, wo die Legende im Diagramm sitzt.

Prop	Werte	Standard	Verwendung
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Einträge nebeneinander oder untereinander
`align`	`"left"` `"center"` `"right"`	`"center"`	Lage in waagerechter Richtung
`vertical_align`	`"top"` `"middle"` `"bottom"`	`"bottom"`	Lage in senkrechter Richtung
`icon_type`	`"line"` `"plainline"` `"square"` `"rect"` `"circle"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	je nach Reihe	Form der Eintragssymbole
`icon_size`	Zahl	`14`	Symbolgröße
`width` · `height`	Zahl	automatisch	Größe des Kastens, der die Legende enthält
`payload` · `chart_width` · `chart_height` · `margin`	-	automatisch	Werte, die meist das Diagramm berechnet
`on_click` · `on_mouse_enter` usw.	Event	-	Events an Legendeneinträgen (ohne Argumente)

Größe und Lage zusammen festlegen

width und height sind die Größe des Kastens, der die Legende enthält. Mit layout="vertical", align="right" und vertical_align="top" zusammen stapeln sich die Einträge oben rechts untereinander. Mit icon_size und icon_type änderst du auch die Symbole.

rx.recharts.composed_chart(
    rx.recharts.line(data_key="pv", type_="monotone", stroke=rx.color("accent", 7)),
    rx.recharts.line(data_key="amt", type_="monotone", stroke=rx.color("green", 7)),
    rx.recharts.line(data_key="uv", type_="monotone", stroke=rx.color("red", 7)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        width=60,
        height=100,
        layout="vertical",
        align="right",
        vertical_align="top",
        icon_size=15,
        icon_type="square",
    ),
    data=legend_data,
    width="100%",
    height=300,
)

Namen und Symbole in der Legende

Der Text der Legende ist das name der Reihe; fehlt es, erscheint data_key. Das Symbol wählst du je Reihe über legend_type; mit "none" fällt die Reihe aus der Legende heraus.

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Visitors", fill=rx.color("accent", 8), legend_type="circle"),
    rx.recharts.bar(data_key="pv", name="Page views", fill=rx.color("teal", 8), legend_type="star"),
    rx.recharts.bar(data_key="amt", fill=rx.color("gray", 8), legend_type="none"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=280,
)

Reihen ausblenden

Verbindest du hide einer Reihe mit einem State-Wert, schaltest du Linien per Checkbox ein und aus. Ausgeblendete Reihen bleiben blass in der Legende stehen, so sieht man, was abgeschaltet ist. Das on_click der Legende verrät in Reflex 0.10 nicht, welcher Eintrag angeklickt wurde; solche Bedienung legst du deshalb in Steuerelemente außerhalb des Diagramms.

legend_toggle_data = [
    {"day": "Mon", "pv": 2400, "uv": 4000},
    {"day": "Tue", "pv": 1398, "uv": 3000},
    {"day": "Wed", "pv": 9800, "uv": 2000},
    {"day": "Thu", "pv": 3908, "uv": 2780},
    {"day": "Fri", "pv": 4800, "uv": 1890},
]


class LegendSeriesState(rx.State):
    show_pv: bool = True
    show_uv: bool = True

    @rx.event
    def set_show_pv(self, value: bool):
        self.show_pv = value

    @rx.event
    def set_show_uv(self, value: bool):
        self.show_uv = value


rx.vstack(
    rx.hstack(
        rx.checkbox("pv", checked=LegendSeriesState.show_pv, on_change=LegendSeriesState.set_show_pv),
        rx.checkbox("uv", checked=LegendSeriesState.show_uv, on_change=LegendSeriesState.set_show_uv),
        spacing="4",
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9), hide=~LegendSeriesState.show_pv),
        rx.recharts.line(data_key="uv", stroke=rx.color("orange", 9), hide=~LegendSeriesState.show_uv),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=legend_toggle_data,
        width="100%",
        height=260,
    ),
    width="100%",
)

Auftrag erledigt

Jede Reihe bekommt über name den Filialnamen, und die Legende sitzt oben rechts mit kleinen Kreisen.

legend_weekly = [
    {"week": "W1", "seoul": 120, "busan": 80, "daegu": 45},
    {"week": "W2", "seoul": 150, "busan": 95, "daegu": 60},
    {"week": "W3", "seoul": 140, "busan": 110, "daegu": 72},
    {"week": "W4", "seoul": 180, "busan": 105, "daegu": 90},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", name="Seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", name="Busan", stroke=rx.color("teal", 9)),
    rx.recharts.line(data_key="daegu", name="Daegu", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top", align="right", icon_type="circle", icon_size=10),
    data=legend_weekly,
    width="100%",
    height=280,
)

Werkstattnotizen

legend() als Kind ins Diagramm setzen, dann bekommt jede Reihe Symbol und Namen.
Der Text ist das name der Reihe (sonst data_key), das Symbol legend_type. Mit "none" fällt sie aus der Legende.
Richtung mit layout, Lage mit align und vertical_align, Symbole mit icon_type und icon_size.
hide einer Reihe mit dem State verbinden, um sie ein- und auszuschalten. Ausgeblendete Reihen bleiben blass in der Legende.

← Zurück

Diagrammbausteine · Chart Tooltip

Weiter →

Diagrammbausteine · Label

Ü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