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 例

图表部件

Label

rx.recharts.labelrx.recharts.label_list

官方文档

工坊订单

请在每根柱子上方直接写出数值，并在横轴下方写上名称“Pages”。

在图表里写文字的组件有两个。rx.recharts.label 在轴或参考线等某一个位置上附加一段文字；rx.recharts.label_list 则自动在数据系列的每个数据点上写出对应的值。柱子上方的数字用 label_list，轴名称用 label。

label_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 5800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        fill=rx.color("accent", 8),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="center", position="center", offset=30),
        rx.recharts.label(value="inside left", position="insideLeft", offset=10),
        rx.recharts.label(value="inside right", position="insideRight", offset=10),
        height=50,
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 20, "bottom": 20},
    width="100%",
    height=250,
)

label 作为 x_axis 的子元素放进去，就会附在轴上。value 是文字，position 是位置，offset 是在该位置上偏移的距离。label_list 作为 bar 的子元素放进去，会在每根柱子上写出 data_key 列的值。

试着改属性

从下面的示例开始，都直接使用上面创建的 label_data。

试着改属性

list_position

list_fill

value

position

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        data_key="uv",
        fill=rx.color("accent", 6),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center"),
        data_key="name",
        height=50,
    ),
    data=label_data,
    margin={"top": 20, "left": 20, "right": 20},
    width="100%",
    height=280,
)

label_list 的 position 以柱子为基准定位，label 的 position 以轴区域为基准定位。

rx.recharts.label

属性	取值	默认值	用途
`value`	字符串	-	要显示的文字
`position`	`"top"` `"left"` `"right"` `"bottom"` `"inside"` `"outside"` `"insideLeft"` `"insideRight"` `"insideTop"` `"insideBottom"` `"insideTopLeft"` `"insideBottomLeft"` `"insideTopRight"` `"insideBottomRight"` `"insideStart"` `"insideEnd"` `"end"` `"center"`	-	在父区域中的位置
`offset`	数字	-	从该位置偏移的距离
`view_box`	dict	自动	基准区域。通常自动计算

rx.recharts.label_list

属性	取值	默认值	用途
`data_key`	列名	-	在每个点上写出的值所在的列
`position`	与 `label` 相同的 18 种	-	以柱子或点为基准的位置
`offset`	数字	`5`	与该位置的距离
`fill`	颜色	`rx.color("gray", 10)`	文字颜色
`stroke`	颜色	`"none"`	文字描边颜色

给每个数据系列标值：label_list

label_list 会在包含它的数据系列的每个数据点上写字。有两组柱子时，就给每组柱子各放一个 label_list，再用 data_key 指定写哪一列的值。

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="pv", position="top"),
        data_key="pv",
        stroke="#82ca9d",
        fill="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    margin={"left": 10, "right": 0, "top": 20, "bottom": 10},
    data=label_data,
    width="100%",
    height=300,
)

修饰文字

label 属性里没有的修饰，用 custom_attrs 原样传给 Recharts。这里设定了字号和粗细，纵轴名称则把 angle 转到 270，让它顺着轴竖起来。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center", custom_attrs={"fontSize": "12px", "fontWeight": "700"}),
        data_key="name",
        height=60,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Views", position="left", custom_attrs={"angle": 270, "fontSize": "12px", "fontWeight": "700"}),
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 25},
    width="100%",
    height=300,
)

附在参考线和区域上

label 除了轴之外，还可以作为 reference_line、reference_dot、reference_area 的子元素。适合给目标线标上“Goal”，或给强调区间加上名称。文字颜色同样用 custom_attrs 的 fill 设定。

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopRight", custom_attrs={"fill": rx.color("red", 11)}),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_area(
        rx.recharts.label(value="Campaign", position="insideTop"),
        x1="Page C",
        x2="Page E",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=label_data,
    width="100%",
    height=280,
)

完成订单

放两个 label_list：柱子上方写数值，柱子内部底端写页面名称。名称已经在柱子上了，所以关掉轴刻度，只在轴下方用 label 留下“Pages”。

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        rx.recharts.label_list(data_key="name", position="insideBottom", fill="white", offset=10),
        data_key="uv",
        fill=rx.color("accent", 9),
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="insideBottom", custom_attrs={"fontWeight": "700"}),
        tick=False,
        height=30,
    ),
    data=label_data,
    margin={"top": 20},
    width="100%",
    height=280,
)

工坊笔记

label 是在一个位置上放一段文字，label_list 是在每个数据点上放一个值。
label 是 x_axis、y_axis、reference_* 的子元素，label_list 是 bar、line、area 等数据系列的子元素。
用 value、position、offset 决定文字和位置。position 有 18 种。
属性里没有的修饰（fontSize、fontWeight、angle）用 custom_attrs 传入。

← 上一课

图表部件 · Legend

下一课 →

图表部件 · Reference

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex