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

Reference

rx.recharts.reference_linerx.recharts.reference_dotrx.recharts.reference_area

Documentación oficial

Pedido del taller

En la gráfica de ventas mensuales, traza una línea de objetivo en 5000, colorea el periodo de rebajas y marca con un punto el mejor mes.

Las piezas de referencia ponen sobre la gráfica, aparte de los datos, una señal de «mira aquí». reference_line dibuja una línea horizontal o vertical en un valor, reference_area un rectángulo coloreado sobre un tramo y reference_dot un punto en unas coordenadas. Sirven para señales que ayudan a interpretar: objetivos, medias, valores atípicos, periodos de campaña.

reference_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="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Prueba las propiedades

Cambia el aspecto de la línea de referencia. Desde el ejemplo de abajo se reutiliza tal cual el reference_data creado arriba.

Prueba las propiedades

label

stroke

stroke_width

stroke_dasharray

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 5)),
    rx.recharts.reference_line(
        y=4343,
        label="Average",
        stroke=rx.color("green", 10),
        stroke_width=1,
        stroke_dasharray="",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=280,
)

label pone texto sobre la línea, y stroke_dasharray la vuelve discontinua.

Propiedad	Valores	Se aplica a	Uso
`x` · `y`	número o valor de categoría	line · dot	Dónde va la línea o el punto. En un eje de categorías, el nombre de la categoría
`x1` `x2` `y1` `y2`	número o valor de categoría	area	Bordes del rectángulo. Sin los de x, todo el ancho en x; sin los de y, todo el alto en y
`segment`	`[{"x", "y"}, {"x", "y"}]`	line	Línea oblicua entre dos extremos
`r`	número	dot	Radio del punto
`label`	cadena, número	line · dot	Añadir texto. Para más estilo, `rx.recharts.label` como hijo
`stroke` · `fill` · `fill_opacity`	color · color · `0`~`1`	todos	Color de línea, color de relleno, opacidad del relleno
`stroke_width` · `stroke_dasharray`	número · `"4 4"`	line	Grosor de línea (por defecto `1`), patrón de discontinua
`if_overflow`	`"discard"` `"hidden"` `"visible"` `"extendDomain"`	todos	Qué hacer si se sale del rango del eje (por defecto `"discard"`)
`x_axis_id` · `y_axis_id`	id de eje	todos	Con varios ejes, respecto a cuál se coloca
`on_click`, etc.	eventos	dot	Al pulsar el punto o pasar el ratón por encima (sin argumentos)

Reference Area: colorear un tramo

reference_area dibuja un rectángulo de x1 a x2 y de y1 a y2. En un eje numérico se usan números; en uno de categorías, nombres de categoría. Hay que bajar fill_opacity para que se vean los datos de debajo.

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill="#8884d8", name="A"),
    rx.recharts.reference_area(x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Reference Line: trazar una línea

Con y aparece una línea horizontal en ese valor; con x, una vertical. Si el eje x es de categorías, usa el nombre de la categoría, como x="Page C". Si das dos extremos en segment, también puedes dibujar una línea oblicua (la discontinua naranja).

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE"),
    rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.reference_line(
        segment=[{"x": "Page A", "y": 2400}, {"x": "Page G", "y": 4300}],
        stroke=rx.color("orange", 9),
        stroke_dasharray="6 3",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Reference Dot: marcar un punto

reference_dot pone un punto de radio r en las coordenadas x, y. Sirve para rodear un punto de datos destacable o para marcar un punto de referencia que no está en los datos. Abajo se usa el reference_points de antes.

rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill=rx.color("accent", 9), name="A"),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.reference_dot(x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10)),
    rx.recharts.reference_dot(x=170, y=300, r=20, fill=rx.color("accent", 7)),
    rx.recharts.reference_dot(x=90, y=220, r=18, fill=rx.color("green", 7)),
    width="100%",
    height=240,
)

Si se sale del rango del eje: if_overflow

Si el máximo de los datos es 4000 y trazas la línea de referencia en 6000, con el valor por defecto "discard" la línea no se dibuja en absoluto (izquierda). "extendDomain" amplía el rango del eje para que la línea se vea (derecha). "hidden" recorta lo que queda fuera del área, y "visible" lo dibuja aunque se salga.

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="discard", stroke=rx.color("red", 9)),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="extendDomain", stroke=rx.color("red", 9), if_overflow="extendDomain"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

Mover la referencia con el State

También puedes enlazar al State valores de posición como y. Si cambias el objetivo con el deslizador, la línea se mueve con él y cambia también el número de meses que lo superan.

Goal

5000

3 months reached

reference_sales = [
    {"month": "Jan", "sales": 3200}, {"month": "Feb", "sales": 4100}, {"month": "Mar", "sales": 5600},
    {"month": "Apr", "sales": 4700}, {"month": "May", "sales": 6300}, {"month": "Jun", "sales": 5900},
]


class ReferenceGoalState(rx.State):
    goal: int = 5000

    @rx.event
    def set_goal(self, value: list[float]):
        self.goal = int(value[0])

    @rx.var
    def hits(self) -> int:
        return sum(1 for row in reference_sales if row["sales"] >= self.goal)


rx.vstack(
    rx.hstack(
        rx.text("Goal", size="2"),
        rx.slider(value=[ReferenceGoalState.goal], min=2000, max=7000, step=100, on_change=ReferenceGoalState.set_goal, width="200px"),
        rx.badge(ReferenceGoalState.goal),
        rx.text(ReferenceGoalState.hits, " months reached", size="2"),
        align="center",
        wrap="wrap",
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="sales", fill=rx.color("accent", 8)),
        rx.recharts.reference_line(y=ReferenceGoalState.goal, stroke=rx.color("red", 9), stroke_dasharray="4 4"),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(domain=[0, 7000]),
        data=reference_sales,
        width="100%",
        height=260,
    ),
    width="100%",
)

Pulsar un punto

reference_dot tiene eventos de ratón como on_click. Como el evento no pasa ningún valor, para saber qué punto se pulsó pasa el argumento directamente al handler, como abajo.

Click a marked dot

reference_click_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
]


class ReferenceDotState(rx.State):
    picked: str = "Click a marked dot"

    @rx.event
    def pick(self, name: str):
        self.picked = name


rx.vstack(
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=reference_click_points, fill=rx.color("gray", 8)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.reference_dot(x=150, y=400, r=14, fill=rx.color("red", 7), on_click=ReferenceDotState.pick("Highest")),
        rx.recharts.reference_dot(x=45, y=100, r=14, fill=rx.color("blue", 7), on_click=ReferenceDotState.pick("Lowest")),
        width="100%",
        height=220,
    ),
    rx.text(ReferenceDotState.picked, size="2", weight="bold"),
    width="100%",
)

Completar el pedido

El periodo de rebajas es un reference_area, el objetivo un reference_line y el mejor mes un reference_dot. El área tiene que ir antes que las series para quedar detrás de la línea. Se usa el reference_sales de arriba.

rx.recharts.line_chart(
    rx.recharts.reference_area(
        rx.recharts.label(value="Sale week", position="insideTop"),
        x1="Mar",
        x2="Apr",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.line(data_key="sales", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopLeft"),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_dot(x="May", y=6300, r=8, fill=rx.color("green", 9), stroke="white"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=reference_sales,
    width="100%",
    height=280,
)

Notas del taller

reference_line traza una línea en un valor de x o de y; con segment, una línea oblicua.
reference_area es un rectángulo x1·x2·y1·y2. Baja fill_opacity para que se vean los datos.
reference_dot es un punto de radio r en x·y. En on_click, pasa el argumento directamente para distinguirlos.
Fuera del rango del eje, por defecto no se dibuja. if_overflow="extendDomain" amplía el eje.
El texto, con label="…" o un hijo rx.recharts.label. El orden de dibujo es el orden de superposición.

← Anterior

Piezas de gráficos · Label

Piezas de gráficos · Brush

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