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 例

图表

Treemap

rx.recharts.treemap

官方文档

工坊订单

请用一张按面积比较的图，展示手机存储空间被照片、视频、App 各占了多少。

rx.recharts.treemap 把整体看作一个矩形，再把每个项目按数值比例切成面积相应的小矩形填满。项目太多、用饼图会切得太碎时，或者要展示分类下还有子分类的层级数据时就用它。

和其他图表不同，它不需要子部件，只用一个 treemap 就能画出来。data_key 是作为面积的值，name_key 是写在矩形上的名称，数据里的 "fill" 就是矩形的颜色。

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

试着改属性

同一份数据里有两种大小值（size、visits）。换一个 data_key，决定面积的依据就变了，矩形布局会重新计算。也试着一起改改动画方式。

试着改属性

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

每次切换 data_key，都会按新的布局重新绘制。关掉 is_animation_active 则立即切换。

属性	取值	默认值	用途
`data`	dict 的列表	无	各个项目。`"children"` 放子项目，`"fill"` 定颜色
`data_key`	字符串	`"value"`	作为面积的值的键
`name_key`	字符串	`"name"`	写在矩形上的名称的键
`aspect_ratio`	数字	自动	矩形尽量贴近的宽高比
`width`, `height`	数字或百分比	`"100%"`	尺寸。高度用数字
`is_animation_active`	`True` / `False`	`True`	开启动画
`animation_begin`, `animation_duration`	毫秒	`0` / `1500`	开始延迟、持续时间
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	速度变化
`on_animation_start`, `on_animation_end`	事件		动画开始、结束
`on_click` `on_mouse_enter` `on_mouse_leave` …	事件		鼠标事件

宽高比（aspect_ratio）

aspect_ratio 是每个矩形尽量贴近的宽高比。设为 1 时尽量切成接近正方形，设为 4 时切成横向的长矩形。越接近正方形，越容易用眼睛比较面积，名称也更容易放下。0.10 中只接受整数。

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

层级数据（children）

在项目里放一个 "children" 列表，它会在内部再次细分。父项的面积是子项数值之和，同一父项的子项聚在同一块里。下面的示例是三个食品分类，每个分类里装着若干品项。同一分类用同一颜色的深浅来涂，让每一块都看得出来。

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

动画事件

on_animation_start 和 on_animation_end 会在绘制动画开始和结束时被调用。下面的文字在动画进行期间显示 "Drawing..."，2.5 秒后结束时变成 "Done"，括号里的次数加一。

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

完成订单

把存储空间的五个项目按面积画出来，最小的 "Other" 用灰色淡化处理。用 aspect_ratio=2 切出适合宽屏、略微横长的矩形，并把动画缩短。

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

工坊笔记

只用一个 treemap(data=…, data_key=…, name_key=…) 就能画出来，不需要子部件。
矩形颜色取自数据的 "fill"，子分类放在 "children" 列表里。
用 aspect_ratio（整数）设定矩形形状。越接近 1 越容易比较。
动画用 is_animation_active、animation_duration、animation_easing，结束时触发 on_animation_end。
项目只有几个时，饼图或柱状图更容易读。

← 上一课

图表 · Funnel Chart

下一课 →

图表 · Sankey Chart

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex