组件工坊：Reflex 组件库 100 例
·
课程概览
布局
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
排版
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
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
工坊订单
请把三个团队本季度的目标完成率做成圆形进度条，放进仪表盘的一个格子里。
rx.recharts.radial_bar_chart 把柱子沿着圆弧弯曲绘制，而不是画成直线。柱子的长度（角度）代表数值大小，每根柱子离圆心的距离各不相同。项目少、空间窄，或者要展示相对目标的进度时就用它。
在数据的每个 dict 里写上 "fill"，就是那根柱子的颜色。min_angle 让很小的值也至少显示出这个角度。
radialbarchart_data = [
{"name": "Mon", "x": 3, "fill": rx.color("cyan", 9)},
{"name": "Tue", "x": 4, "fill": rx.color("blue", 9)},
{"name": "Wed", "x": 5, "fill": rx.color("orange", 9)},
{"name": "Thu", "x": 6, "fill": rx.color("red", 9)},
{"name": "Fri", "x": 7, "fill": rx.color("gray", 9)},
{"name": "Sat", "x": 8, "fill": rx.color("green", 9)},
]
rx.recharts.radial_bar_chart(
rx.recharts.radial_bar(data_key="x", min_angle=15),
data=radialbarchart_data,
width="100%",
height=320,
)图表的 inner_radius、outer_radius 决定柱子所在圆环的内外边界，bar_category_gap 是柱子之间的间距。打开 background，柱子填满时的位置会淡淡地显示出来。
试着改属性
inner_radius
outer_radius
bar_category_gap
background
label
rx.recharts.radial_bar_chart(
rx.recharts.radial_bar(
data_key="x",
min_angle=15,
background=False,
label=False,
),
rx.recharts.graphing_tooltip(),
data=radialbarchart_data,
inner_radius="30%",
outer_radius="100%",
bar_category_gap="10%",
width="100%",
height=320,
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
radial_bar_chart(data=) | dict 的列表 | 无 | 每根柱子一个 dict，"fill" 键定颜色 |
radial_bar_chart(cx=, cy=) | 数字或百分比 | "50%" | 圆心位置 |
radial_bar_chart(inner_radius=, outer_radius=) | 数字或百分比 | "30%" / "100%" | 柱子所在的圆环 |
radial_bar_chart(start_angle=, end_angle=) | 数字（度） | 0 / 360 | 柱子旋转的范围和方向 |
radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=) | 百分比或数字 | "10%" / 4 / 自动 | 柱子间距和粗细 |
radial_bar_chart(margin=) | dict | 各 5 | 四周留白 |
radial_bar(data_key=) | 字符串 | 无 | 作为柱子长度的值 |
radial_bar(min_angle=) | 数字（度） | 无 | 小数值的最小角度 |
radial_bar(background=) | True / False / dict | 无 | 空余位置的背景 |
radial_bar(label=) | True / False / dict | 无 | 数值显示。用 dict 设 fill、position |
radial_bar(legend_type=) | 图例图标 | 图例形状 | |
radial_bar(animation_begin=, animation_duration=, animation_easing=) | 入场动画 | ||
| 事件 | on_click on_mouse_enter on_mouse_leave on_mouse_move | 图表区域的鼠标事件 |
设置 start_angle=180、end_angle=0，柱子会从左到右画出半圆。给 label 一个 dict，可以设定数值文字的颜色（fill）和位置（position）；"insideStart" 把文字放在柱子起点一侧的内部。background=True 在柱子背后铺一条空轨道。
rx.recharts.radial_bar_chart(
rx.recharts.radial_bar(
data_key="uv",
min_angle=90,
background=True,
label={"fill": "#666", "position": "insideStart"},
),
data=[
{"name": "18-24", "uv": 31.47, "fill": "#8884d8"},
{"name": "25-29", "uv": 26.69, "fill": "#83a6ed"},
{"name": "30-34", "uv": 15.69, "fill": "#8dd1e1"},
{"name": "35-39", "uv": 8.22, "fill": "#82ca9d"},
{"name": "40-49", "uv": 8.63, "fill": "#a4de6c"},
{"name": "50+", "uv": 2.63, "fill": "#d0ed57"},
],
inner_radius="10%",
outer_radius="80%",
start_angle=180,
end_angle=0,
width="100%",
height=300,
)要把数值显示成"满分 100 中的多少"，就必须固定角度轴的范围。给角度轴 polar_angle_axis 设置数值轴（type: "number"）和范围（domain: [0, 100]），转一整圈就等于 100。0.10 的 polar_angle_axis 没有单独提供这两个属性，所以用 custom_attrs 原样传给 Recharts。没有这条轴的话，最大的值会占满一整圈。start_angle=90、end_angle=-270 表示从 12 点方向开始顺时针旋转。
rx.recharts.radial_bar_chart(
rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
rx.recharts.radial_bar(
data_key="value",
background=True,
label={"fill": rx.color("gray", 12), "position": "center"},
),
data=[{"name": "Goal", "value": 72, "fill": rx.color("accent", 9)}],
inner_radius="70%",
outer_radius="100%",
start_angle=90,
end_angle=-270,
width="100%",
height=220,
)柱子长度是角度，所以外圈和内圈的柱子即使数值相同，看起来长度也不一样。需要精确比较数值时，柱状图更合适。形状可以用 inner_radius、outer_radius、start_angle、end_angle、bar_size 来调整。
把角度轴固定为 0~100，三个团队的完成率按同一标准绘制。图例竖着放在右侧显示团队名称，再用 label 把数字放进柱子里。
rx.recharts.radial_bar_chart(
rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
rx.recharts.radial_bar(
data_key="done",
background=True,
label={"fill": rx.color("gray", 12), "position": "insideStart"},
),
rx.recharts.graphing_tooltip(),
rx.recharts.legend(icon_size=10, layout="vertical", vertical_align="middle", align="right"),
data=[
{"name": "Sales", "done": 82, "fill": rx.color("indigo", 9)},
{"name": "Support", "done": 64, "fill": rx.color("teal", 9)},
{"name": "Design", "done": 45, "fill": rx.color("orange", 9)},
],
inner_radius="30%",
outer_radius="100%",
start_angle=90,
end_angle=-270,
width="100%",
height=280,
)工坊笔记
在 radial_bar_chart(data=…) 里放入 radial_bar(data_key=…)。柱子颜色取自数据的 "fill"。
圆环由 inner_radius、outer_radius 决定，方向由 start_angle、end_angle 决定（180→0 即半圆）。
用 min_angle 让小数值也能看见，用 background=True 铺上空轨道。
进度用 polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}) 把一整圈固定为 100。
需要精确比较时，就用柱状图。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。