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

Cartesian Grid

rx.recharts.cartesian_grid

Documentación oficial

Pedido del taller

Para que la altura de las barras se lea fácil a simple vista, pon detrás de la gráfica solo unas líneas horizontales suaves.

rx.recharts.cartesian_grid dibuja detrás de la gráfica una cuadrícula de líneas horizontales y verticales. Así es más fácil seguir con la vista a qué marca corresponde un valor. Se pone como hijo de gráficas con ejes x e y: de líneas, de barras, de áreas o de dispersión.

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray es igual que el stroke-dasharray de SVG: unes números con comas o espacios y se repite «longitud de trazo, longitud de hueco». "5,5" son 5 píxeles de trazo y 5 de hueco; "10,5,5,5" repite trazo largo, hueco, trazo corto, hueco. Si lo dejas vacío, la línea es continua.

Prueba las propiedades

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

Prueba las propiedades

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

Con horizontal y vertical enciendes y apagas por separado las líneas horizontales y las verticales. fill y fill_opacity pintan el fondo de las celdas de la cuadrícula.

Propiedad	Valores	Por defecto	Uso
`horizontal`	`True` / `False`	`True`	Mostrar las líneas horizontales
`vertical`	`True` / `False`	`True`	Mostrar las líneas verticales
`stroke_dasharray`	`"4 4"`, `"5,5"` …	continua	Patrón de discontinua
`stroke`	color	`rx.color("gray", 7)`	Color de las líneas
`fill` · `fill_opacity`	color · `0`~`1`	ninguno	Fondo de las celdas y su opacidad
`horizontal_points` · `vertical_points`	lista de posiciones en píxeles	`[]`	Indicar a mano dónde van las líneas
`x` · `y` · `width` · `height`	número	`0`	Posición y tamaño de la cuadrícula. Normalmente los calcula la gráfica

Dejar solo un tipo de línea

Si apagas las verticales con vertical=False, quedan solo las horizontales. Para leer la altura de barras o áreas bastan las horizontales, y la gráfica se ve mucho más ligera.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

Una cuadrícula discreta

Si bajas la opacidad de las líneas con class_name, se convierten en líneas de referencia que no compiten con los datos. Este sitio usa Tailwind, así que clases como "opacity-25" funcionan tal cual.

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"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

Indicar a mano dónde van las líneas

horizontal_points y vertical_points reciben en una lista los sitios donde dibujar las líneas. Son distancias en píxeles: las horizontales, desde el borde superior de la gráfica; las verticales, desde el borde izquierdo.

Ojo: no son valores de las marcas del eje, sino posiciones en píxeles en pantalla. Aunque cambie el tamaño de la gráfica, las líneas se quedan en los mismos píxeles. Úsalo con moderación, para resaltar un tramo concreto.

cgrid_points = [
    {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 170, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280},
    {"x": 200, "y": 150}, {"x": 130, "y": 350}, {"x": 90, "y": 220},
    {"x": 180, "y": 320}, {"x": 140, "y": 230}, {"x": 160, "y": 180},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

Completar el pedido

En una gráfica de barras ponemos solo líneas horizontales discontinuas y suaves, sin verticales, y quitamos también la línea del eje y las de las marcas para que la cuadrícula haga de escala.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

Notas del taller

cartesian_grid va como hijo de una gráfica con ejes x e y.
Las discontinuas se hacen repitiendo longitudes de trazo y hueco, como stroke_dasharray="4 4".
Con horizontal y vertical dejas un solo tipo de línea. En barras y áreas bastan las horizontales.
Con una cuadrícula suave, como class_name="opacity-25", los datos pasan a primer plano.
horizontal_points y vertical_points son posiciones en píxeles, no valores de las marcas.

← Anterior

Piezas de gráficos · Axis

Piezas de gráficos · Chart Tooltip

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