ReflexKR

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 设定形状和方向。
把 State 的值交给 data，用滑块之类的输入就能即时改变多边形。

← 上一课

图表 · Pie Chart

下一课 →

图表 · Radial Bar Chart

订阅新课时和新课程通知

本课程新增课时或推出后续课程时，我们会发邮件通知你。

问答

关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。

ReflexKR

动手学 Python 和 Reflex。所有示例均已在 Reflex 0.10.0 上实际运行验证。

ReflexKR 免费，没有横幅广告。如果对你有帮助，欢迎请我们喝杯咖啡。 ☕ 请我们喝杯咖啡

联盟链接与赞助说明

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

Built with Reflex