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

차트

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

공식 문서

공방 주문서

방문에서 가입, 체험, 결제까지 단계마다 몇 명이 남는지 깔때기 모양으로 보여 주세요.

rx.recharts.funnel_chart는 차례로 이어지는 단계에서 값이 얼마나 줄어드는지를 깔때기 모양으로 보여 주는 차트입니다. 가입 과정, 구매 과정처럼 단계마다 이탈하는 사람을 볼 때 씁니다. data는 rx.recharts.funnel에 주고, 데이터의 각 dict에 "fill"을 넣어 단계마다 색을 정합니다.

단계 이름은 rx.recharts.label_list를 funnel 안에 넣어 붙입니다. data_key로 어느 값을 글자로 쓸지, position으로 어디에 둘지 정합니다.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

속성 바꿔 보기

라벨의 위치와 내용, 단계 테두리 색, 애니메이션을 바꿔 보세요. 데이터는 위의 funnelchart_data입니다.

속성 바꿔 보기

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside"는 단계 안쪽 가운데에 글자를 둡니다. is_animation_active를 끄면 처음부터 다 그려진 채로 나옵니다.

속성	값	기본값	쓰임
`funnel_chart(width=, height=, margin=)`	숫자·퍼센트 / dict	`"100%"` / 5씩	크기와 여백
`funnel_chart(layout=, stroke=)`	문자열 / 색	`"centric"`	단계 배치, 테두리 색
`funnel(data=)`	dict의 리스트	없음	단계 데이터. `"fill"` 키로 색
`funnel(data_key=, name_key=)`	문자열	없음 / `"name"`	단계의 값과 이름 열쇠
`funnel(stroke=)`	색	gray 3	단계 테두리
`funnel(legend_type=)`	범례 아이콘	`"line"`	범례 모양
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	등장 애니메이션
`label_list(data_key=, position=)`	열쇠 / `"right"` `"inside"` …		단계마다 붙는 글자
`label_list(fill=, stroke=, offset=)`	색 / 숫자	gray 10 / `"none"` / `5`	글자 색, 외곽선, 떨어진 거리
이벤트	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		차트와 `funnel`. `funnel`은 `on_animation_start`·`on_animation_end`도

이벤트

funnel_chart는 클릭과 마우스 이벤트를 받습니다. 아래 차트에서 마우스를 올리고, 누르고, 빼 보세요. 이벤트마다 알림(toast)이 뜹니다. 이벤트에는 State 핸들러도, rx.toast 같은 내장 동작도 연결할 수 있습니다.

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

State로 바뀌는 데이터

funnel의 data에 State 값을 연결하고, funnel의 on_click에서 값을 새로 정합니다. 깔때기를 누를 때마다 첫 단계는 100으로 두고, 다음 단계부터 0~20씩 줄어든 값이 들어갑니다.

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

애니메이션 바꾸기

animation_begin은 그리기 시작을 늦추는 시간, animation_duration은 그리는 데 걸리는 시간(밀리초)입니다. animation_easing으로 빨라졌다 느려지는 방식을 고릅니다. legend를 넣으면 단계 이름이 범례로 나옵니다.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

주문서 완성

label_list를 둘 넣어 오른쪽에는 단계 이름을, 안쪽에는 사람 수를 붙였습니다. 색은 한 가지 색의 진하기로 단계가 내려갈수록 옅게 하고, 오른쪽 margin을 넓혀 이름이 잘리지 않게 합니다.

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

공방 노트

funnel_chart 안에 funnel(data=…, data_key=…)를 넣는다. 단계 색은 데이터의 "fill".
단계 이름은 funnel 안의 label_list(data_key=, position=). 여러 개를 넣어도 된다.
funnel_chart는 on_click·on_mouse_enter·on_mouse_leave를 받는다.
funnel의 on_click과 State data로 깔때기를 다시 그린다.
animation_begin·animation_duration·animation_easing으로 그리는 움직임을 정한다.

← 이전

차트 · Scatter Chart

차트 · Treemap

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex