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 例

图表

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

官方文档

工坊订单

请用漏斗形状展示从访问到注册、试用、付款，每个阶段还剩下多少人。

rx.recharts.funnel_chart 用漏斗形状展示数值在一系列相继的阶段中减少了多少。查看注册流程、购买流程这类每个阶段都有人流失的情况时就用它。data 交给 rx.recharts.funnel，并在数据的每个 dict 里写上 "fill"，为每个阶段定颜色。

阶段名称通过把 rx.recharts.label_list 放进 funnel 来添加。用 data_key 决定显示哪个值的文字，用 position 决定放在哪里。

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

试着改属性

试着改一改标签的位置和内容、阶段边框颜色以及动画。数据就是上面的 funnelchart_data。

试着改属性

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside" 把文字放在阶段内部正中。关掉 is_animation_active，图表一出现就是画好的样子。

属性	取值	默认值	用途
`funnel_chart(width=, height=, margin=)`	数字或百分比 / dict	`"100%"` / 各 5	尺寸和留白
`funnel_chart(layout=, stroke=)`	字符串 / 颜色	`"centric"`	阶段排布、边框颜色
`funnel(data=)`	dict 的列表	无	阶段数据，`"fill"` 键定颜色
`funnel(data_key=, name_key=)`	字符串	无 / `"name"`	阶段数值和名称的键
`funnel(stroke=)`	颜色	gray 3	阶段边框
`funnel(legend_type=)`	图例图标	`"line"`	图例形状
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	入场动画
`label_list(data_key=, position=)`	键 / `"right"` `"inside"` …		每个阶段上的文字
`label_list(fill=, stroke=, offset=)`	颜色 / 数字	gray 10 / `"none"` / `5`	文字颜色、描边、间隔距离
事件	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		图表和 `funnel`。`funnel` 还有 `on_animation_start`、`on_animation_end`

事件

funnel_chart 能接收点击和鼠标事件。在下面的图表上试着移入、点击、移出鼠标，每个事件都会弹出通知（toast）。事件既可以接 State 的处理函数，也可以接 rx.toast 这样的内置动作。

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

随 State 变化的数据

把 State 的值接到 funnel 的 data 上，再在 funnel 的 on_click 里重新生成数值。每次点击漏斗，第一阶段保持 100，之后每个阶段依次减少 0~20。

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

修改动画

animation_begin 是推迟开始绘制的时间，animation_duration 是绘制所用的时间（毫秒）。用 animation_easing 选择先快后慢之类的变速方式。加上 legend，阶段名称会出现在图例里。

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

完成订单

放两个 label_list，右侧显示阶段名称，内部显示人数。颜色用同一色系的深浅，阶段越往下越浅，再加宽右侧 margin，免得名称被截断。

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

工坊笔记

在 funnel_chart 里放入 funnel(data=…, data_key=…)。阶段颜色取自数据的 "fill"。
阶段名称用 funnel 里的 label_list(data_key=, position=)。可以放多个。
funnel_chart 能接收 on_click、on_mouse_enter、on_mouse_leave。
用 funnel 的 on_click 和 State 的 data 重新绘制漏斗。
用 animation_begin、animation_duration、animation_easing 设定绘制的动态效果。

← 上一课

图表 · Scatter Chart

下一课 →

图表 · Treemap

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex