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

Radar Chart

rx.recharts.radar_chartrx.recharts.radarrx.recharts.polar_gridrx.recharts.polar_angle_axisrx.recharts.polar_radius_axis

Documentación oficial

Pedido del taller

Superpón en forma de telaraña las notas por asignatura de dos estudiantes, para que se vea de un vistazo quién es fuerte en qué.

rx.recharts.radar_chart marca la puntuación de varios elementos sobre ejes que salen del centro y los une para mostrarlos como un polígono. Se usa para comparar la «forma» de algo a partir de cinco o seis elementos medidos con el mismo criterio. Al gráfico le das data y pones un rx.recharts.radar(data_key=…) por serie.

Los gráficos circulares usan piezas polares en lugar de ejes cartesianos. polar_grid es la cuadrícula en telaraña, polar_angle_axis muestra los nombres de los elementos alrededor y polar_radius_axis es la escala que va del centro hacia fuera.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(data_key="Mina", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    width="100%",
    height=300,
)

Prueba las propiedades

Cambia la intensidad del relleno (fill_opacity), los puntos de los vértices (dot), la forma de la cuadrícula (grid_type) y los radios interior y exterior del gráfico. Los datos son el radarchart_data de arriba.

Prueba las propiedades

color

fill_opacity

0.6

dot

grid_type

inner_radius

outer_radius

rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 8),
        fill_opacity=0.6,
        dot=False,
    ),
    rx.recharts.polar_grid(grid_type="polygon"),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    inner_radius="0%",
    outer_radius="80%",
    width="100%",
    height=300,
)

Si aumentas inner_radius, el centro queda vacío y se aprecian mejor las diferencias entre valores pequeños. grid_type="circle" dibuja la cuadrícula con círculos.

Propiedad	Valores	Por defecto	Uso
`radar_chart(data=)`	lista de dicts	ninguno	Un dict por elemento
`radar_chart(cx=, cy=)`	número o porcentaje	`"50%"`	Posición del centro
`radar_chart(inner_radius=, outer_radius=)`	número o porcentaje	`0` / `"80%"`	Radio de la cuadrícula interior y exterior
`radar_chart(start_angle=, end_angle=)`	número (grados)	`90` / `-270`	Ángulo del primer eje y sentido de giro
`radar_chart(margin=)`	dict	0	Margen alrededor
`radar(data_key=)`	cadena	ninguno	Clave del valor que se dibuja
`radar(stroke=, fill=, fill_opacity=)`	color / 0~1	accent 9 / accent 3 / `0.6`	Borde, relleno e intensidad del relleno
`radar(dot=)`	`True` / `False` / dict	ninguno	Puntos en los vértices
`radar(legend_type=, label=)`	icono de leyenda / bool	`"rect"`	Forma de la leyenda; mostrar valores
`radar(animation_begin=, animation_duration=, animation_easing=)`	ms / ms / `"ease"` …	`0` / `1500` / `"ease"`	Animación de entrada
`polar_grid(grid_type=)`	`"polygon"` `"circle"`	`"polygon"`	Forma de la cuadrícula
`polar_radius_axis(angle=, domain=)`	número / `[mín, máx]`		Dirección y rango del eje de escala
Eventos	`on_click` `on_mouse_enter` `on_mouse_leave`		En el gráfico. `radar` también tiene `on_animation_start` y `on_animation_end`

Varios radares superpuestos

Si pones dos radar, los polígonos se superponen sobre la misma cuadrícula. La serie escrita después se dibuja encima, así que baja fill_opacity para que se transparente también la de abajo. Con inner_radius y outer_radius del gráfico decides el tamaño del dibujo y el hueco del centro.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.6,
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    inner_radius="15%",
    outer_radius="80%",
    width="100%",
    height=300,
)

Puntos, leyenda y animación

dot=True marca un punto en cada vértice y legend_type="line" cambia el icono de la leyenda por una línea. Con animation_begin, animation_duration y animation_easing defines el movimiento al dibujarse por primera vez. El ejemplo de abajo se despliega despacio a lo largo de 4 segundos.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        dot=True,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.6,
        legend_type="line",
        animation_begin=0,
        animation_duration=4000,
        animation_easing="ease-in",
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=300,
)

Datos que cambian con State

En este ejemplo repartes 100 puntos entre cinco atributos. Al mover un deslizador cambian los traits de State y el gráfico se redibuja al momento. El manejador impide subir más de lo que quedan puntos. tick=False y axis_line=False en polar_radius_axis ocultan la escala y dejan solo la forma.

Strength

Speed

Stamina

Wisdom

Charm

Remaining: 25

from typing import Any


class RadarChartTraitState(rx.State):
    budget: int = 100
    traits: list[dict[str, Any]] = [
        {"trait": "Strength", "value": 15},
        {"trait": "Speed", "value": 15},
        {"trait": "Stamina", "value": 15},
        {"trait": "Wisdom", "value": 15},
        {"trait": "Charm", "value": 15},
    ]

    @rx.var
    def remaining(self) -> int:
        return self.budget - sum(t["value"] for t in self.traits)

    @rx.event
    def set_trait(self, trait: str, value: list[float]):
        new = int(value[0])
        rows = []
        for t in self.traits:
            if t["trait"] == trait:
                new = min(new, self.remaining + t["value"])
                t = {**t, "value": new}
            rows.append(t)
        self.traits = rows


rx.flex(
    rx.box(
        rx.recharts.radar_chart(
            rx.recharts.radar(data_key="value", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
            rx.recharts.polar_grid(),
            rx.recharts.polar_angle_axis(data_key="trait"),
            rx.recharts.polar_radius_axis(domain=[0, 100], tick=False, axis_line=False),
            data=RadarChartTraitState.traits,
            width="100%",
            height=260,
        ),
        flex="1 1 240px",
    ),
    rx.vstack(
        rx.foreach(
            RadarChartTraitState.traits,
            lambda t: rx.hstack(
                rx.text(t["trait"], size="2", width="5em"),
                rx.slider(
                    value=[t["value"].to(int)],
                    max=100,
                    on_change=lambda v: RadarChartTraitState.set_trait(t["trait"].to(str), v),
                    width="10em",
                ),
                rx.text(t["value"], size="2"),
                align="center",
            ),
        ),
        rx.text("Remaining: ", RadarChartTraitState.remaining, size="2", weight="bold"),
        flex="1 1 240px",
    ),
    spacing="4",
    wrap="wrap",
    align="center",
    width="100%",
)

Completar el pedido

Las claves de los datos llevan el nombre de cada estudiante ("Mina", "Joon"), y ese nombre aparece tal cual en la leyenda y el tooltip. En 0.10, radar no tiene la propiedad name, así que lo más sencillo es elegir claves que se lean bien. Los dos se pintan suaves con fill_opacity=0.4 para que la zona superpuesta también se lea, y las series se distinguen a la vez por color y por puntos.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150], tick=False, axis_line=False),
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=320,
)

Notas del taller

Dentro de radar_chart(data=…) van radar(data_key=…) y polar_grid, polar_angle_axis y polar_radius_axis.
polar_angle_axis(data_key=) da los nombres de alrededor; polar_radius_axis(domain=), el rango de la escala.
Para varias series, varios radar. Baja fill_opacity para que se vea la superposición.
inner_radius, outer_radius, start_angle y end_angle del gráfico deciden forma y orientación.
Con un valor de State en data, el polígono cambia al instante con entradas como un deslizador.

← Anterior

Gráficos · Pie Chart

Gráficos · Radial Bar 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