组件工坊：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.brush官方文档
工坊订单
请把 30 天的订单放进一张图表，但一开始只放大显示最后一周，并能拖动手柄移动区间。
rx.recharts.brush 是附在图表下方的区间选择条。拖动两侧手柄选出想看的数据范围，上方的图表就只放大绘制这一段。适合数据点太多、一屏装不下的情况。把它作为子元素放进折线图、柱形图、面积图或组合图中。
import math
brush_data = [
{"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
for i in range(1, 41)
]
rx.recharts.bar_chart(
rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
rx.recharts.x_axis(data_key="name"),
rx.recharts.y_axis(),
data=brush_data,
width="100%",
height=300,
)data_key 的值会作为手柄旁的文字显示。拖动中间的灰色区间，范围的长度不变，只移动位置。
从下面的示例开始，都直接使用上面创建的 brush_data。
试着改属性
data_key
stroke
fill
rx.recharts.line_chart(
rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
rx.recharts.x_axis(data_key="name"),
rx.recharts.y_axis(),
data=brush_data,
width="100%",
height=280,
)| 属性 | 取值 | 默认值 | 用途 |
|---|---|---|---|
data_key | 列名 | - | 手柄旁显示的值 |
start_index · end_index | 数据序号 | 0 · 最后一个 | 初始选中的范围 |
height | 数字 | 40 | 选择条的高度 |
traveller_width | 数字 | 5 | 手柄（traveller）的宽度 |
gap | 数字 | 1 | 每移动几格重绘一次图表 |
stroke · fill | 颜色 | rx.color("gray", 9) · rx.color("gray", 2) | 边框与手柄颜色、底色 |
x · y · width | 数字 | 自动 | 选择条的位置和宽度。通常由图表计算 |
data | 列表 | 图表的 data | 刷选所用的原始数据 |
on_change | 事件 | - | 范围变化时（0.10 中无参数） |
start_index 和 end_index 是初始选中的范围。它们是数据的序号（从 0 开始），所以下面显示的是第 4 到第 11 个点。traveller_width 是手柄的宽度，越宽越容易抓。
rx.recharts.area_chart(
rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
rx.recharts.brush(
data_key="name",
traveller_width=15,
start_index=3,
end_index=10,
stroke=rx.color("mauve", 10),
fill=rx.color("mauve", 3),
),
rx.recharts.x_axis(data_key="name"),
rx.recharts.y_axis(),
data=brush_data,
width="100%",
height=200,
)gap 是上方图表重绘的间隔。gap=5 时，手柄每移动五格才更新一次图表，数据点非常多时就能减少重绘次数。
rx.recharts.line_chart(
rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
rx.recharts.x_axis(data_key="name"),
rx.recharts.y_axis(),
data=brush_data,
width="100%",
height=240,
)每次拖动手柄都会触发 on_change。在 Reflex 0.10 中，这个事件不会传来新的范围（官方文档的表格里说明也是空的），所以只能知道“动过了”这一事实。为了避免拖动时事件蜂拥而至，给处理器加上了 debounce。
Brush moved 0 times
brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]
class BrushMoveState(rx.State):
moves: int = 0
@rx.event(debounce=300)
def moved(self):
self.moves += 1
rx.vstack(
rx.recharts.bar_chart(
rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
rx.recharts.x_axis(data_key="day"),
data=brush_days,
width="100%",
height=240,
),
rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
width="100%",
)放入全部 30 天的数据，用 start_index=23、end_index=29 先只显示最后一周。这里使用上面的 brush_days。
rx.recharts.composed_chart(
rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
rx.recharts.x_axis(data_key="day"),
rx.recharts.y_axis(),
rx.recharts.graphing_tooltip(),
rx.recharts.brush(
data_key="day",
start_index=23,
end_index=29,
height=28,
traveller_width=10,
stroke=rx.color("accent", 9),
fill=rx.color("accent", 2),
),
data=brush_days,
width="100%",
height=300,
)工坊笔记
把 brush 作为子元素放进折线图、柱形图、面积图，下方就会出现区间选择条。
data_key 是手柄旁的文字，start_index、end_index 是初始范围（序号）。
height、traveller_width 定尺寸，stroke、fill 定颜色，gap 定重绘间隔。
0.10 中 on_change 不会传来范围，只能知道是否动过。
订阅新课时和新课程通知
本课程新增课时或推出后续课程时，我们会发邮件通知你。
问答
关于本课有任何疑问都可以在这里留言。所有语言版本页面的提问会汇集在一起。