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

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

Documentación oficial

Pedido del taller

Pon a la gráfica de visitas mensuales los nombres de eje «Month» y «Visits», y muestra las ventas aparte en un eje a la derecha.

Los ejes son la pieza que marca la escala de una gráfica. Si pones rx.recharts.x_axis y rx.recharts.y_axis como hijos de la gráfica, aparecen las marcas horizontales y verticales, y con data_key eliges qué columna se usa para ellas. El tercer eje, que fija el tamaño de los puntos en un diagrama de dispersión, es rx.recharts.z_axis.

axis_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.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Si pasas un dict a label, el eje lleva un nombre al lado: value es el texto, position la posición y angle el ángulo de giro. Como el nombre del eje queda fuera de la gráfica, deja sitio con el margin de la gráfica.

Prueba las propiedades

Cambia la orientación de los ejes y cómo se muestran las marcas. Desde el ejemplo de abajo se reutiliza tal cual el axis_data creado arriba.

Prueba las propiedades

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation lleva el eje al lado contrario, y mirror pone el texto de las marcas dentro de la gráfica. reversed invierte el orden de las marcas.

Propiedad	Valores	Por defecto	Uso
`data_key`	nombre de columna	-	Columna de datos que se usa para las marcas
`type_`	`"number"` `"category"` `"auto"`	x es category, y es number	Si es un eje numérico o de categorías
`domain`	`[mínimo, máximo]`	`[0, "auto"]`	Rango de un eje numérico. También admite `"auto"`, `"dataMin"` y `"dataMax"`
`allow_data_overflow`	`True` / `False`	`False`	Si se recortan los datos fuera de `domain`
`orientation`	x: `"bottom"` `"top"`, y: `"left"` `"right"`	`"bottom"` / `"left"`	Lado en que se coloca el eje
`x_axis_id` / `y_axis_id`	cadena o número	`0`	Nombre para emparejar ejes y series cuando hay varios ejes
`label`	cadena, número, dict	-	Nombre del eje. El dict lleva `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`, número	`"preserveEnd"`	Cómo reducir las etiquetas de marca que se solapan. Con `0` se ven todas
`tick_count`	número	`5`	Número de marcas de un eje numérico
`ticks`	lista	-	Indicar a mano los valores de las marcas
`tick_formatter`	cadena con una expresión de función JS	-	Cambiar el formato del texto de las marcas
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	Mostrar texto de las marcas, líneas de marca y línea del eje
`tick_size` · `min_tick_gap`	número	`6` · `5`	Longitud de las líneas de marca, separación mínima entre etiquetas
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	Texto hacia dentro, orden invertido, ocultar el eje
`unit` · `name`	cadena	-	Unidad y nombre que se muestran en el tooltip
`stroke`	color	`rx.color("gray", 9)`	Color de la línea del eje y de las marcas
`angle` · `padding` (eje x)	número · dict	`0` · `{"left": 0, "right": 0}`	Giro del texto de las marcas, margen en ambos extremos
`on_click`, etc.	eventos	-	Al pulsar una marca o pasar el ratón por encima (sin argumentos)

Varios ejes

Dos series con unidades distintas llevan cada una su propio eje. Pon un y_axis_id al eje y el mismo y_axis_id a la serie, y quedan emparejados. El segundo eje se coloca a la derecha con orientation="right".

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

Pulir las marcas

axis_line=False y tick_line=False borran la línea del eje y las de las marcas y dejan solo el texto. tick_size separa el texto del eje, e interval="preserveStartEnd" conserva la primera y la última etiqueta aunque quite algunas por solaparse. El tamaño de letra, que no existe como propiedad, se pasa tal cual a Recharts con custom_attrs.

tick_formatter es una expresión de función JavaScript que cambia el texto de las marcas. Abajo, 4000 se muestra como 4k. Este valor solo se escribe como cadena; no admite valores del State.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        data_key="name",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

La posición del nombre del eje

El position del dict de label acepta 14 valores, y con offset lo desplazas un poco más hacia fuera o hacia dentro desde esa posición. Los valores del dict también se pueden cambiar con valores del State.

Prueba las propiedades

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

Los valores que empiezan por inside ponen el nombre dentro del eje; top, bottom, left y right, fuera.

Rango de un eje numérico

domain fija el mínimo y el máximo de un eje numérico. Por defecto, si los datos se salen del rango, el eje se amplía solo (izquierda). Con allow_data_overflow=True se respeta el rango y se recorta lo que sobresale (derecha: Page C, con 9800).

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis: el tamaño de los puntos

En un diagrama de dispersión, rx.recharts.z_axis no se dibuja en pantalla: fija el tamaño de los puntos. Cuanto menor es el valor de data_key, más se acerca al inicio de range (área pequeña), y cuanto mayor, al final (área grande). En el tooltip se muestran también name y unit.

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Completar el pedido

Separamos las visitas en barras con el eje izquierdo y las ventas en una línea con el eje derecho. Ponemos nombre a los dos ejes y subimos la leyenda para que no choque con los nombres de los ejes.

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

Notas del taller

Pon x_axis e y_axis como hijos de la gráfica y elige con data_key la columna de las marcas.
label como dict: value, position, offset y angle. Deja sitio con el margin de la gráfica.
Con dos ejes, empareja cada serie con y_axis_id; el segundo eje va con orientation="right".
domain fija el rango; con allow_data_overflow=True se recorta lo que sobresale.
tick_formatter es una cadena con una función JS; z_axis es el tamaño de los puntos de dispersión (range).

← Anterior

Gráficos · Error Bar

Piezas de gráficos · Cartesian Grid

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