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 例

图表部件

Axis

rx.recharts.x_axisrx.recharts.y_axisrx.recharts.z_axis

官方文档

工坊订单

请给月度访问量图表加上“月份”和“访问量”两个轴名称，并把销售额单独显示在右侧的轴上。

坐标轴是决定图表刻度尺的组件。把 rx.recharts.x_axis 和 rx.recharts.y_axis 作为子元素放进图表，就会出现横向和纵向刻度，再用 data_key 选择哪一列用作刻度。在散点图中决定点大小的第三根轴是 rx.recharts.z_axis。

axis_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": 9800, "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.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom"}),
    rx.recharts.y_axis(data_key="uv", label={"value": "Views", "angle": -90, "position": "left"}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

给 label 传一个 dict，轴旁就会显示名称。value 是文字，position 是位置，angle 是旋转角度。轴名称会超出图表区域，所以要用图表的 margin 预留出空间。

试着改属性

试着改变轴的方向和刻度显示。从下面的示例开始，都直接使用上面创建的 axis_data。

试着改属性

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", orientation="bottom", interval="preserveEnd", axis_line=True, tick_line=True, hide=False),
    rx.recharts.y_axis(orientation="left", mirror=False, reversed=False),
    data=axis_data,
    width="100%",
    height=260,
)

orientation 把轴移到另一侧，mirror 把刻度文字放到图表内侧。reversed 会反转刻度顺序。

属性	取值	默认值	用途
`data_key`	列名	-	用作刻度的数据列
`type_`	`"number"` `"category"` `"auto"`	x 为 category，y 为 number	数值轴还是类别轴
`domain`	`[最小, 最大]`	`[0, "auto"]`	数值轴的范围。也可以用 `"auto"`、`"dataMin"`、`"dataMax"`
`allow_data_overflow`	`True` / `False`	`False`	是否裁掉 `domain` 之外的数据
`orientation`	x：`"bottom"` `"top"`，y：`"left"` `"right"`	`"bottom"` / `"left"`	轴所在的一侧
`x_axis_id` / `y_axis_id`	字符串或数字	`0`	有多根轴时用来与数据系列配对的名称
`label`	字符串、数字、dict	-	轴名称。dict 中可用 `value` `position` `offset` `angle`
`interval`	`"preserveEnd"` `"preserveStart"` `"preserveStartEnd"` `"equidistantPreserveStart"`、数字	`"preserveEnd"`	如何精简重叠的刻度文字。为 `0` 时全部显示
`tick_count`	数字	`5`	数值轴的刻度数量
`ticks`	列表	-	直接指定刻度值
`tick_formatter`	JS 函数表达式字符串	-	改变刻度文字的格式
`tick` · `tick_line` · `axis_line`	`True` / `False`	`True`	显示刻度文字、刻度线、轴线
`tick_size` · `min_tick_gap`	数字	`6` · `5`	刻度线长度、刻度文字之间的最小间距
`mirror` · `reversed` · `hide`	`True` / `False`	`False`	文字放内侧、反转顺序、隐藏轴
`unit` · `name`	字符串	-	在提示框中一并显示的单位和名称
`stroke`	颜色	`rx.color("gray", 9)`	轴线和刻度的颜色
`angle` · `padding`（x 轴）	数字 · dict	`0` · `{"left": 0, "right": 0}`	刻度文字旋转、两端留白
`on_click` 等	事件	-	点击或悬停刻度时（无参数）

多根轴

单位不同的两个数据系列，各给一根轴。给轴加上 y_axis_id，再给数据系列设同样的 y_axis_id，两者就配成一对。第二根轴用 orientation="right" 放在右侧。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8", y_axis_id="left"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d", y_axis_id="right", type_="monotone"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(data_key="uv", y_axis_id="left"),
    rx.recharts.y_axis(data_key="pv", y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=axis_data,
    width="100%",
    height=300,
)

修整刻度

axis_line=False 和 tick_line=False 会去掉轴线和刻度线，只留下文字。tick_size 拉开轴与文字的距离；interval="preserveStartEnd" 在文字重叠需要省略一部分时，仍然保留首尾两个。属性里没有的字号，用 custom_attrs 原样传给 Recharts。

tick_formatter 是改变刻度文字的 JavaScript 函数表达式。下面把 4000 显示为 4k。这个值只能写成字符串，不能传 State 值。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        data_key="name",
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        custom_attrs={"fontSize": "12px"},
    ),
    rx.recharts.y_axis(
        axis_line=False,
        tick_line=False,
        tick_size=10,
        interval="preserveStartEnd",
        tick_formatter="(value) => value / 1000 + 'k'",
        custom_attrs={"fontSize": "12px"},
    ),
    data=axis_data,
    width="100%",
    height=300,
    margin={"left": 20, "right": 20, "top": 25},
)

轴名称的位置

label dict 的 position 接受 14 种取值，offset 可以在该位置上再往外推或往里拉一点。dict 里的值也可以用 State 值来改变。

试着改属性

x_position

x_offset

y_position

y_offset

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv"),
    rx.recharts.x_axis(data_key="name", label={"value": "Pages", "position": "bottom", "offset": 0}),
    rx.recharts.y_axis(label={"value": "Views", "angle": -90, "position": "left", "offset": 0}),
    data=axis_data,
    width="100%",
    height=300,
    margin={"bottom": 40, "left": 40, "right": 40},
)

以 inside 开头的值把名称放在轴内侧，top、bottom、left、right 则放在轴外侧。

数值轴的范围

domain 设定数值轴的最小值和最大值。默认情况下，数据超出范围时轴会自动扩展（左图）。设上 allow_data_overflow=True，就会守住范围，裁掉超出的部分（右图，值为 9800 的 Page C）。

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7),
        data=axis_data,
        width=300,
        height=220,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(domain=[0, 6000], tick_count=7, allow_data_overflow=True),
        data=axis_data,
        width=300,
        height=220,
    ),
    spacing="4",
    wrap="wrap",
)

ZAxis：点的大小

在散点图中，rx.recharts.z_axis 不会画在画面上，而是决定点的大小。data_key 的值越小，越接近 range 的前端（面积小）；越大，越接近后端（面积大）。提示框里会一并显示 name 和 unit。

axis_points = [
    {"x": 10, "y": 30, "z": 200},
    {"x": 25, "y": 45, "z": 260},
    {"x": 40, "y": 20, "z": 400},
    {"x": 55, "y": 60, "z": 280},
    {"x": 70, "y": 35, "z": 500},
    {"x": 85, "y": 50, "z": 120},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=axis_points, name="Shops"),
    rx.recharts.x_axis(data_key="x", type_="number", name="Price", unit="$"),
    rx.recharts.y_axis(data_key="y", type_="number", name="Sales"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="Stock"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

完成订单

访问量用柱形和左轴，销售额用折线和右轴，分开显示。给两根轴都加上名称，并把图例移到上方，避免与轴名称重叠。

axis_month_data = [
    {"month": "Jan", "visits": 820, "sales": 12},
    {"month": "Feb", "visits": 940, "sales": 15},
    {"month": "Mar", "visits": 1310, "sales": 21},
    {"month": "Apr", "visits": 1180, "sales": 26},
    {"month": "May", "visits": 1560, "sales": 24},
    {"month": "Jun", "visits": 1720, "sales": 31},
]


rx.recharts.composed_chart(
    rx.recharts.bar(data_key="visits", y_axis_id="visits", name="Visits", fill=rx.color("accent", 8)),
    rx.recharts.line(data_key="sales", y_axis_id="sales", name="Sales", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month", label={"value": "Month", "position": "insideBottom", "offset": -10}),
    rx.recharts.y_axis(y_axis_id="visits", label={"value": "Visits", "angle": -90, "position": "insideLeft"}),
    rx.recharts.y_axis(y_axis_id="sales", orientation="right", unit="k", label={"value": "Sales", "angle": 90, "position": "insideRight"}),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top"),
    data=axis_month_data,
    width="100%",
    height=320,
    margin={"bottom": 20},
)

工坊笔记

把 x_axis、y_axis 作为子元素放进图表，用 data_key 选择用作刻度的列。
label 用 dict：value、position、offset、angle。用图表的 margin 预留空间。
两根轴时用 y_axis_id 与数据系列配对，第二根轴设 orientation="right"。
用 domain 设定范围，allow_data_overflow=True 时会裁掉超出部分。
tick_formatter 是 JS 函数字符串，z_axis 决定散点图中点的大小（range）。

← 上一课

图表 · Error Bar

下一课 →

图表部件 · Cartesian Grid

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex