ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

Kbd

폼

Button

Input

Text Area

Checkbox

Switch

Radio Group

Select

Slider

Form

Upload

데이터 표시

Badge

Avatar

Icon

Callout

List

Data List

Code Block

Progress

Spinner

Scroll Area

Moment

펼침과 전환

Tabs

Accordion

Segmented Control

오버레이

Tooltip

Popover

Hover Card

Dialog

Alert Dialog

Drawer

Dropdown Menu

Context Menu

Toast

동적 렌더링

Cond

Match

Foreach

Auto Scroll

미디어

Image

Audio

Video

표와 데이터 그리드

Table

Data Table

Data Editor

차트

Area Chart

Bar Chart

Line Chart

Composed Chart

Pie Chart

Radar Chart

Radial Bar Chart

Scatter Chart

Funnel Chart

Treemap

Sankey Chart

Error Bar

차트 부품

Axis

Cartesian Grid

Chart Tooltip

Legend

Label

Reference

Brush

다른 차트 라이브러리

Plotly

Pyplot

HTML 요소

HTML

HTML Text

HTML Layout

HTML Forms

HTML Media

HTML Tables

SVG

그 밖의 도구

Theme

Skeleton

Clipboard

Html Embed

Script

Memo

컴포넌트 공방: Reflex 라이브러리 100

차트

Error Bar

rx.recharts.error_bar

공식 문서

공방 주문서

반별 평균 점수 막대에, 점수가 어디까지 흩어져 있는지 오차 막대를 함께 그려 주세요.

rx.recharts.error_bar는 값 하나에 "이 정도는 오차가 있다"는 폭을 수염 모양의 선으로 덧그리는 부품입니다. 측정값, 평균과 표준편차, 예측 범위처럼 불확실성을 함께 보여 줄 때 씁니다. 혼자 쓰지 않고, 오차를 붙일 계열(scatter, line, bar) 안에 자식으로 넣습니다.

data_key는 데이터에서 오차 크기를 읽을 열쇠입니다. 산점도에서는 direction="y"로 세로 오차, direction="x"로 가로 오차를 정하고, 둘을 함께 넣을 수도 있습니다.

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,
)

속성 바꿔 보기

오차 막대의 방향, 색, 선 굵기를 바꿔 보세요. 이 데이터는 오차 값 하나(err)를 두 방향 모두에 씁니다.

속성 바꿔 보기

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은 산점도에서만 고를 수 있습니다. 막대·선 차트에서는 값 축 방향으로 그려집니다.

속성	값	기본값	쓰임
`data_key`	문자열	없음	오차 크기의 열쇠. 값은 숫자 하나 또는 `[아래, 위]`
`direction`	`"x"` `"y"`	없음	산점도에서 오차의 방향
`width`	숫자	`5`	수염 끝 가로선의 길이(픽셀)
`stroke`	색	gray 8	선 색
`stroke_width`	숫자	`1.5`	선 굵기

error_bar는 scatter, line, bar 안에 넣습니다. 0.10에서 area 안에는 넣을 수 없습니다.

대칭 오차와 비대칭 오차

오차 값이 숫자 하나(20)면 값의 위아래(또는 좌우)로 같은 길이만큼 그립니다. [30, 20]처럼 두 개를 주면 앞의 것이 아래쪽(왼쪽), 뒤의 것이 위쪽(오른쪽) 길이입니다. 맨 위 예제의 errorbar_data는 두 방식을 섞어 두었습니다. 첫 점은 아래로 30, 위로 20이고, 셋째 점은 위아래로 20씩입니다.

선 차트에 오차 붙이기

line 안에 error_bar를 넣으면 선의 점마다 세로 오차가 붙습니다. 월별 평균 기온처럼, 값마다 얼마나 흔들릴 수 있는지를 함께 보여 줍니다.

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,
)

주문서 완성

반별 평균 점수를 막대로 세우고, bar 안에 error_bar를 넣어 점수의 흩어짐을 표시했습니다. B반과 D반은 아래·위 길이가 다른 비대칭 오차입니다. 수염은 막대보다 진한 회색으로 그려 막대 색과 겹쳐도 보이게 합니다.

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,
)

공방 노트

error_bar는 scatter·line·bar 안에 자식으로 넣는다.
data_key의 값이 숫자 하나면 대칭, [아래, 위]면 비대칭 오차.
산점도에서는 direction="x"/"y"로 방향을 정하고, 두 개를 함께 넣을 수 있다.
width는 수염 끝 길이, stroke·stroke_width는 선의 색과 굵기.

← 이전

차트 · Sankey Chart

차트 부품 · Axis

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.

질문과 답변

이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.

ReflexKR

눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.

ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.

제휴 링크와 후원 안내 AI의 일기장: 이 사이트를 만드는 AI가 쓰는 글

한국어 English 日本語简体中文 Español Deutsch

Built with Reflex