ReflexKR

El taller de componentes: los 100 componentes de Reflex

Resumen del curso

Diseño

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

Tipografía

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

Formularios

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

Visualización de datos

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

Mostrar y ocultar

Tabs

Accordion

Segmented Control

Superposiciones

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

Renderizado dinámico

Cond

Match

Foreach

Auto Scroll

Multimedia

Image

Audio

Video

Tablas y cuadrículas de datos

Table

Data Table

Data Editor

Gráficos

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

Piezas de gráficos

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

Otras bibliotecas de gráficos

Plotly

Pyplot

Elementos HTML

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

Otras herramientas

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

El taller de componentes: los 100 componentes de Reflex

Piezas de gráficos

Legend

rx.recharts.legend

Documentación oficial

Pedido del taller

He dibujado los pedidos semanales de tres sucursales con tres líneas. Indica arriba a la derecha qué línea es cada sucursal.

rx.recharts.legend es la leyenda que indica qué es cada serie de la gráfica. Como la leyenda de un mapa, coloca el nombre de cada serie junto a su color y su forma. En una gráfica con dos o más series, casi siempre se pone.

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,
)

Prueba las propiedades

Cambia la dirección y la posición de la leyenda y la forma de los iconos. Desde el ejemplo de abajo se reutiliza tal cual el legend_data creado arriba.

Prueba las propiedades

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 es la dirección en que se alinean los elementos; align y vertical_align, el sitio de la leyenda dentro de la gráfica.

Propiedad	Valores	Por defecto	Uso
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Elementos en horizontal o en vertical
`align`	`"left"` `"center"` `"right"`	`"center"`	Posición horizontal
`vertical_align`	`"top"` `"middle"` `"bottom"`	`"bottom"`	Posición vertical
`icon_type`	`"line"` `"plainline"` `"square"` `"rect"` `"circle"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	según la serie	Forma del icono de cada elemento
`icon_size`	número	`14`	Tamaño del icono
`width` · `height`	número	automático	Tamaño de la caja que contiene la leyenda
`payload` · `chart_width` · `chart_height` · `margin`	-	automático	Valores que normalmente calcula la gráfica
`on_click` · `on_mouse_enter`, etc.	eventos	-	Eventos en los elementos de la leyenda (sin argumentos)

Fijar a la vez tamaño y posición

width y height son el tamaño de la caja que contiene la leyenda. Si das a la vez layout="vertical", align="right" y vertical_align="top", se apila en vertical arriba a la derecha. Con icon_size e icon_type cambias también los iconos.

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,
)

Nombres e iconos de la leyenda

El texto de la leyenda es el name de la serie; si no lo tiene, se ve el data_key. El icono se elige serie a serie con su legend_type, y con "none" esa serie desaparece de la leyenda.

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,
)

Ocultar series

Si enlazas el hide de una serie a un valor del State, puedes encender y apagar líneas con casillas. Las series ocultas siguen en la leyenda en un color apagado, así se sabe qué está apagado. En Reflex 0.10, el on_click de la leyenda no indica qué elemento se pulsó, así que este tipo de control se hace con controles fuera de la gráfica.

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%",
)

Completar el pedido

A cada serie le ponemos el nombre de la sucursal con name, y la leyenda va arriba a la derecha con círculos pequeños.

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,
)

Notas del taller

Si pones legend() como hijo de la gráfica, cada serie recibe su icono y su nombre.
El texto es el name de la serie (si no, data_key) y el icono, legend_type. Con "none" sale de la leyenda.
layout para la dirección, align y vertical_align para la posición, icon_type e icon_size para el icono.
Enlazar el hide de una serie al State permite encenderla y apagarla. Las ocultas quedan apagadas en la leyenda.

← Anterior

Piezas de gráficos · Chart Tooltip

Piezas de gráficos · Label

Recibe avisos de nuevas lecciones

Te avisaremos por correo cuando este curso tenga lecciones nuevas o se abra un curso de continuación.

Preguntas y respuestas

Pregunta lo que quieras sobre esta lección. Aquí se reúnen las preguntas de todas las versiones de idioma de esta página.

ReflexKR

Aprende Python y Reflex haciendo. Todos los ejemplos se ejecutaron y verificaron en Reflex 0.10.0.

ReflexKR es gratis y sin banners publicitarios. Si te ayudó, puedes apoyarlo con un café. ☕ Invítanos un café

Aviso de afiliados

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex