ReflexKR

컴포넌트 공방: 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

차트

Pie Chart

rx.recharts.pie_chartrx.recharts.pierx.recharts.cell

공식 문서

공방 주문서

지난달 방문자의 브라우저 비율을 도넛 모양으로 보여 주고, 조각마다 이름과 값이 보이게 해 주세요.

rx.recharts.pie_chart는 전체를 100으로 보고 각 부분이 차지하는 몫을 조각으로 나눠 보여 주는 차트입니다. 조각이 대여섯 개 이하이고 "전체 중 얼마"가 중요할 때 씁니다. 다른 차트와 달리 data를 차트 그릇이 아니라 rx.recharts.pie에 줍니다. data_key는 조각의 크기, name_key는 조각의 이름입니다.

데이터의 각 dict에 "fill"을 넣으면 그 조각만 그 색이 되고, 없으면 pie의 fill을 씁니다.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Group A", "value": 400},
            {"name": "Group B", "value": 300, "fill": rx.color("teal", 9)},
            {"name": "Group C", "value": 300, "fill": rx.color("orange", 9)},
            {"name": "Group D", "value": 200, "fill": rx.color("plum", 9)},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 9),
        label=True,
    ),
    width="100%",
    height=300,
)

속성 바꿔 보기

inner_radius를 0보다 크게 하면 가운데가 빈 도넛이 됩니다. 반지름은 숫자(픽셀)나 퍼센트 문자열로 줍니다.

속성 바꿔 보기

inner_radius

outer_radius

color

label

label_line

legend_type

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Chrome", "value": 275},
            {"name": "Safari", "value": 150},
            {"name": "Firefox", "value": 100},
            {"name": "Edge", "value": 130},
        ],
        data_key="value",
        name_key="name",
        inner_radius="0%",
        outer_radius="80%",
        fill=rx.color("indigo", 8),
        stroke=rx.color("gray", 1),
        label=True,
        label_line=True,
        legend_type="rect",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

label을 켜면 조각 밖에 값이 붙고, label_line은 조각과 값을 잇는 선입니다. legend_type은 범례 아이콘 모양입니다.

속성	값	기본값	쓰임
`pie_chart(width=, height=, margin=)`	숫자·퍼센트 / dict	`"100%"`	차트 크기와 여백. `data`는 여기 없음
`pie(data=)`	dict의 리스트	없음	조각 데이터
`pie(data_key=, name_key=)`	문자열	없음 / `"name"`	조각의 크기와 이름 열쇠
`pie(cx=, cy=)`	숫자·퍼센트	`"50%"`	중심 위치
`pie(inner_radius=, outer_radius=)`	숫자·퍼센트	`0` / `"80%"`	안쪽·바깥 반지름. 안쪽이 0보다 크면 도넛
`pie(start_angle=, end_angle=)`	숫자(도)	`0` / `360`	그리는 각도 범위. `180`과 `0`이면 반원
`pie(padding_angle=, min_angle=)`	숫자(도)	`0`	조각 사이 틈, 작은 조각의 최소 각도
`pie(fill=, stroke=)`	색	accent 3 / accent 9	조각 색과 테두리 색
`pie(label=, label_line=)`	`True` / `False` / dict	`False`	값 표시와 연결선
`pie(legend_type=)`	`"rect"` `"circle"` … `"none"`	`"rect"`	범례 아이콘
`pie(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `400` / `1500` / `"ease"`	등장 애니메이션
`cell(fill=, stroke=)`	색		`pie` 안에서 조각 하나의 색
이벤트	`on_click` `on_mouse_enter` `on_mouse_leave` …		`pie_chart`, `pie`, `cell` 모두 받음

파이 두 개 겹치기

pie를 둘 넣으면 같은 중심에 겹쳐 그립니다. 안쪽 파이는 outer_radius="50%"로 작게, 바깥 고리는 inner_radius="60%"로 가운데를 비우면 두 데이터를 한 그림에서 비교할 수 있습니다. padding_angle은 조각 사이를 각도만큼 띄웁니다.

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 400},
            {"name": "Q2", "value": 300},
            {"name": "Q3", "value": 300},
            {"name": "Q4", "value": 200},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("teal", 8),
        inner_radius="60%",
        padding_angle=5,
    ),
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 2400},
            {"name": "Q2", "value": 4567},
            {"name": "Q3", "value": 1398},
            {"name": "Q4", "value": 9800},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 8),
        outer_radius="50%",
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

조각마다 색 칠하기 (cell)

데이터에 색을 넣지 않고도, pie 안에 rx.recharts.cell을 조각 수만큼 넣어 색을 정할 수 있습니다. rx.foreach로 데이터를 돌며 cell을 만들고, 색 목록에서 index번째 색을 고릅니다. cell의 순서가 곧 조각의 순서입니다. stroke를 배경색으로 두고 테두리를 두껍게 하면 조각 사이에 틈이 생깁니다.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create(["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"])[index % 5],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="40%",
        outer_radius="80%",
        padding_angle=2,
        stroke="#fff",
        custom_attrs={"strokeWidth": 2},
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

그라디언트 채우기

크기가 0인 rx.el.svg에 radial_gradient를 정의해 두고, 각 cell의 fill에서 url(#id)로 가리킵니다. 그라디언트 정의가 차트 밖에 있어도 같은 페이지 안이면 찾아 씁니다. id는 페이지에서 겹치지 않게 짓습니다.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.box(
    rx.el.svg(
        rx.el.svg.defs(
            *[
                rx.el.svg.radial_gradient(
                    rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1),
                    rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6),
                    id=f"piechart_grad_{i}",
                    cx="50%",
                    cy="50%",
                    r="50%",
                )
                for i, color in enumerate(["#6366F1", "#8B5CF6", "#EC4899", "#F59E0B"])
            ],
        ),
        width=0,
        height=0,
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            *[rx.recharts.cell(fill=f"url(#piechart_grad_{i})") for i in range(4)],
            data=piechart_data[:4],
            data_key="value",
            name_key="name",
            inner_radius="60%",
            outer_radius="80%",
            padding_angle=5,
            stroke="#fff",
            custom_attrs={"strokeWidth": 2},
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=300,
    ),
    width="100%",
)

State로 바뀌는 데이터

pie의 data에 State 값을 주면 수가 바뀔 때마다 조각 크기가 따라 바뀝니다. start_angle=180, end_angle=0으로 반원 차트를 만들고, 중심을 아래쪽(cy="80%")으로 내렸습니다.

Wood 3

Stone 2

Gold 1

Food 4

from typing import Any


class PieChartStockState(rx.State):
    stock: list[dict[str, Any]] = [
        {"item": "Wood", "count": 3},
        {"item": "Stone", "count": 2},
        {"item": "Gold", "count": 1},
        {"item": "Food", "count": 4},
    ]

    @rx.event
    def change(self, item: str, delta: int):
        self.stock = [
            {**row, "count": max(0, row["count"] + delta)} if row["item"] == item else row
            for row in self.stock
        ]


rx.vstack(
    rx.recharts.pie_chart(
        rx.recharts.pie(
            data=PieChartStockState.stock,
            data_key="count",
            name_key="item",
            cx="50%",
            cy="80%",
            start_angle=180,
            end_angle=0,
            fill=rx.color("accent", 8),
            label=True,
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=240,
    ),
    rx.flex(
        rx.foreach(
            PieChartStockState.stock,
            lambda row: rx.hstack(
                rx.button("-", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), -1)),
                rx.text(row["item"], " ", row["count"], size="2"),
                rx.button("+", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), 1)),
                align="center",
            ),
        ),
        spacing="4",
        wrap="wrap",
    ),
    align="center",
    width="100%",
)

마우스를 올리면 (hover 이벤트)

cell의 on_mouse_enter에 그 조각의 index를 넘기고, on_mouse_leave에서 지웁니다. 고른 조각의 값과 이름은 도넛 가운데에 겹쳐 놓은 글자로 보여 줍니다. 글자 상자에 pointer_events="none"을 주어 마우스가 조각에 닿게 합니다.

Hover a slice

class PieChartHoverState(rx.State):
    languages: list[dict[str, str | int]] = [
        {"name": "Python", "value": 35},
        {"name": "JavaScript", "value": 25},
        {"name": "Java", "value": 20},
        {"name": "C++", "value": 15},
        {"name": "Ruby", "value": 5},
    ]
    hovered_name: str = ""
    hovered_value: int = 0

    @rx.event
    def enter(self, index: int):
        self.hovered_name = str(self.languages[index]["name"])
        self.hovered_value = int(self.languages[index]["value"])

    @rx.event
    def leave(self):
        self.hovered_name, self.hovered_value = "", 0


rx.box(
    rx.vstack(
        rx.cond(
            PieChartHoverState.hovered_name != "",
            rx.fragment(
                rx.heading(PieChartHoverState.hovered_value, "%", size="7"),
                rx.text(PieChartHoverState.hovered_name, size="2"),
            ),
            rx.text("Hover a slice", size="2", color_scheme="gray"),
        ),
        align="center",
        spacing="1",
        position="absolute",
        top="50%",
        left="50%",
        transform="translate(-50%, -50%)",
        pointer_events="none",
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            rx.foreach(
                PieChartHoverState.languages,
                lambda item, index: rx.recharts.cell(
                    fill=rx.Var.create(["#2B79D1", "#2469B3", "#1E5AA1", "#3D8EE1", "#61A9E4"])[index % 5],
                    on_mouse_enter=PieChartHoverState.enter(index),
                    on_mouse_leave=PieChartHoverState.leave,
                ),
            ),
            data=PieChartHoverState.languages,
            data_key="value",
            name_key="name",
            inner_radius=90,
            stroke="0",
        ),
        width="100%",
        height=300,
    ),
    position="relative",
    width="100%",
)

주문서 완성

브라우저 다섯 개를 도넛으로 그리고, cell로 조각마다 정해진 순서의 색을 칠했습니다. 마지막 "Other"는 회색으로 힘을 뺍니다. 값은 label, 이름은 범례와 툴팁으로 읽습니다.

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create([
                    rx.color("indigo", 9), rx.color("teal", 9), rx.color("orange", 9),
                    rx.color("plum", 9), rx.color("gray", 8),
                ])[index],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="55%",
        outer_radius="80%",
        padding_angle=2,
        stroke=rx.color("gray", 1),
        label=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

공방 노트

data는 pie_chart가 아니라 pie에 준다. data_key는 크기, name_key는 이름.
inner_radius > 0이면 도넛, start_angle·end_angle로 반원.
조각 색은 데이터의 "fill" 키나, pie 안에 foreach로 넣은 rx.recharts.cell로 정한다.
pie를 둘 넣으면 같은 중심에 겹친다. outer_radius·inner_radius로 자리를 나눈다.
cell의 on_mouse_enter(index)로 고른 조각을 State에 담을 수 있다.

← 이전

차트 · Composed Chart

차트 · Radar Chart

새 교시·새 강의 소식 받기

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

질문과 답변

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

ReflexKR

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

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

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

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

Built with Reflex