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 例

图表

Scatter Chart

rx.recharts.scatter_chartrx.recharts.scatterrx.recharts.z_axis

官方文档

工坊订单

请把两支队伍选手的身高和体重画成点，再用点的大小表示年龄，方便比较各队的体格分布。

rx.recharts.scatter_chart 是散点图，在 x 值和 y 值相交的位置画点。用来寻找两个数之间的关系（个子高的人体重也大吗），或者找出远离群体的值。和其他直角坐标图表不同，data 要分别交给每个系列（rx.recharts.scatter），再用坐标轴的 data_key 决定哪个值作为 x、哪个作为 y。

x 轴默认是类别轴，要当数值轴用就一定要加上 type_="number"。示例都使用下面两份数据。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    width="100%",
    height=280,
)

试着改属性

试着改一改点的形状（shape）、图例图标（legend_type）、连接点的线（line）以及连线方式（line_type）。line_type="fitting" 会画出穿过这些点的回归直线。

试着改属性

color

shape

legend_type

line

line_type

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        data=scatterchart_a,
        name="A",
        fill=rx.color("indigo", 9),
        shape="circle",
        legend_type="circle",
        line=False,
        line_type="joint",
    ),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    width="100%",
    height=280,
)

只有打开 line 时才能看到 line_type 的效果。joint 按顺序连接各点，fitting 画一条趋势直线。

属性	取值	默认值	用途
`scatter_chart(width=, height=, margin=)`	数字或百分比 / dict	`"100%"` / 各 5	尺寸和留白。`data` 不在这里
`scatter(data=)`	dict 的列表	无	这个系列的点
`scatter(name=)`	字符串	无	图例和提示框中显示的名称
`scatter(fill=)`	颜色	accent 9	点的颜色
`scatter(shape=)`	`"circle"` `"square"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	`"circle"`	点的形状
`scatter(legend_type=)`	上述形状，`"line"` `"rect"` `"none"` …	`"circle"`	图例图标
`scatter(line=, line_type=)`	`True` / `False`，`"joint"` `"fitting"`	`False` / `"joint"`	连接各点的线
`scatter(x_axis_id=, y_axis_id=, z_axis_id=)`	字符串或数字	`0`	挂在哪条坐标轴上
`scatter(is_animation_active=, animation_duration=, …)`			入场动画
`z_axis(data_key=, range=, name=, unit=)`	键，`[最小, 最大]` 像素	`[60, 400]`	用第三个值表示点的大小
事件	`on_click` `on_mouse_enter` `on_mouse_leave` …		图表和 `scatter` 都能接收

叠放多组数据

每个系列放一个 scatter，分别给它 data、name 和颜色。图例里显示的是 name。加上 z_axis，数据的第三个值（z）会一起出现在提示框中，也用于点的大小。分挂到多条坐标轴的 x_axis_id、y_axis_id 在面积图页面中介绍。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

用形状区分分组

只用颜色区分分组，对难以分辨颜色的人来说可能看起来是同一组。给每个系列再设置不同的 shape，黑白下也能区分。图例图标也会跟着变成相应的形状。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
    rx.recharts.scatter(
        data=[
            {"x": 130, "y": 150},
            {"x": 160, "y": 180},
            {"x": 220, "y": 170},
            {"x": 250, "y": 200},
            {"x": 175, "y": 130},
        ],
        fill=rx.color("amber", 9),
        name="C",
        shape="star",
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

气泡图（z_axis）

z_axis(data_key="z", range=[60, 400]) 把 z 值最小的点画成 60、最大的点画成 400 的大小（面积）。在 x、y 之外再用点的大小表示第三个值，这就是气泡图。坐标轴的 name 是提示框中显示的名称。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

随 State 变化的数据

把考拉兹猜想的数列画成点：偶数就除以 2，奇数就乘 3 加 1，一直重复到得到 1 为止。输入数字并提交后，处理函数会重新计算数列并放进 data，图表随之重绘。初始值从 15 开始。

Start: 15

def scatterchart_collatz(n: int) -> list[dict[str, int]]:
    rows = []
    for step in range(400):
        rows.append({"x": step, "y": n})
        if n == 1:
            break
        n = n // 2 if n % 2 == 0 else 3 * n + 1
    return rows


class ScatterChartCollatzState(rx.State):
    start: int = 15
    data: list[dict[str, int]] = scatterchart_collatz(15)

    @rx.event
    def compute(self, form_data: dict):
        try:
            n = int(form_data.get("start") or 1)
        except ValueError:
            n = 1
        self.start = min(max(n, 1), 1_000_000)
        self.data = scatterchart_collatz(self.start)


rx.vstack(
    rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=260,
    ),
    rx.form.root(
        rx.hstack(
            rx.input(placeholder="Enter a number", name="start", type="number"),
            rx.button("Compute", type="submit"),
        ),
        on_submit=ScatterChartCollatzState.compute,
        reset_on_submit=True,
    ),
    width="100%",
)

完成订单

身高作 x，体重作 y，年龄作 z_axis 的点大小。两支队伍同时用不同的颜色和形状区分，并给坐标轴设置 unit 和 name，让提示框读起来像 "height: 170cm"。x 轴用 domain 只显示 150~190，让点铺得更开。

rx.recharts.scatter_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.scatter(
        data=[
            {"height": 160, "weight": 52, "age": 21},
            {"height": 165, "weight": 58, "age": 34},
            {"height": 170, "weight": 63, "age": 28},
            {"height": 158, "weight": 49, "age": 45},
            {"height": 175, "weight": 70, "age": 39},
        ],
        name="Team A",
        fill=rx.color("accent", 9),
    ),
    rx.recharts.scatter(
        data=[
            {"height": 172, "weight": 66, "age": 25},
            {"height": 180, "weight": 78, "age": 31},
            {"height": 168, "weight": 61, "age": 52},
            {"height": 185, "weight": 82, "age": 27},
            {"height": 177, "weight": 74, "age": 44},
        ],
        name="Team B",
        fill=rx.color("teal", 9),
        shape="triangle",
    ),
    rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
    rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
    rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

工坊笔记

data 不交给图表，而是交给每个 scatter。x、y 由坐标轴的 data_key 选定。
数值 x 轴一定要写 x_axis(type_="number")。
每组一个 scatter。name 用于图例，shape 是点的形状（和颜色一起用更好区分）。
用 z_axis(data_key=, range=[最小, 最大]) 把第三个值表示成点的大小，就是气泡图。
用 line=True 加 line_type="fitting" 画出趋势线。

← 上一课

图表 · Radial Bar Chart

下一课 →

图表 · Funnel Chart

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex