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

Gráficos

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

Documentación oficial

Pedido del taller

Muestra en forma de embudo cuántas personas quedan en cada etapa, de la visita al registro, la prueba y el pago.

rx.recharts.funnel_chart muestra en forma de embudo cuánto se reduce un valor a lo largo de etapas consecutivas. Se usa para ver cuánta gente se pierde en cada paso, como en un proceso de registro o de compra. data se le da a rx.recharts.funnel, y el color de cada etapa se fija poniendo "fill" en cada dict de los datos.

Los nombres de las etapas se añaden metiendo rx.recharts.label_list dentro de funnel. Con data_key eliges qué valor se escribe y con position, dónde se coloca.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

Prueba las propiedades

Cambia la posición y el contenido de las etiquetas, el color del borde de las etapas y la animación. Los datos son el funnelchart_data de arriba.

Prueba las propiedades

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside" coloca el texto en el centro de cada etapa. Si desactivas is_animation_active, el gráfico aparece ya dibujado desde el principio.

Propiedad	Valores	Por defecto	Uso
`funnel_chart(width=, height=, margin=)`	número o porcentaje / dict	`"100%"` / 5 por lado	Tamaño y margen
`funnel_chart(layout=, stroke=)`	cadena / color	`"centric"`	Disposición de las etapas, color del borde
`funnel(data=)`	lista de dicts	ninguno	Datos de las etapas. El color, con la clave `"fill"`
`funnel(data_key=, name_key=)`	cadena	ninguno / `"name"`	Claves del valor y del nombre de cada etapa
`funnel(stroke=)`	color	gray 3	Borde de las etapas
`funnel(legend_type=)`	icono de leyenda	`"line"`	Forma de la leyenda
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	Animación de entrada
`label_list(data_key=, position=)`	clave / `"right"` `"inside"` …		Texto que acompaña a cada etapa
`label_list(fill=, stroke=, offset=)`	color / número	gray 10 / `"none"` / `5`	Color del texto, contorno, distancia
Eventos	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		En el gráfico y en `funnel`. `funnel` también tiene `on_animation_start` y `on_animation_end`

Eventos

funnel_chart recibe clics y eventos de ratón. En el gráfico de abajo, pasa el ratón por encima, haz clic y sal. Cada evento muestra un aviso (toast). A los eventos puedes conectar manejadores de State o acciones integradas como rx.toast.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

Datos que cambian con State

Conectamos un valor de State al data de funnel y generamos valores nuevos en el on_click de funnel. Cada vez que pulsas el embudo, la primera etapa se queda en 100 y, a partir de la siguiente, cada una baja entre 0 y 20.

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

Cambiar la animación

animation_begin es el retraso antes de empezar a dibujar y animation_duration, el tiempo que tarda en dibujarse (en milisegundos). Con animation_easing eliges cómo acelera y frena. Si añades legend, los nombres de las etapas aparecen en la leyenda.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

Completar el pedido

Ponemos dos label_list: el nombre de la etapa a la derecha y el número de personas dentro. Los colores son tonos de un solo color que se aclaran a medida que se baja de etapa, y ampliamos el margin derecho para que no se corten los nombres.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

Notas del taller

Dentro de funnel_chart pon funnel(data=…, data_key=…). El color de cada etapa es el "fill" de los datos.
Los nombres de las etapas, con label_list(data_key=, position=) dentro de funnel. Puedes poner varios.
funnel_chart recibe on_click, on_mouse_enter y on_mouse_leave.
Con el on_click de funnel y data en State se redibuja el embudo.
animation_begin, animation_duration y animation_easing definen cómo se dibuja.

← Anterior

Gráficos · Scatter Chart

Gráficos · Treemap

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