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 例

图表

Area Chart

rx.recharts.area_chartrx.recharts.area

官方文档

工坊订单

请把每月网页端和 App 的访问量堆叠起来，做一张能一眼看出整体走势和各自份额的图表。

rx.recharts.area_chart 是面积图：在折线下方填充颜色。想同时展示数量随时间的变化，以及多个值加在一起的总量时，就用它。把数据交给图表容器（area_chart），再把要画的系列（area）和坐标轴作为子组件放进去。

数据是 dict 的列表。每个 dict 对应 x 轴上的一格，data_key 是一把钥匙，决定从 dict 里取哪个值来画。本页的示例都使用下面这份 areachart_data。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(data_key="web"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=areachart_data,
    width="100%",
    height=250,
)

图表的 width 和 height 只接受数字（像素）或 "100%" 这样的百分比字符串。"20em" 这类 CSS 单位要写在包住图表的容器上。坐标轴（x_axis、y_axis）、网格、提示框和图例会在图表部件的页面里详细讲解，这里只用到够用的部分。

试着改属性

两块面积用 stack_id="1" 堆叠在一起。试着改一改曲线形状、颜色、线宽、数据点和堆叠方式。数据就是上面的 areachart_data。

试着改属性

curve

color

stroke_width

dot

stack_offset

rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        type_="monotone",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        type_="monotone",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        stroke_width=1,
        dot=False,
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    stack_offset="none",
    width="100%",
    height=250,
)

type_ 决定点与点之间怎么连接。把 stack_offset 改成 expand，每个月的总和都变成 100%，只看比例。

属性	取值	默认值	用途
`area_chart(data=)`	dict 的列表	无	整张图表使用的数据
`area_chart(width=, height=)`	数字或 `"100%"`	`"100%"`	图表尺寸。高度最好给数字
`area_chart(layout=)`	`"horizontal"` `"vertical"`	`"horizontal"`	横向或纵向排布
`area_chart(stack_offset=)`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	无	堆叠面积的基线计算方式
`area_chart(sync_id=)`	字符串	无	值相同的图表联动提示框和刷选区
`area_chart(margin=)`	`{"top": 5, ...}`	无	图表四周的留白
`area_chart(base_value=)`	数字，`"dataMin"` `"dataMax"` `"auto"`	`"auto"`	面积起始的底部值
`area(data_key=)`	字符串	无	要绘制的值的键
`area(type_=)`	`"monotone"` `"linear"` `"natural"` `"step"` …	`"monotone"`	曲线插值方式
`area(stroke=, fill=)`	颜色	accent 9 / accent 5	线条颜色和填充颜色
`area(stroke_width=)`	数字	`1`	线宽
`area(dot=, active_dot=)`	`True` / `False` / dict	`False` / accent 圆点	是否显示数据点、鼠标悬停时的点
`area(stack_id=)`	字符串	无	值相同的系列向上堆叠
`area(name=, unit=)`	字符串	`data_key`	提示框和图例中显示的名称与单位
`area(connect_nulls=)`	`True` / `False`	`False`	跳过空值（`None`）继续连线
`area(x_axis_id=, y_axis_id=)`	字符串或数字	`0`	挂在哪条坐标轴上
`on_click` `on_mouse_enter` …	事件		图表和面积都能接收。`area` 还有 `on_animation_start`、`on_animation_end`

堆叠面积（stack_id）

stack_id 相同的 area 会从下往上依次堆叠。最上面的边界线就是总和，所以总量和各部分能同时读出来。stack_offset 决定堆叠的基准：通常用 "none"，只看比例时用 "expand"。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 6),
        stack_id="1",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 6),
        stack_id="1",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=areachart_data,
    stack_offset="none",
    margin={"top": 5, "right": 5, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

渐变填充

让面积上深下浅、逐渐透明，线条会更醒目。在图表里用 rx.el.svg.defs 定义 SVG 渐变，再用 fill="url(#id)" 引用它。渐变的 id 在同一页面内不要重复。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.8),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0),
            id="areachart_gradient",
            x1=0,
            x2=0,
            y1=0,
            y2=1,
        ),
    ),
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill="url(#areachart_gradient)",
        type_="natural",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=areachart_data,
    width="100%",
    height=280,
)

使用多条坐标轴

在一张图里画两个量级完全不同的值时，可以放两条坐标轴。用 y_axis_id 给坐标轴起名，再给每个 area 设置相同的 y_axis_id 把它们连起来。x 轴也可以用 x_axis_id 照此处理。不过两套刻度容易让读者混淆，只在单位确实不同时才用。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 5),
        y_axis_id="left",
    ),
    rx.recharts.area(
        data_key="app",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 5),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=280,
)

竖着放（layout）

设置 layout="vertical" 后，面积会从上往下延伸。坐标轴的角色也随之互换：x 轴变成数值（type_="number"），y 轴变成类别（type_="category"）。为了不让文字被截断，最好四个方向都设置 margin。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.recharts.area(
        data_key="web",
        stroke=rx.color("accent", 8),
        fill=rx.color("accent", 3),
    ),
    rx.recharts.x_axis(type_="number"),
    rx.recharts.y_axis(data_key="month", type_="category"),
    data=areachart_data,
    layout="vertical",
    margin={"top": 20, "right": 20, "bottom": 20, "left": 20},
    width="100%",
    height=300,
)

图表联动（sync_id）

sync_id 相同的图表共享提示框位置和刷选范围。鼠标移到上面的图表时，下面的图表也会显示同一个月的提示框；用下面的刷选条缩小范围，上面的图表也会跟着缩小。它还能和柱状图、折线图、组合图联动。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.vstack(
    rx.recharts.area_chart(
        rx.recharts.area(data_key="web", stroke=rx.color("accent", 9), fill=rx.color("accent", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=180,
    ),
    rx.recharts.area_chart(
        rx.recharts.area(data_key="app", stroke=rx.color("teal", 9), fill=rx.color("teal", 5)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.graphing_tooltip(),
        rx.recharts.brush(data_key="month", height=24),
        data=areachart_data,
        sync_id="areachart_sync",
        width="100%",
        height=210,
    ),
    width="100%",
)

由 State 驱动的图表

把 State 的值交给 data，每次值变化时图表都会带着动画重新绘制。这里点击按钮或面积会改变数字，下拉框也会通过 State 改变 type_。整个列表重新赋值，才能确保变化被可靠地传递出去。

import random
from typing import Any


class AreaChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"month": "Jan", "web": 4000, "app": 2400},
        {"month": "Feb", "web": 3000, "app": 1398},
        {"month": "Mar", "web": 2000, "app": 5800},
        {"month": "Apr", "web": 2780, "app": 3908},
        {"month": "May", "web": 1890, "app": 4800},
        {"month": "Jun", "web": 2390, "app": 3800},
    ]
    curve: str = "monotone"

    @rx.event
    def shuffle(self):
        self.data = [
            {**row, "web": random.randint(500, 6000), "app": random.randint(500, 6000)}
            for row in self.data
        ]

    @rx.event
    def set_curve(self, value: str):
        self.curve = value


rx.vstack(
    rx.hstack(
        rx.button("Shuffle", on_click=AreaChartLiveState.shuffle),
        rx.select(
            ["monotone", "linear", "natural", "step", "basis"],
            value=AreaChartLiveState.curve,
            on_change=AreaChartLiveState.set_curve,
        ),
    ),
    rx.recharts.area_chart(
        rx.recharts.area(
            data_key="web",
            type_=AreaChartLiveState.curve,
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.area(
            data_key="app",
            type_=AreaChartLiveState.curve,
            stroke=rx.color("teal", 9),
            fill=rx.color("teal", 5),
            on_click=AreaChartLiveState.shuffle,
        ),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
        rx.recharts.legend(),
        data=AreaChartLiveState.data,
        width="100%",
        height=300,
    ),
    width="100%",
)

完成订单

两块面积用同一个 stack_id 堆叠，再用渐变把下方涂浅。用 name 给图例和提示框起好名字，只保留横向网格线，让画面更清爽。

areachart_data = [
    {"month": "Jan", "web": 4000, "app": 2400},
    {"month": "Feb", "web": 3000, "app": 1398},
    {"month": "Mar", "web": 2000, "app": 5800},
    {"month": "Apr", "web": 2780, "app": 3908},
    {"month": "May", "web": 1890, "app": 4800},
    {"month": "Jun", "web": 2390, "app": 3800},
]


rx.recharts.area_chart(
    rx.el.svg.defs(
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("accent", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("accent", 9), stop_opacity=0.1),
            id="areachart_order_web",
            x1=0, x2=0, y1=0, y2=1,
        ),
        rx.el.svg.linear_gradient(
            rx.el.svg.stop(offset="5%", stop_color=rx.color("teal", 9), stop_opacity=0.7),
            rx.el.svg.stop(offset="95%", stop_color=rx.color("teal", 9), stop_opacity=0.1),
            id="areachart_order_app",
            x1=0, x2=0, y1=0, y2=1,
        ),
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.area(
        data_key="web",
        name="Web",
        stroke=rx.color("accent", 9),
        stroke_width=2,
        fill="url(#areachart_order_web)",
        stack_id="visits",
    ),
    rx.recharts.area(
        data_key="app",
        name="App",
        stroke=rx.color("teal", 9),
        stroke_width=2,
        fill="url(#areachart_order_app)",
        stack_id="visits",
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=areachart_data,
    width="100%",
    height=300,
)

工坊笔记

在 area_chart(data=列表) 里放入 area(data_key=…) 和 x_axis、y_axis 作为子组件。
width、height 只能是数字或百分比字符串。CSS 单位交给外层容器。
stack_id 相同就会堆叠；stack_offset="expand" 则变成 100% 比例图。
渐变在 rx.el.svg.defs 里定义，用 fill="url(#id)" 引用。
用 sync_id 让图表之间联动提示框；把 State 的值交给 data，图表就能动起来。

← 上一课

表格与数据网格 · Data Editor

下一课 →

图表 · Bar Chart

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex