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

차트 부품

Brush

rx.recharts.brush

공식 문서

공방 주문서

30일치 주문을 한 차트에 담되, 처음에는 마지막 일주일만 크게 보이고 손잡이로 구간을 옮길 수 있게 해 주세요.

rx.recharts.brush는 차트 아래에 붙는 구간 선택 막대입니다. 양쪽 손잡이를 끌어 보고 싶은 데이터 범위를 고르면, 위의 차트가 그 범위만 크게 그립니다. 데이터 점이 많아 한 화면에 다 담기 어려울 때 씁니다. 선·막대·영역·복합 차트에 자식으로 넣습니다.

import math

brush_data = [
    {"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
    for i in range(1, 41)
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=300,
)

data_key의 값이 손잡이 옆 글자로 보입니다. 가운데 회색 구간을 끌면 범위의 길이는 그대로 두고 자리만 옮깁니다.

속성 바꿔 보기

아래 예제부터는 위에서 만든 brush_data를 그대로 씁니다.

속성 바꿔 보기

data_key

stroke

fill

rx.recharts.line_chart(
    rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=280,
)

stroke는 테두리와 손잡이 색, fill은 바탕색입니다. data_key를 바꾸면 손잡이 옆 글자가 바뀝니다.

속성	값	기본값	쓰임
`data_key`	열 이름	-	손잡이 옆에 보일 값
`start_index` · `end_index`	데이터 순번	`0` · 마지막	처음 고른 범위
`height`	숫자	`40`	막대 높이
`traveller_width`	숫자	`5`	손잡이(traveller) 너비
`gap`	숫자	`1`	몇 칸마다 차트를 다시 그릴지
`stroke` · `fill`	색	`rx.color("gray", 9)` · `rx.color("gray", 2)`	테두리·손잡이 색, 바탕색
`x` · `y` · `width`	숫자	자동	막대 위치와 너비. 보통 차트가 계산한다
`data`	리스트	차트의 data	브러시에 쓸 원래 데이터
`on_change`	이벤트	-	범위가 바뀔 때(0.10에서는 인자 없음)

처음 범위와 손잡이 크기

start_index와 end_index는 처음에 고른 범위입니다. 데이터의 순번(0부터)이므로 아래는 4번째~11번째 점이 보입니다. traveller_width는 손잡이 너비로, 넓을수록 잡기 쉽습니다.

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(
        data_key="name",
        traveller_width=15,
        start_index=3,
        end_index=10,
        stroke=rx.color("mauve", 10),
        fill=rx.color("mauve", 3),
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=200,
)

gap은 위 차트를 다시 그리는 간격입니다. gap=5면 손잡이가 다섯 칸 움직일 때마다 한 번씩 차트를 고치므로, 점이 아주 많을 때 덜 자주 다시 그립니다.

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=240,
)

범위가 바뀔 때: on_change

on_change는 손잡이를 움직일 때마다 일어납니다. Reflex 0.10에서는 이 이벤트가 새 범위를 넘겨주지 않으므로(공식 문서 표에도 설명이 비어 있습니다), "움직였다"는 사실만 알 수 있습니다. 끄는 동안 이벤트가 쏟아지지 않도록 핸들러에 debounce를 주었습니다.

Brush moved 0 times

brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]


class BrushMoveState(rx.State):
    moves: int = 0

    @rx.event(debounce=300)
    def moved(self):
        self.moves += 1


rx.vstack(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
        rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
        rx.recharts.x_axis(data_key="day"),
        data=brush_days,
        width="100%",
        height=240,
    ),
    rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
    width="100%",
)

주문서 완성

30일치를 다 넣고, start_index=23, end_index=29로 마지막 일주일만 먼저 보입니다. 위의 brush_days를 씁니다.

rx.recharts.composed_chart(
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
    rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.brush(
        data_key="day",
        start_index=23,
        end_index=29,
        height=28,
        traveller_width=10,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 2),
    ),
    data=brush_days,
    width="100%",
    height=300,
)

공방 노트

brush를 선·막대·영역 차트 자식으로 넣으면 아래에 구간 선택 막대가 생긴다.
data_key는 손잡이 옆 글자, start_index·end_index는 처음 범위(순번).
height·traveller_width로 크기, stroke·fill로 색, gap으로 다시 그리는 간격.
on_change는 0.10에서 범위를 넘겨주지 않는다. 움직였는지만 안다.

← 이전

차트 부품 · Reference

다른 차트 라이브러리 · Plotly

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex