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 例

图表部件

Chart Tooltip

rx.recharts.graphing_tooltip

官方文档

工坊订单

鼠标悬停在柱子上时，请弹出一个小框，像“Sales - 4000 won”这样显示名称和数值。

rx.recharts.graphing_tooltip 是鼠标悬停在图表的点或柱子上时弹出的小框。只要把它作为子元素放进图表，就会显示鼠标下方的 x 值以及该位置所有数据系列的值。rx.recharts.tooltip 也是同一个组件。

它和附在文字、按钮上的 rx.tooltip（浮层）是不同的组件。在图表里请使用本页介绍的这个。

ctooltip_data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=ctooltip_data,
    width="100%",
    height=300,
)

试着改属性

把鼠标停在图表上，同时改改这些值。从下面的示例开始，都直接使用上面创建的 ctooltip_data。

试着改属性

separator

cursor

is_animation_active

animation_easing

background

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8)),
    rx.recharts.bar(data_key="pv", fill=rx.color("teal", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" : ",
        cursor=True,
        is_animation_active=True,
        animation_easing="ease",
        content_style={"background": rx.color("gray", 2), "borderRadius": "8px"},
    ),
    data=ctooltip_data,
    width="100%",
    height=260,
)

separator 是名称和数值之间的字符。关掉 cursor 后，鼠标下方的灰色条带就会消失。

属性	取值	默认值	用途
`separator`	字符串	`":"`	名称和数值之间的字符
`cursor`	`True` / `False`、dict	`{"strokeWidth": 1, "fill": rx.color("gray", 3)}`	鼠标下方的高亮条带。为 `False` 时不显示
`content_style`	style dict	灰色底、圆角	修饰框的内部
`wrapper_style`	style dict	`{}`	修饰包裹框的外层元素
`item_style` · `label_style`	style dict	灰色 12 · 灰色 11 文字	修饰每行数值（li）、顶部的 x 值（p）
`position`	`{"x": …, "y": …}`	-	设定后固定在该位置
`offset`	数字	`10`	鼠标与框之间的距离
`allow_escape_view_box`	`{"x": bool, "y": bool}`	都为 `False`	是否允许超出图表区域
`view_box`	`{"x", "y", "width", "height"}`	自动	框可停留的区域。通常自动计算
`filter_null`	`True` / `False`	`True`	是否排除没有值（None）的数据系列
`active`	`True` / `False`	自动	强制显示或隐藏
`is_animation_active` · `animation_duration` · `animation_easing`	bool · ms · 缓动名称	`True` · `1500` · `"ease"`	框跟随移动的动画

修饰与固定位置

wrapper_style 修饰外壳，content_style 修饰内部的框。item_style 对应每行数值，label_style 对应顶部的 x 值。它们都是用 camelCase 写 CSS 属性的 dict。

设上 position，框就不再跟着鼠标移动，而是停在那个位置。allow_escape_view_box 按 x、y 方向分别决定框能否超出图表区域，view_box 是框可停留区域的大小。

rx.recharts.composed_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        view_box={"width": 675, "height": 300},
        allow_escape_view_box={"x": True, "y": False},
        wrapper_style={"backgroundColor": rx.color("accent", 3), "borderRadius": "8px", "padding": "10px"},
        content_style={"backgroundColor": rx.color("accent", 4), "borderRadius": "4px", "padding": "8px"},
        item_style={"color": rx.color("accent", 11)},
        label_style={"fontWeight": "bold"},
        position={"x": 80, "y": 0},
        is_animation_active=False,
    ),
    data=ctooltip_data,
    width="100%",
    height=300,
)

处理空值：filter_null

数据里有 None 时，默认（filter_null=True）会把该数据系列从框里去掉（左图）。设为 False 时名称会保留，只是数值为空（右图）。把鼠标分别放在 Tue 和 Thu 上比较一下。

ctooltip_gaps = [
    {"day": "Mon", "shop": 120, "online": 80},
    {"day": "Tue", "shop": 150, "online": None},
    {"day": "Wed", "shop": 90, "online": 110},
    {"day": "Thu", "shop": None, "online": 130},
    {"day": "Fri", "shop": 170, "online": 140},
]


rx.flex(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="shop", fill=rx.color("accent", 8)),
        rx.recharts.bar(data_key="online", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.graphing_tooltip(filter_null=False),
        data=ctooltip_gaps,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

完成订单

给数据系列设上 name，框里显示的就是这个名称而不是 uv；设上 unit，数值后面就会带上单位。分隔符改为 " - "，鼠标下方的条带换成强调色。

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Sales", unit=" won", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(
        separator=" - ",
        cursor={"fill": rx.color("accent", 3)},
        content_style={"background": rx.color("gray", 1), "border": "none", "borderRadius": "10px", "boxShadow": "0 4px 14px rgba(0,0,0,0.12)"},
        item_style={"color": rx.color("accent", 11), "fontWeight": "bold"},
    ),
    data=ctooltip_data,
    width="100%",
    height=280,
)

工坊笔记

把 graphing_tooltip（或 recharts.tooltip）作为子元素放进图表即可。它和 rx.tooltip 不同。
框里显示的名称和单位来自数据系列的 name、unit。
用 separator、cursor、content_style、wrapper_style、item_style、label_style 修饰。
用 position 固定位置，用 allow_escape_view_box 允许超出图表范围。
filter_null=False 时，值为 None 的数据系列也会保留名称。

← 上一课

图表部件 · Cartesian Grid

下一课 →

图表部件 · Legend

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex