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

Composed Chart

rx.recharts.composed_chart

Documentación oficial

Pedido del taller

Superpón en un mismo gráfico los pedidos mensuales como barras y el objetivo como línea discontinua, para que se vea al instante qué meses lo superaron.

rx.recharts.composed_chart es un contenedor que mezcla en un mismo gráfico áreas (area), barras (bar) y líneas (line). Se usa cuando un solo tipo de gráfico no basta para contarlo todo, por ejemplo, los valores reales en barras y el objetivo o la media en una línea. Los hijos se dibujan en el orden en que los escribes, así que las series de después quedan encima de las de antes.

Los ejemplos usan el composedchart_data de abajo.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

Prueba las propiedades

El gráfico compuesto tiene a la vez las propiedades de espaciado del gráfico de barras y el base_value del gráfico de áreas. base_value es el fondo desde el que empieza el área. Con "dataMin" empieza en el valor más pequeño de los datos y el área parece flotar hacia arriba.

Prueba las propiedades

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_value solo afecta a area y bar_category_gap solo a bar. Las propiedades de un mismo contenedor se reparten según el tipo de serie.

Propiedad	Valores	Por defecto	Uso
`data`	lista de dicts	ninguno	Datos que comparten todas las series
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	Dirección del flujo
`base_value`	número, `"dataMin"` `"dataMax"` `"auto"`	`"auto"`	Valor de fondo de `area`
`bar_category_gap`	porcentaje o número	`"10%"`	Espacio entre elementos (`bar`)
`bar_gap`	número	`4`	Espacio entre barras del mismo elemento (`bar`)
`bar_size`	número	automático	Grosor de todas las barras
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	ninguno	Cálculo de la base de las series apiladas
`reverse_stack_order`	`True` / `False`	`False`	Invierte el orden de apilado
`sync_id`, `sync_method`	cadena / `"index"` `"value"`	ninguno / `"index"`	Sincroniza tooltip y brush con otros gráficos
`margin`, `width`, `height`	dict / número o porcentaje		Margen alrededor y tamaño
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	eventos		Eventos de ratón sobre el área del gráfico

Las propiedades de area, bar y line son las mismas que en la página de cada gráfico. En 0.10, el bar_gap de composed_chart solo acepta números (bar_chart también acepta cadenas de porcentaje).

Cuándo usar un gráfico compuesto

Cuando quieres ver juntos los valores reales (barras) y un objetivo, una media o una tendencia (línea)
Cuando comparas sobre el mismo eje x valores de naturaleza distinta, como una cantidad (área) y el número de sucesos dentro de ella (barras)

Todas las series comparten el mismo data, los mismos ejes y el mismo tooltip y leyenda. Por eso un único tooltip muestra a la vez el valor de la barra y el de la línea.

El orden de dibujo

Los hijos se apilan de abajo arriba en el orden en que los escribes. En el gráfico de arriba van primero las barras; en el de abajo, primero el área. Si un área oscura va después, tapa las barras, así que lo normal es escribir primero las series que pintan mucha superficie.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

Dos ejes

Con valores de magnitudes muy distintas, como pedidos (decenas) y ventas (miles), en un mismo eje uno de ellos queda aplastado en el fondo. Coloca un segundo eje y a la derecha con orientation="right" y empareja series y ejes con y_axis_id. Con dos escalas es fácil leer mal, así que deja claro con la leyenda y el color de los ejes qué valor va con qué eje.

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

Completar el pedido

Superponemos los pedidos como barras y el objetivo como una line discontinua. Escribimos la línea después de las barras para que se dibuje encima, y quitamos los puntos con dot=False para que parezca una línea de referencia.

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

Notas del taller

Un solo composed_chart mezcla area, bar y line. Datos, ejes y tooltip son compartidos.
El hijo escrito después se dibuja encima. Las series que pintan mucha superficie, primero.
base_value se aplica a area; bar_category_gap, bar_gap y bar_size, a bar.
Los valores de otra magnitud van a un segundo eje con y_axis_id. Solo cuando haga falta.
La sincronización con otros gráficos mediante sync_id funciona igual que en la página Area Chart.

← Anterior

Gráficos · Line Chart

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