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

Error Bar

rx.recharts.error_bar

Documentación oficial

Pedido del taller

Añade a las barras de nota media de cada clase unas barras de error que muestren hasta dónde se dispersan las notas.

rx.recharts.error_bar es una pieza que superpone a un valor unos «bigotes» que indican el margen de error: «puede variar más o menos esto». Se usa para mostrar también la incertidumbre, como en mediciones, medias con su desviación típica o rangos de predicción. No se usa sola: se mete como hija de la serie a la que se añade el error (scatter, line, bar).

data_key es la clave de la que se lee el tamaño del error en los datos. En un diagrama de dispersión, direction="y" da un error vertical y direction="x", uno horizontal; también puedes poner los dos.

errorbar_data = [
    {"x": 45, "y": 100, "errorY": [30, 20], "errorX": 5},
    {"x": 100, "y": 200, "errorY": [20, 30], "errorX": 3},
    {"x": 120, "y": 100, "errorY": 20, "errorX": [5, 3]},
    {"x": 170, "y": 300, "errorY": [15, 18], "errorX": 4},
    {"x": 140, "y": 250, "errorY": 23, "errorX": [6, 7]},
    {"x": 150, "y": 400, "errorY": [21, 10], "errorX": 4},
    {"x": 110, "y": 280, "errorY": 21, "errorX": [5, 6]},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(data_key="errorY", direction="y", width=4, stroke_width=2, stroke=rx.color("red", 9)),
        rx.recharts.error_bar(data_key="errorX", direction="x", width=4, stroke_width=2),
        data=errorbar_data,
        fill=rx.color("accent", 9),
        name="A",
    ),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    width="100%",
    height=300,
)

Prueba las propiedades

Cambia la dirección, el color y el grosor de las barras de error. Estos datos usan un mismo valor de error (err) para las dos direcciones.

Prueba las propiedades

direction

color

stroke_width

1.5

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(
            data_key="err",
            direction="y",
            stroke=rx.color("red", 9),
            stroke_width=1.5,
        ),
        data=[
            {"x": 10, "y": 30, "err": 4},
            {"x": 20, "y": 45, "err": [6, 2]},
            {"x": 30, "y": 38, "err": 3},
            {"x": 40, "y": 60, "err": [2, 8]},
            {"x": 50, "y": 52, "err": 5},
        ],
        fill=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="x", type_="number", domain=[0, 60]),
    rx.recharts.y_axis(data_key="y", type_="number", domain=[0, 80]),
    width="100%",
    height=280,
)

direction solo se puede elegir en el diagrama de dispersión. En gráficos de barras y de líneas se dibuja en la dirección del eje de valores.

Propiedad	Valores	Por defecto	Uso
`data_key`	cadena	ninguno	Clave del tamaño del error. El valor es un número o `[abajo, arriba]`
`direction`	`"x"` `"y"`	ninguno	Dirección del error en el diagrama de dispersión
`width`	número	`5`	Longitud de la línea horizontal al final del bigote (píxeles)
`stroke`	color	gray 8	Color de la línea
`stroke_width`	número	`1.5`	Grosor de la línea

error_bar se mete dentro de scatter, line o bar. En 0.10 no se puede poner dentro de area.

Error simétrico y asimétrico

Si el error es un solo número (20), se dibuja la misma longitud por encima y por debajo del valor (o a izquierda y derecha). Si das dos, como [30, 20], el primero es la longitud hacia abajo (izquierda) y el segundo hacia arriba (derecha). El errorbar_data del primer ejemplo mezcla las dos formas: el primer punto tiene 30 hacia abajo y 20 hacia arriba, y el tercero, 20 hacia cada lado.

Error en un gráfico de líneas

Si metes error_bar dentro de line, cada punto de la línea lleva un error vertical. Muestra, junto a cada valor, cuánto puede variar, como en las temperaturas medias mensuales.

rx.recharts.line_chart(
    rx.recharts.line(
        rx.recharts.error_bar(
            data_key="error",
            direction="y",
            width=4,
            stroke_width=2,
            stroke=rx.color("accent", 9),
        ),
        data_key="temp",
        stroke=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=[
        {"month": "Jan", "temp": 7, "error": [2, 3]},
        {"month": "Feb", "temp": 9, "error": 2},
        {"month": "Mar", "temp": 12, "error": [3, 2]},
        {"month": "Apr", "temp": 16, "error": 3},
        {"month": "May", "temp": 20, "error": [2, 4]},
        {"month": "Jun", "temp": 24, "error": 3},
    ],
    width="100%",
    height=280,
)

Completar el pedido

Levantamos en barras la nota media de cada clase y metemos error_bar dentro de bar para marcar la dispersión de las notas. Class B y Class D tienen errores asimétricos, con longitudes distintas hacia abajo y hacia arriba. Los bigotes se dibujan en un gris más oscuro que las barras para que se vean aunque se superpongan a su color.

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(
        rx.recharts.error_bar(data_key="spread", width=6, stroke_width=1.5, stroke=rx.color("gray", 12)),
        data_key="score",
        name="Average score",
        fill=rx.color("accent", 8),
        radius=[4, 4, 0, 0],
        max_bar_size=40,
    ),
    rx.recharts.x_axis(data_key="group"),
    rx.recharts.y_axis(domain=[0, 100]),
    rx.recharts.graphing_tooltip(),
    data=[
        {"group": "Class A", "score": 72, "spread": 8},
        {"group": "Class B", "score": 65, "spread": [12, 6]},
        {"group": "Class C", "score": 81, "spread": 5},
        {"group": "Class D", "score": 58, "spread": [9, 14]},
    ],
    width="100%",
    height=300,
)

Notas del taller

error_bar se mete como hijo dentro de scatter, line o bar.
Si el valor de data_key es un solo número, el error es simétrico; con [abajo, arriba], asimétrico.
En el diagrama de dispersión, direction="x"/"y" fija la dirección, y puedes poner los dos.
width es la longitud del extremo del bigote; stroke y stroke_width, el color y el grosor de la línea.

← Anterior

Gráficos · Sankey Chart

Piezas de gráficos · Axis

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