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 例

图表

Line Chart

rx.recharts.line_chartrx.recharts.line

官方文档

工坊订单

请把首尔店和釜山店每周的访客走势画成两条线，方便比较两者的变化有何不同。

rx.recharts.line_chart 用线把点连起来，展示随时间的变化。比起数值本身，更看重涨跌和趋势时就用它。把 data 交给图表容器，再为每个系列放一个 rx.recharts.line(data_key=…)。

下面的示例都使用这份 linechart_data。不指定颜色时，会用主题的 accent 色绘制。

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul"),
    rx.recharts.line(data_key="busan"),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    data=linechart_data,
    width="100%",
    height=250,
)

试着改属性

线条的样子大多在 line 上设定。这份数据里周三的值是 None，所以开关 connect_nulls 时，可以看到断开的地方被连上或留空。

试着改属性

curve

color

stroke_width

dash

dot

connect_nulls

hide

rx.recharts.line_chart(
    rx.recharts.line(
        data_key="sales",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        stroke_width=2,
        stroke_dasharray="",
        dot=True,
        connect_nulls=False,
        hide=False,
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=[
        {"day": "Mon", "sales": 12},
        {"day": "Tue", "sales": 18},
        {"day": "Wed", "sales": None},
        {"day": "Thu", "sales": 15},
        {"day": "Fri", "sales": 24},
        {"day": "Sat", "sales": 20},
    ],
    width="100%",
    height=250,
)

stroke_dasharray 是以像素写成的 "线段长度空白长度" 字符串。打开 hide 只会隐藏线条，坐标轴保持不变。

属性	取值	默认值	用途
`line_chart(data=)`	dict 的列表	无	整张图表使用的数据
`line_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	横向或纵向排布
`line_chart(margin=, sync_id=)`	dict / 字符串	无	四周留白、与其他图表联动
`line(data_key=)`	字符串	无	要绘制的值的键
`line(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	无（直线）	点与点的连接方式
`line(stroke=, stroke_width=)`	颜色 / 数字	accent 9 / `1`	线条颜色和粗细
`line(stroke_dasharray=)`	`"5 5"` 这样的字符串	无	虚线
`line(dot=, active_dot=)`	`True` / `False` / dict	accent 圆点	数据点、鼠标悬停时的点
`line(connect_nulls=)`	`True` / `False`	`False`	跳过空值继续连线
`line(hide=)`	`True` / `False`	`False`	隐藏线条
`line(name=, unit=, legend_type=)`	字符串		提示框和图例的名称、单位、图例图标
`line(x_axis_id=, y_axis_id=)`	字符串或数字	`0`	挂在哪条坐标轴上
`on_click` `on_mouse_enter` …	事件		图表和线条都能接收。`line` 还有 `on_animation_start`、`on_animation_end`

加上网格、提示框和图例

把图表部件作为子组件放进去，就能直接加上。cartesian_grid 是背景网格，graphing_tooltip 显示鼠标所在位置的值，legend 是系列的名称标签。给每条线设置 type_="monotone"，折线就会变成平滑曲线。

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", type_="monotone", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", type_="monotone", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=280,
)

加上坐标轴标题

在坐标轴里放一个 rx.recharts.label 子组件，就有了轴标题。y 轴标题用 custom_attrs={"angle": 270} 竖起来。为了给标题留出位置，要把 x 轴的 height 和图表的 margin 设得宽裕些。标签位置的取值详见图表部件中的 Label 页面。

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(
        data_key="seoul",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        type_="natural",
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Week", position="center"),
        data_key="week",
        height=60,
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Visits", position="left", custom_attrs={"angle": 270}),
        axis_line=False,
        tick_line=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=linechart_data,
    margin={"left": 20, "right": 20, "top": 20},
    width="100%",
    height=300,
)

竖着放（layout）

设置 layout="vertical" 后，线条从上往下延伸。把 x 轴改为数值（type_="number"），y 轴改为类别（type_="category"），再给四个方向设置 margin，免得文字被截断。

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", stroke=rx.color("teal", 9)),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="week", type_="category"),
    data=linechart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
    width="100%",
    height=300,
)

随 State 变化的数据

data 和 type_ 都接上了 State 的值。点按钮，数值会小幅波动；两个下拉框分别改变两条线的形状。State 在每个浏览器标签页里各自独立，不会影响别人的画面。使用两条坐标轴的 y_axis_id、让图表联动的 sync_id 在面积图页面中介绍。

import random
from typing import Any


class LineChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"week": "W1", "seoul": 4000, "busan": 2400},
        {"week": "W2", "seoul": 3000, "busan": 1398},
        {"week": "W3", "seoul": 2000, "busan": 5800},
        {"week": "W4", "seoul": 2780, "busan": 3908},
        {"week": "W5", "seoul": 1890, "busan": 4800},
    ]
    seoul_type: str = "monotone"
    busan_type: str = "monotone"

    @rx.event
    def set_seoul_type(self, value: str):
        self.seoul_type = value

    @rx.event
    def set_busan_type(self, value: str):
        self.busan_type = value

    @rx.event
    def munge(self):
        self.data = [
            {**row, "seoul": row["seoul"] + random.randint(-500, 500), "busan": row["busan"] + random.randint(-1000, 1000)}
            for row in self.data
        ]


rx.vstack(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="seoul", type_=LineChartLiveState.seoul_type, stroke=rx.color("accent", 9)),
        rx.recharts.line(data_key="busan", type_=LineChartLiveState.busan_type, stroke=rx.color("teal", 9)),
        rx.recharts.x_axis(data_key="week"),
        rx.recharts.y_axis(),
        data=LineChartLiveState.data,
        margin={"top": 20, "right": 20, "left": 20, "bottom": 20},
        width="100%",
        height=280,
    ),
    rx.hstack(
        rx.button("Munge data", on_click=LineChartLiveState.munge),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.seoul_type,
            on_change=LineChartLiveState.set_seoul_type,
        ),
        rx.select(
            ["monotone", "linear", "step", "stepBefore", "stepAfter"],
            value=LineChartLiveState.busan_type,
            on_change=LineChartLiveState.set_busan_type,
        ),
        wrap="wrap",
    ),
    width="100%",
)

完成订单

两家门店的线条同时用颜色和线型（实线、虚线）区分。不只靠颜色区分，黑白打印或色觉障碍用户也能读懂。

linechart_data = [
    {"week": "W1", "seoul": 4000, "busan": 2400},
    {"week": "W2", "seoul": 3000, "busan": 1398},
    {"week": "W3", "seoul": 2000, "busan": 5800},
    {"week": "W4", "seoul": 2780, "busan": 3908},
    {"week": "W5", "seoul": 1890, "busan": 4800},
    {"week": "W6", "seoul": 2390, "busan": 3800},
    {"week": "W7", "seoul": 3490, "busan": 4300},
]


rx.recharts.line_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.line(data_key="seoul", name="Seoul", type_="monotone", stroke=rx.color("accent", 9), stroke_width=2),
    rx.recharts.line(
        data_key="busan",
        name="Busan",
        type_="monotone",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
    ),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=linechart_data,
    width="100%",
    height=300,
)

工坊笔记

在 line_chart(data=…) 里为每个系列放一个 line(data_key=…)。
用 type_ 设定连接方式（monotone、linear、step…），用 stroke、stroke_width、stroke_dasharray 设定线型。
dot 控制数据点，connect_nulls 跳过空值连线，hide 用来隐藏。
轴标题是在坐标轴里放 rx.recharts.label，位置靠 margin 和坐标轴的 height 留出来。
给 data 和 type_ 接上 State 的值，按钮和下拉框就能改变图表。

← 上一课

图表 · Bar Chart

下一课 →

图表 · Composed Chart

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex