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

차트

Radar Chart

rx.recharts.radar_chartrx.recharts.radarrx.recharts.polar_gridrx.recharts.polar_angle_axisrx.recharts.polar_radius_axis

공식 문서

공방 주문서

두 학생의 과목별 점수를 거미줄 모양으로 겹쳐서, 누가 어느 과목에 강한지 한눈에 보이게 해 주세요.

rx.recharts.radar_chart는 여러 항목의 점수를 중심에서 뻗은 축 위에 찍고 이어서, 다각형 모양으로 보여 주는 차트입니다. 같은 기준의 항목 대여섯 개로 대상의 "모양"을 비교할 때 씁니다. 차트에 data를 주고, 계열마다 rx.recharts.radar(data_key=…)를 넣습니다.

원형 차트에는 직교 축 대신 극좌표 부품을 씁니다. polar_grid는 거미줄 격자, polar_angle_axis는 둘레의 항목 이름, polar_radius_axis는 중심에서 바깥으로 가는 눈금입니다.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(data_key="Mina", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    width="100%",
    height=300,
)

속성 바꿔 보기

채움의 진하기(fill_opacity), 꼭짓점의 점(dot), 격자 모양(grid_type), 차트의 안쪽·바깥 반지름을 바꿔 보세요. 데이터는 위의 radarchart_data입니다.

속성 바꿔 보기

color

fill_opacity

0.6

dot

grid_type

inner_radius

outer_radius

rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 8),
        fill_opacity=0.6,
        dot=False,
    ),
    rx.recharts.polar_grid(grid_type="polygon"),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    inner_radius="0%",
    outer_radius="80%",
    width="100%",
    height=300,
)

inner_radius를 키우면 가운데가 비어서 작은 값끼리의 차이가 더 잘 보입니다. grid_type="circle"은 격자를 원으로 그립니다.

속성	값	기본값	쓰임
`radar_chart(data=)`	dict의 리스트	없음	항목마다 dict 하나
`radar_chart(cx=, cy=)`	숫자·퍼센트	`"50%"`	중심 위치
`radar_chart(inner_radius=, outer_radius=)`	숫자·퍼센트	`0` / `"80%"`	안쪽·바깥 격자의 반지름
`radar_chart(start_angle=, end_angle=)`	숫자(도)	`90` / `-270`	첫 축의 각도와 도는 방향
`radar_chart(margin=)`	dict	0	둘레 여백
`radar(data_key=)`	문자열	없음	그릴 값의 열쇠
`radar(stroke=, fill=, fill_opacity=)`	색 / 0~1	accent 9 / accent 3 / `0.6`	테두리, 채움, 채움 진하기
`radar(dot=)`	`True` / `False` / dict	없음	꼭짓점 점
`radar(legend_type=, label=)`	범례 아이콘 / bool	`"rect"`	범례 모양, 값 표시
`radar(animation_begin=, animation_duration=, animation_easing=)`	ms / ms / `"ease"` …	`0` / `1500` / `"ease"`	등장 애니메이션
`polar_grid(grid_type=)`	`"polygon"` `"circle"`	`"polygon"`	격자 모양
`polar_radius_axis(angle=, domain=)`	숫자 / `[최소, 최대]`		눈금 축의 방향과 범위
이벤트	`on_click` `on_mouse_enter` `on_mouse_leave`		차트. `radar`는 `on_animation_start`·`on_animation_end`도

여러 레이더 겹치기

radar를 둘 넣으면 같은 격자 위에 다각형이 겹칩니다. 뒤에 적은 계열이 위에 그려지므로, fill_opacity를 낮춰 아래 계열도 비쳐 보이게 합니다. 차트의 inner_radius, outer_radius로 그림의 크기와 가운데 빈 자리를 정합니다.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.6,
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    inner_radius="15%",
    outer_radius="80%",
    width="100%",
    height=300,
)

점·범례·애니메이션

dot=True는 꼭짓점마다 점을 찍고, legend_type="line"은 범례 아이콘을 선으로 바꿉니다. animation_begin, animation_duration, animation_easing으로 처음 그려지는 움직임을 정합니다. 아래 예제는 4초에 걸쳐 천천히 펼쳐집니다.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        dot=True,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.6,
        legend_type="line",
        animation_begin=0,
        animation_duration=4000,
        animation_easing="ease-in",
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=300,
)

State로 바뀌는 데이터

능력치 다섯 개에 점수 100을 나눠 주는 예제입니다. 슬라이더를 움직이면 State의 traits가 바뀌고, 차트가 바로 다시 그려집니다. 남은 점수보다 많이 올릴 수는 없도록 핸들러에서 막습니다. polar_radius_axis의 tick=False, axis_line=False는 눈금을 감춰 모양만 남깁니다.

Strength

Speed

Stamina

Wisdom

Charm

Remaining: 25

from typing import Any


class RadarChartTraitState(rx.State):
    budget: int = 100
    traits: list[dict[str, Any]] = [
        {"trait": "Strength", "value": 15},
        {"trait": "Speed", "value": 15},
        {"trait": "Stamina", "value": 15},
        {"trait": "Wisdom", "value": 15},
        {"trait": "Charm", "value": 15},
    ]

    @rx.var
    def remaining(self) -> int:
        return self.budget - sum(t["value"] for t in self.traits)

    @rx.event
    def set_trait(self, trait: str, value: list[float]):
        new = int(value[0])
        rows = []
        for t in self.traits:
            if t["trait"] == trait:
                new = min(new, self.remaining + t["value"])
                t = {**t, "value": new}
            rows.append(t)
        self.traits = rows


rx.flex(
    rx.box(
        rx.recharts.radar_chart(
            rx.recharts.radar(data_key="value", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
            rx.recharts.polar_grid(),
            rx.recharts.polar_angle_axis(data_key="trait"),
            rx.recharts.polar_radius_axis(domain=[0, 100], tick=False, axis_line=False),
            data=RadarChartTraitState.traits,
            width="100%",
            height=260,
        ),
        flex="1 1 240px",
    ),
    rx.vstack(
        rx.foreach(
            RadarChartTraitState.traits,
            lambda t: rx.hstack(
                rx.text(t["trait"], size="2", width="5em"),
                rx.slider(
                    value=[t["value"].to(int)],
                    max=100,
                    on_change=lambda v: RadarChartTraitState.set_trait(t["trait"].to(str), v),
                    width="10em",
                ),
                rx.text(t["value"], size="2"),
                align="center",
            ),
        ),
        rx.text("Remaining: ", RadarChartTraitState.remaining, size="2", weight="bold"),
        flex="1 1 240px",
    ),
    spacing="4",
    wrap="wrap",
    align="center",
    width="100%",
)

주문서 완성

데이터의 열쇠를 학생 이름("Mina", "Joon")으로 지어서, 그 이름이 그대로 범례와 툴팁에 보입니다. 0.10의 radar에는 name 속성이 없으므로 이렇게 열쇠 이름을 읽기 좋게 짓는 것이 가장 간단합니다. 둘 다 fill_opacity=0.4로 옅게 칠해 겹친 부분도 읽히게 하고, 색과 점을 함께 써서 계열을 구분합니다.

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150], tick=False, axis_line=False),
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=320,
)

공방 노트

radar_chart(data=…) 안에 radar(data_key=…)와 polar_grid·polar_angle_axis·polar_radius_axis를 넣는다.
polar_angle_axis(data_key=)는 둘레의 항목 이름, polar_radius_axis(domain=)은 눈금 범위.
여러 계열은 radar를 여러 개. fill_opacity를 낮춰 겹침을 보이게.
차트의 inner_radius·outer_radius·start_angle·end_angle로 모양과 방향을 정한다.
data에 State 값을 주면 슬라이더 같은 입력으로 다각형이 바로 바뀐다.

← 이전

차트 · Pie Chart

차트 · Radial Bar Chart

새 교시·새 강의 소식 받기

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