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

Radial Bar Chart

rx.recharts.radial_bar_chartrx.recharts.radial_bar

Documentación oficial

Pedido del taller

Muestra con barras de progreso circulares el porcentaje de objetivo cumplido este trimestre por tres equipos, de forma que quepa en una celda del panel.

rx.recharts.radial_bar_chart dibuja las barras curvadas siguiendo un círculo en lugar de rectas. La longitud de la barra (su ángulo) es el tamaño del valor, y cada barra está a una distancia distinta del centro. Se usa cuando hay pocos elementos y poco espacio, o para mostrar el progreso respecto a un objetivo.

Si pones "fill" en un dict de los datos, ese será el color de su barra. min_angle hace que hasta los valores muy pequeños se vean al menos con ese ángulo.

radialbarchart_data = [
    {"name": "Mon", "x": 3, "fill": rx.color("cyan", 9)},
    {"name": "Tue", "x": 4, "fill": rx.color("blue", 9)},
    {"name": "Wed", "x": 5, "fill": rx.color("orange", 9)},
    {"name": "Thu", "x": 6, "fill": rx.color("red", 9)},
    {"name": "Fri", "x": 7, "fill": rx.color("gray", 9)},
    {"name": "Sat", "x": 8, "fill": rx.color("green", 9)},
]


rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(data_key="x", min_angle=15),
    data=radialbarchart_data,
    width="100%",
    height=320,
)

Prueba las propiedades

inner_radius y outer_radius del gráfico fijan el borde interior y exterior del anillo donde van las barras, y bar_category_gap es el espacio entre barras. Al activar background se ve suavemente el hueco que ocuparía cada barra llena.

Prueba las propiedades

inner_radius

outer_radius

bar_category_gap

background

label

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="x",
        min_angle=15,
        background=False,
        label=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=radialbarchart_data,
    inner_radius="30%",
    outer_radius="100%",
    bar_category_gap="10%",
    width="100%",
    height=320,
)

Con label activado, cada barra muestra su valor. Los datos son el radialbarchart_data de arriba.

Propiedad	Valores	Por defecto	Uso
`radial_bar_chart(data=)`	lista de dicts	ninguno	Un dict por barra. El color, con la clave `"fill"`
`radial_bar_chart(cx=, cy=)`	número o porcentaje	`"50%"`	Posición del centro
`radial_bar_chart(inner_radius=, outer_radius=)`	número o porcentaje	`"30%"` / `"100%"`	Anillo donde van las barras
`radial_bar_chart(start_angle=, end_angle=)`	número (grados)	`0` / `360`	Rango y sentido de giro de las barras
`radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=)`	porcentaje o número	`"10%"` / `4` / automático	Espaciado y grosor de las barras
`radial_bar_chart(margin=)`	dict	5 por lado	Margen alrededor
`radial_bar(data_key=)`	cadena	ninguno	Valor que da la longitud de la barra
`radial_bar(min_angle=)`	número (grados)	ninguno	Ángulo mínimo de los valores pequeños
`radial_bar(background=)`	`True` / `False` / dict	ninguno	Fondo del hueco vacío
`radial_bar(label=)`	`True` / `False` / dict	ninguno	Mostrar valores. Con un dict, `fill` y `position`
`radial_bar(legend_type=)`	icono de leyenda		Forma de la leyenda
`radial_bar(animation_begin=, animation_duration=, animation_easing=)`			Animación de entrada
Eventos	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		Eventos de ratón sobre el área del gráfico

Semicírculo y etiquetas (ejemplo avanzado)

Con start_angle=180 y end_angle=0, las barras trazan un semicírculo de izquierda a derecha. Si das un dict a label, puedes fijar el color (fill) y la posición (position) del texto del valor; "insideStart" coloca el texto dentro de la barra, en el lado donde empieza. background=True pone una pista vacía detrás de las barras.

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="uv",
        min_angle=90,
        background=True,
        label={"fill": "#666", "position": "insideStart"},
    ),
    data=[
        {"name": "18-24", "uv": 31.47, "fill": "#8884d8"},
        {"name": "25-29", "uv": 26.69, "fill": "#83a6ed"},
        {"name": "30-34", "uv": 15.69, "fill": "#8dd1e1"},
        {"name": "35-39", "uv": 8.22, "fill": "#82ca9d"},
        {"name": "40-49", "uv": 8.63, "fill": "#a4de6c"},
        {"name": "50+", "uv": 2.63, "fill": "#d0ed57"},
    ],
    inner_radius="10%",
    outer_radius="80%",
    start_angle=180,
    end_angle=0,
    width="100%",
    height=300,
)

Indicador de progreso

Para mostrar los valores como «tanto sobre 100», hay que fijar el rango del eje angular. Si le das al eje angular polar_angle_axis un eje numérico (type: "number") y un rango (domain: [0, 100]), una vuelta completa vale 100. En 0.10, polar_angle_axis no tiene estas dos propiedades por separado, así que se pasan tal cual a Recharts con custom_attrs. Sin este eje, el valor más grande llena la vuelta entera. start_angle=90 y end_angle=-270 empiezan en las 12 y giran en el sentido de las agujas del reloj.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="value",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "center"},
    ),
    data=[{"name": "Goal", "value": 72, "fill": rx.color("accent", 9)}],
    inner_radius="70%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=220,
)

Cuándo usarlo

Cuando hay que meter el tamaño de unos pocos elementos en un espacio estrecho, como una celda de un panel
Cuando quieres mostrar superpuestos varios progresos respecto a un objetivo

Como la longitud de la barra es un ángulo, una barra exterior y una interior con el mismo valor parecen de longitudes distintas. Si necesitas comparar valores con precisión, mejor un gráfico de barras. La forma se ajusta con inner_radius, outer_radius, start_angle, end_angle y bar_size.

Completar el pedido

Fijamos el eje angular de 0 a 100 y dibujamos con el mismo criterio el porcentaje cumplido de los tres equipos. La leyenda va en vertical a la derecha para leer los nombres de los equipos, y label pone el número dentro de cada barra.

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="done",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "insideStart"},
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(icon_size=10, layout="vertical", vertical_align="middle", align="right"),
    data=[
        {"name": "Sales", "done": 82, "fill": rx.color("indigo", 9)},
        {"name": "Support", "done": 64, "fill": rx.color("teal", 9)},
        {"name": "Design", "done": 45, "fill": rx.color("orange", 9)},
    ],
    inner_radius="30%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=280,
)

Notas del taller

Dentro de radial_bar_chart(data=…) pon radial_bar(data_key=…). El color de cada barra es el "fill" de los datos.
El anillo lo dan inner_radius y outer_radius; la dirección, start_angle y end_angle (de 180 a 0, semicírculo).
min_angle hace visibles los valores pequeños; background=True pone la pista vacía.
Para progresos, fija una vuelta en 100 con polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}).
Si hace falta comparar con precisión, usa un gráfico de barras.

← Anterior

Gráficos · Radar Chart

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