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

Pie Chart

rx.recharts.pie_chartrx.recharts.pierx.recharts.cell

Documentación oficial

Pedido del taller

Muestra en forma de dónut el reparto de navegadores de los visitantes del mes pasado, con el nombre y el valor visibles en cada porción.

rx.recharts.pie_chart toma el total como 100 y lo divide en porciones según la parte que ocupa cada elemento. Se usa cuando hay cinco o seis porciones como mucho y lo importante es «cuánto del total». A diferencia de otros gráficos, data no se le da al contenedor sino a rx.recharts.pie. data_key es el tamaño de la porción y name_key, su nombre.

Si pones "fill" en un dict de los datos, solo esa porción toma ese color; si no, se usa el fill de pie.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Group A", "value": 400},
            {"name": "Group B", "value": 300, "fill": rx.color("teal", 9)},
            {"name": "Group C", "value": 300, "fill": rx.color("orange", 9)},
            {"name": "Group D", "value": 200, "fill": rx.color("plum", 9)},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 9),
        label=True,
    ),
    width="100%",
    height=300,
)

Prueba las propiedades

Si inner_radius es mayor que 0, el centro queda vacío y sale un dónut. Los radios se indican con un número (píxeles) o una cadena de porcentaje.

Prueba las propiedades

inner_radius

outer_radius

color

label

label_line

legend_type

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Chrome", "value": 275},
            {"name": "Safari", "value": 150},
            {"name": "Firefox", "value": 100},
            {"name": "Edge", "value": 130},
        ],
        data_key="value",
        name_key="name",
        inner_radius="0%",
        outer_radius="80%",
        fill=rx.color("indigo", 8),
        stroke=rx.color("gray", 1),
        label=True,
        label_line=True,
        legend_type="rect",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

Con label activado aparece el valor fuera de cada porción; label_line es la línea que une la porción con su valor. legend_type es la forma del icono de la leyenda.

Propiedad	Valores	Por defecto	Uso
`pie_chart(width=, height=, margin=)`	número o porcentaje / dict	`"100%"`	Tamaño y margen del gráfico. Aquí no va `data`
`pie(data=)`	lista de dicts	ninguno	Datos de las porciones
`pie(data_key=, name_key=)`	cadena	ninguno / `"name"`	Claves del tamaño y del nombre de la porción
`pie(cx=, cy=)`	número o porcentaje	`"50%"`	Posición del centro
`pie(inner_radius=, outer_radius=)`	número o porcentaje	`0` / `"80%"`	Radio interior y exterior. Si el interior es mayor que 0, es un dónut
`pie(start_angle=, end_angle=)`	número (grados)	`0` / `360`	Rango de ángulos que se dibuja. Con `180` y `0`, un semicírculo
`pie(padding_angle=, min_angle=)`	número (grados)	`0`	Separación entre porciones; ángulo mínimo de las porciones pequeñas
`pie(fill=, stroke=)`	color	accent 3 / accent 9	Color de la porción y del borde
`pie(label=, label_line=)`	`True` / `False` / dict	`False`	Mostrar valores y líneas de unión
`pie(legend_type=)`	`"rect"` `"circle"` … `"none"`	`"rect"`	Icono de la leyenda
`pie(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `400` / `1500` / `"ease"`	Animación de entrada
`cell(fill=, stroke=)`	color		Color de una sola porción dentro de `pie`
Eventos	`on_click` `on_mouse_enter` `on_mouse_leave` …		Los reciben `pie_chart`, `pie` y `cell`

Dos pies superpuestos

Si pones dos pie, se dibujan superpuestos con el mismo centro. Haz pequeño el pie interior con outer_radius="50%" y vacía el centro del anillo exterior con inner_radius="60%": así comparas dos conjuntos de datos en una sola imagen. padding_angle separa las porciones tantos grados como indiques.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 400},
            {"name": "Q2", "value": 300},
            {"name": "Q3", "value": 300},
            {"name": "Q4", "value": 200},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("teal", 8),
        inner_radius="60%",
        padding_angle=5,
    ),
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 2400},
            {"name": "Q2", "value": 4567},
            {"name": "Q3", "value": 1398},
            {"name": "Q4", "value": 9800},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 8),
        outer_radius="50%",
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Un color por porción (cell)

Sin poner colores en los datos, puedes definirlos metiendo dentro de pie tantas rx.recharts.cell como porciones haya. Recorre los datos con rx.foreach para crear las cell y elige el color número index de una lista. El orden de las cell es el orden de las porciones. Si pones stroke del color del fondo y engordas el borde, aparece un hueco entre porciones.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create(["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"])[index % 5],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="40%",
        outer_radius="80%",
        padding_angle=2,
        stroke="#fff",
        custom_attrs={"strokeWidth": 2},
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Relleno con degradado

Define un radial_gradient en un rx.el.svg de tamaño 0 y apúntalo desde el fill de cada cell con url(#id). Aunque la definición del degradado esté fuera del gráfico, se encuentra siempre que esté en la misma página. Elige id que no se repitan en la página.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.box(
    rx.el.svg(
        rx.el.svg.defs(
            *[
                rx.el.svg.radial_gradient(
                    rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1),
                    rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6),
                    id=f"piechart_grad_{i}",
                    cx="50%",
                    cy="50%",
                    r="50%",
                )
                for i, color in enumerate(["#6366F1", "#8B5CF6", "#EC4899", "#F59E0B"])
            ],
        ),
        width=0,
        height=0,
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            *[rx.recharts.cell(fill=f"url(#piechart_grad_{i})") for i in range(4)],
            data=piechart_data[:4],
            data_key="value",
            name_key="name",
            inner_radius="60%",
            outer_radius="80%",
            padding_angle=5,
            stroke="#fff",
            custom_attrs={"strokeWidth": 2},
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=300,
    ),
    width="100%",
)

Datos que cambian con State

Si das un valor de State al data de pie, el tamaño de las porciones cambia cada vez que cambian los números. Con start_angle=180 y end_angle=0 hacemos un gráfico de semicírculo y bajamos el centro (cy="80%").

Wood 3

Stone 2

Gold 1

Food 4

from typing import Any


class PieChartStockState(rx.State):
    stock: list[dict[str, Any]] = [
        {"item": "Wood", "count": 3},
        {"item": "Stone", "count": 2},
        {"item": "Gold", "count": 1},
        {"item": "Food", "count": 4},
    ]

    @rx.event
    def change(self, item: str, delta: int):
        self.stock = [
            {**row, "count": max(0, row["count"] + delta)} if row["item"] == item else row
            for row in self.stock
        ]


rx.vstack(
    rx.recharts.pie_chart(
        rx.recharts.pie(
            data=PieChartStockState.stock,
            data_key="count",
            name_key="item",
            cx="50%",
            cy="80%",
            start_angle=180,
            end_angle=0,
            fill=rx.color("accent", 8),
            label=True,
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=240,
    ),
    rx.flex(
        rx.foreach(
            PieChartStockState.stock,
            lambda row: rx.hstack(
                rx.button("-", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), -1)),
                rx.text(row["item"], " ", row["count"], size="2"),
                rx.button("+", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), 1)),
                align="center",
            ),
        ),
        spacing="4",
        wrap="wrap",
    ),
    align="center",
    width="100%",
)

Al pasar el ratón (eventos hover)

Pasa el index de la porción al on_mouse_enter de cell y bórralo en on_mouse_leave. El valor y el nombre de la porción elegida se muestran con un texto superpuesto en el centro del dónut. Al cuadro de texto se le da pointer_events="none" para que el ratón llegue a las porciones.

Hover a slice

class PieChartHoverState(rx.State):
    languages: list[dict[str, str | int]] = [
        {"name": "Python", "value": 35},
        {"name": "JavaScript", "value": 25},
        {"name": "Java", "value": 20},
        {"name": "C++", "value": 15},
        {"name": "Ruby", "value": 5},
    ]
    hovered_name: str = ""
    hovered_value: int = 0

    @rx.event
    def enter(self, index: int):
        self.hovered_name = str(self.languages[index]["name"])
        self.hovered_value = int(self.languages[index]["value"])

    @rx.event
    def leave(self):
        self.hovered_name, self.hovered_value = "", 0


rx.box(
    rx.vstack(
        rx.cond(
            PieChartHoverState.hovered_name != "",
            rx.fragment(
                rx.heading(PieChartHoverState.hovered_value, "%", size="7"),
                rx.text(PieChartHoverState.hovered_name, size="2"),
            ),
            rx.text("Hover a slice", size="2", color_scheme="gray"),
        ),
        align="center",
        spacing="1",
        position="absolute",
        top="50%",
        left="50%",
        transform="translate(-50%, -50%)",
        pointer_events="none",
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            rx.foreach(
                PieChartHoverState.languages,
                lambda item, index: rx.recharts.cell(
                    fill=rx.Var.create(["#2B79D1", "#2469B3", "#1E5AA1", "#3D8EE1", "#61A9E4"])[index % 5],
                    on_mouse_enter=PieChartHoverState.enter(index),
                    on_mouse_leave=PieChartHoverState.leave,
                ),
            ),
            data=PieChartHoverState.languages,
            data_key="value",
            name_key="name",
            inner_radius=90,
            stroke="0",
        ),
        width="100%",
        height=300,
    ),
    position="relative",
    width="100%",
)

Completar el pedido

Dibujamos cinco navegadores en un dónut y con cell pintamos cada porción con un color en un orden fijo. El último, «Other», va en gris para restarle protagonismo. El valor se lee en label, y el nombre, en la leyenda y el tooltip.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create([
                    rx.color("indigo", 9), rx.color("teal", 9), rx.color("orange", 9),
                    rx.color("plum", 9), rx.color("gray", 8),
                ])[index],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="55%",
        outer_radius="80%",
        padding_angle=2,
        stroke=rx.color("gray", 1),
        label=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

Notas del taller

data no se le da a pie_chart sino a pie. data_key es el tamaño; name_key, el nombre.
Con inner_radius > 0 es un dónut; con start_angle y end_angle, un semicírculo.
El color de las porciones sale de la clave "fill" de los datos o de rx.recharts.cell metidas en pie con foreach.
Dos pie se superponen con el mismo centro. Repártete el espacio con outer_radius e inner_radius.
Con on_mouse_enter(index) de cell puedes guardar en State la porción elegida.

← Anterior

Gráficos · Composed Chart

Gráficos · Radar Chart

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