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

Label

rx.recharts.labelrx.recharts.label_list

Documentación oficial

Pedido del taller

Escribe el número directamente encima de cada barra y pon el nombre «Pages» bajo el eje horizontal.

Hay dos piezas para escribir texto dentro de una gráfica. rx.recharts.label pega un texto en un sitio concreto, como un eje o una línea de referencia, y rx.recharts.label_list escribe automáticamente un valor en cada punto de datos de una serie. El número sobre las barras es label_list; el nombre del eje, label.

label_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": 5800, "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.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        fill=rx.color("accent", 8),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="center", position="center", offset=30),
        rx.recharts.label(value="inside left", position="insideLeft", offset=10),
        rx.recharts.label(value="inside right", position="insideRight", offset=10),
        height=50,
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 20, "bottom": 20},
    width="100%",
    height=250,
)

label va como hijo de x_axis y se pega al eje. value es el texto, position el sitio y offset la distancia que se desplaza desde ese sitio. label_list va como hijo de bar y escribe en cada barra el valor de la columna data_key.

Prueba las propiedades

Desde el ejemplo de abajo se reutiliza tal cual el label_data creado arriba.

Prueba las propiedades

list_position

list_fill

value

position

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        data_key="uv",
        fill=rx.color("accent", 6),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center"),
        data_key="name",
        height=50,
    ),
    data=label_data,
    margin={"top": 20, "left": 20, "right": 20},
    width="100%",
    height=280,
)

El position de label_list se coloca respecto a la barra; el de label, respecto al área del eje.

rx.recharts.label

Propiedad	Valores	Por defecto	Uso
`value`	cadena	-	Texto que se muestra
`position`	`"top"` `"left"` `"right"` `"bottom"` `"inside"` `"outside"` `"insideLeft"` `"insideRight"` `"insideTop"` `"insideBottom"` `"insideTopLeft"` `"insideBottomLeft"` `"insideTopRight"` `"insideBottomRight"` `"insideStart"` `"insideEnd"` `"end"` `"center"`	-	Posición dentro del área del padre
`offset`	número	-	Distancia que se desplaza desde esa posición
`view_box`	dict	automático	Área de referencia. Normalmente se calcula sola

rx.recharts.label_list

Propiedad	Valores	Por defecto	Uso
`data_key`	nombre de columna	-	Columna del valor que se escribe en cada punto
`position`	los mismos 18 que `label`	-	Posición respecto a la barra o el punto
`offset`	número	`5`	Distancia desde esa posición
`fill`	color	`rx.color("gray", 10)`	Color del texto
`stroke`	color	`"none"`	Color del contorno del texto

Un valor por serie: label_list

label_list escribe un texto en cada punto de datos de la serie que lo contiene. Con dos barras, pon un label_list en cada una y elige con data_key qué columna se escribe.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="pv", position="top"),
        data_key="pv",
        stroke="#82ca9d",
        fill="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    margin={"left": 10, "right": 0, "top": 20, "bottom": 10},
    data=label_data,
    width="100%",
    height=300,
)

Dar estilo al texto

Los estilos que label no tiene como propiedad se pasan tal cual a Recharts con custom_attrs. Fijamos el tamaño y el grosor del texto, y el nombre del eje vertical se gira con angle a 270 para que vaya a lo largo del eje.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center", custom_attrs={"fontSize": "12px", "fontWeight": "700"}),
        data_key="name",
        height=60,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Views", position="left", custom_attrs={"angle": 270, "fontSize": "12px", "fontWeight": "700"}),
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 25},
    width="100%",
    height=300,
)

Pegarlo a líneas y áreas de referencia

Además de los ejes, label puede ser hijo de reference_line, reference_dot y reference_area. Sirve para poner «Goal» en una línea de objetivo o un nombre a un tramo resaltado. El color del texto también se fija con el fill de custom_attrs.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopRight", custom_attrs={"fill": rx.color("red", 11)}),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_area(
        rx.recharts.label(value="Campaign", position="insideTop"),
        x1="Page C",
        x2="Page E",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=label_data,
    width="100%",
    height=280,
)

Completar el pedido

Ponemos dos label_list: el valor encima de la barra y el nombre de la página abajo, dentro de la barra. Como el nombre ya está en la barra, quitamos las marcas del eje y dejamos solo «Pages» bajo el eje con label.

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        rx.recharts.label_list(data_key="name", position="insideBottom", fill="white", offset=10),
        data_key="uv",
        fill=rx.color("accent", 9),
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="insideBottom", custom_attrs={"fontWeight": "700"}),
        tick=False,
        height=30,
    ),
    data=label_data,
    margin={"top": 20},
    width="100%",
    height=280,
)

Notas del taller

label es un texto en un sitio; label_list, un valor por cada punto de datos.
label es hijo de x_axis, y_axis o reference_*; label_list, de una serie como bar, line o area.
Con value, position y offset fijas el texto y su sitio. position tiene 18 valores.
Los estilos que no existen como propiedad (fontSize, fontWeight, angle) se pasan con custom_attrs.

← Anterior

Piezas de gráficos · Legend

Piezas de gráficos · Reference

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