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

Otras bibliotecas de gráficos

Pyplot

reflex_pyplot.pyplot

Documentación oficial

Pedido del taller

Sube tal cual a la web el código de figuras de matplotlib que usábamos en el laboratorio, y haz que la figura cambie al elegir un producto.

pyplot es un componente que muestra figuras de Matplotlib en una pantalla de Reflex. Viene en un paquete aparte, reflex-pyplot. Si le pasas un Figure creado con matplotlib.pyplot, lo dibuja en el navegador, así que no necesitas rutas de Flask ni convertir imágenes a base64.

Los ejemplos de esta página solo se muestran como código. Es porque este sitio no tiene instalados matplotlib ni reflex-pyplot. Para ejecutar el código de abajo en tu app, instala primero los dos paquetes (y, según el ejemplo, también numpy).

Qué es pyplot

matplotlib.pyplot es un conjunto de funciones que permite usar Matplotlib al estilo de MATLAB. Llamadas como plt.plot, plt.scatter o plt.bar van añadiendo a la figura líneas, barras, texto y leyendas. En un script, al final se abre una ventana con plt.show(); en una app de Reflex, el Figure se pasa al componente pyplot y se vuelve a dibujar cuando cambia el State.

Cuándo usar Matplotlib

Si ya tienes código de matplotlib en notebooks de Jupyter, scripts de investigación o pipelines de datos, lo usas tal cual en la app web, sin pasarlo a otra librería de gráficas.

Dashboards de análisis de datos: compartir un prototipo de notebook con controles añadidos
Informes científicos: figuras para publicación con texto en LaTeX y estilos minuciosos
Monitorización de machine learning: curvas de aprendizaje, matrices de confusión, distribuciones de características
Análisis financiero: series temporales y gráficas de rentabilidad
Herramientas de ingeniería: resultados de simulaciones y datos de sensores

Para gráficas de negocio habituales, como barras, líneas o tartas, encajan mejor las gráficas Recharts que trae Reflex (rx.recharts); para figuras interactivas o 3D que se pueden ampliar y girar, rx.plotly.

Instalación

Si instalas reflex-pyplot, también necesitas matplotlib. Algunos de los ejemplos de abajo usan además numpy.

pip install reflex-pyplot
# in a project that uses uv
uv add reflex-pyplot

Uso básico

Impórtalo con from reflex_pyplot import pyplot y pásale la figura (Figure) como primer hijo. Como se dibuja en pantalla como una imagen, acompáñalo de atributos de imagen como alt (texto alternativo), loading y decoding, y de width y height.

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from reflex_pyplot import pyplot


def create_contour_plot():
    X, Y = np.meshgrid(np.linspace(-3, 3, 256), np.linspace(-3, 3, 256))
    Z = (1 - X / 2 + X**5 + Y**3) * np.exp(-(X**2) - Y**2)
    levels = np.linspace(Z.min(), Z.max(), 7)

    fig, ax = plt.subplots()
    ax.contourf(X, Y, Z, levels=levels)
    plt.close(fig)
    return fig


def pyplot_simple_example():
    return rx.card(
        pyplot(
            create_contour_plot(),
            alt="Filled contour plot of a two-dimensional function",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

Después de crear una figura, ciérrala siempre con plt.close(fig). Si no la cierras, el servidor sigue reteniéndola y la memoria crece. Los colores de la figura los decide Matplotlib, así que la hemos envuelto en rx.card(bg_color="#ffffff") para que el fondo blanco se vea también con el tema oscuro.

Gráfica de líneas

Es la figura más común. Como en un script, se crea con plt.subplots() y ax.plot(), y la figura se pasa a pyplot.

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from reflex_pyplot import pyplot


def create_line_plot():
    x = np.linspace(0, 10, 100)
    fig, ax = plt.subplots()
    ax.plot(x, np.sin(x), label="sin(x)")
    ax.plot(x, np.cos(x), label="cos(x)")
    ax.set_xlabel("x")
    ax.set_ylabel("y")
    ax.legend()
    plt.close(fig)
    return fig


def pyplot_line_example():
    return rx.card(
        pyplot(
            create_line_plot(),
            alt="Sine and cosine curves from zero to ten",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

Gráfica de barras

Funciona igual, salvo que a ax.bar() se le pasan categorías y valores.

import matplotlib.pyplot as plt
import reflex as rx
from reflex_pyplot import pyplot


def create_bar_chart():
    fruits = ["apples", "oranges", "bananas", "pears"]
    counts = [23, 17, 35, 29]
    fig, ax = plt.subplots()
    ax.bar(fruits, counts, color="#4e79a7")
    ax.set_ylabel("count")
    ax.set_title("Fruit inventory")
    plt.close(fig)
    return fig


def pyplot_bar_example():
    return rx.card(
        pyplot(
            create_bar_chart(),
            alt="Fruit inventory: apples 23, oranges 17, bananas 35, pears 29",
            loading="lazy",
            decoding="async",
            width="100%",
            height="400px",
        ),
        bg_color="#ffffff",
        width="100%",
    )

Con el State

A un diagrama de dispersión con puntos aleatorios le añadimos un botón para volver a mezclar y un deslizador para el número de puntos. La figura la crea un valor calculado con @rx.var, así que se vuelve a dibujar cuando cambian los valores del State. Con throttle=500 en el evento, solo se redibuja una vez cada medio segundo.

Los colores de una figura de Matplotlib no siguen el tema de la app. Por eso creamos una figura clara y otra oscura, y con rx.color_mode_cond mostramos la que corresponde al modo actual.

import random

import matplotlib.pyplot as plt
import numpy as np
import reflex as rx
from matplotlib.figure import Figure
from reflex_pyplot import pyplot


def create_plot(theme: str, plot_data: tuple, scale: list):
    bg_color, text_color = ("#1e1e1e", "white") if theme == "dark" else ("white", "black")
    grid_color = "#555555" if theme == "dark" else "#cccccc"

    fig, ax = plt.subplots(facecolor=bg_color)
    ax.set_facecolor(bg_color)

    for (x, y), color in zip(plot_data, ["#4e79a7", "#f28e2b"]):
        ax.scatter(x, y, c=color, s=scale, label=color, alpha=0.6, edgecolors="none")

    ax.legend(loc="upper right", facecolor=bg_color, edgecolor="none", labelcolor=text_color)
    ax.grid(True, color=grid_color)
    ax.tick_params(colors=text_color)
    for spine in ax.spines.values():
        spine.set_edgecolor(text_color)
    for item in [ax.xaxis.label, ax.yaxis.label, ax.title]:
        item.set_color(text_color)
    plt.close(fig)
    return fig


class PyplotState(rx.State):
    num_points: int = 25
    plot_data: tuple = tuple(np.random.rand(2, 25) for _ in range(2))
    scale: list = [random.uniform(0, 100) for _ in range(25)]

    @rx.event(temporal=True, throttle=500)
    def randomize(self):
        self.plot_data = tuple(np.random.rand(2, self.num_points) for _ in range(2))
        self.scale = [random.uniform(0, 100) for _ in range(self.num_points)]

    @rx.event(temporal=True, throttle=500)
    def set_num_points(self, num_points: list[int | float]):
        self.num_points = int(num_points[0])
        yield PyplotState.randomize()

    @rx.var
    def fig_light(self) -> Figure:
        return create_plot("light", self.plot_data, self.scale)

    @rx.var
    def fig_dark(self) -> Figure:
        return create_plot("dark", self.plot_data, self.scale)


def pyplot_example():
    return rx.vstack(
        rx.card(
            rx.color_mode_cond(
                pyplot(PyplotState.fig_light, alt="Scatter plot of the current randomized points", width="100%", height="100%"),
                pyplot(PyplotState.fig_dark, alt="Scatter plot of the current randomized points", width="100%", height="100%"),
            ),
            rx.hstack(
                rx.button("Randomize", on_click=PyplotState.randomize),
                rx.text("Number of Points:"),
                rx.slider(default_value=25, min=10, max=100, on_value_commit=PyplotState.set_num_points),
                width="100%",
            ),
            width="100%",
        ),
        justify_content="center",
        align_items="center",
        width="100%",
    )

En el deslizador del ejemplo de la documentación oficial pone min_=10, pero en el rx.slider de Reflex 0.10 ese nombre no es el valor mínimo, sino que entra como estilo CSS. En el código de arriba lo hemos corregido a min=10. Además, este ejemplo guarda un array de numpy en el State; en una app real es más seguro guardar en el State valores simples, como listas, y convertirlos en arrays al crear la figura.

Preguntas frecuentes

¿Cómo muestro una figura de Matplotlib en una página web? Crea la figura como siempre y pasa ese Figure al componente pyplot. No hacen falta Flask, rutas REST ni conversiones a base64.

¿Puedo hacer interactiva una figura de Matplotlib? Sí. Crea la figura dentro de un rx.var que dependa del State, y cuando eventos como botones o deslizadores cambien el State, la figura se redibujará sola (el ejemplo con el State de arriba).

¿Tengo que llamar a plt.show()? No. plt.show() abre una ventana de escritorio y no se usa en apps web. Devuelve la figura y ciérrala con plt.close(fig).

API

pyplot muestra una figura de Matplotlib. No tiene propiedades ni eventos propios; acepta los eventos básicos que tienen todos los componentes (on_click, on_mount, etc.).

Argumento	Valores	Uso
primer hijo	`matplotlib.figure.Figure` o un valor del State que lo devuelva	Figura que se muestra
`alt` · `loading` · `decoding`	cadena	Texto alternativo de la imagen, carga diferida, decodificación asíncrona
`width` · `height`	tamaño CSS	Espacio que ocupa la figura

Completar el pedido

En el State solo guardamos el nombre del producto elegido, y un valor calculado crea la gráfica de barras de ese producto. Este código también se ejecuta en una app que tenga instalados reflex-pyplot y matplotlib.

import matplotlib.pyplot as plt
import reflex as rx
from matplotlib.figure import Figure
from reflex_pyplot import pyplot

MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
SALES = {"Chairs": [32, 41, 38, 52, 61, 58], "Tables": [12, 15, 21, 19, 24, 30]}


class PyplotReportState(rx.State):
    product: str = "Chairs"

    @rx.event
    def set_product(self, value: str):
        self.product = value

    @rx.var
    def figure(self) -> Figure:
        fig, ax = plt.subplots(figsize=(6, 3))
        ax.bar(MONTHS, SALES[self.product], color="#4e79a7")
        ax.set_title(f"{self.product} sales")
        ax.set_ylabel("units")
        fig.tight_layout()
        plt.close(fig)
        return fig


def pyplot_report():
    return rx.vstack(
        rx.select(["Chairs", "Tables"], value=PyplotReportState.product, on_change=PyplotReportState.set_product),
        rx.card(
            pyplot(PyplotReportState.figure, alt="Monthly sales of the selected product", width="100%"),
            bg_color="#ffffff",
            width="100%",
        ),
        width="100%",
    )

Notas del taller

pip install reflex-pyplot (requiere matplotlib). from reflex_pyplot import pyplot.
Pasa el Figure como primer hijo: pyplot(fig, alt=…, width=…). No uses plt.show().
Tras crear la figura, ciérrala siempre con plt.close(fig).
Si un valor calculado con @rx.var devuelve el Figure, se redibuja cuando cambia el State.
Los colores no siguen el tema: separa figura clara y oscura con color_mode_cond.

← Anterior

Otras bibliotecas de gráficos · Plotly

Elementos HTML · HTML

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