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 例

图表部件

Legend

rx.recharts.legend

官方文档

工坊订单

我用三条线画了三家分店的每周订单量。请在右上角标出哪条线对应哪家分店。

rx.recharts.legend 是说明图表中各数据系列分别代表什么的图例。就像地图的图例一样，它在颜色和形状旁边列出数据系列的名称。只要图表里有两个以上的数据系列，几乎总会放上它。

legend_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.legend(),
    data=legend_data,
    width="100%",
    height=300,
)

试着改属性

试着改变图例的方向、位置和图标形状。从下面的示例开始，都直接使用上面创建的 legend_data。

试着改属性

layout

align

vertical_align

icon_type

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="amt", stroke=rx.color("green", 9)),
    rx.recharts.line(data_key="uv", stroke=rx.color("red", 9)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        layout="horizontal",
        align="center",
        vertical_align="bottom",
        icon_type="line",
    ),
    data=legend_data,
    width="100%",
    height=280,
)

layout 是条目排列的方向，align 和 vertical_align 是图例在图表中的位置。

属性	取值	默认值	用途
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	条目横排或竖排
`align`	`"left"` `"center"` `"right"`	`"center"`	水平方向的位置
`vertical_align`	`"top"` `"middle"` `"bottom"`	`"bottom"`	垂直方向的位置
`icon_type`	`"line"` `"plainline"` `"square"` `"rect"` `"circle"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	因数据系列而异	条目图标的形状
`icon_size`	数字	`14`	图标大小
`width` · `height`	数字	自动	容纳图例的盒子尺寸
`payload` · `chart_width` · `chart_height` · `margin`	-	自动	通常由图表计算的值
`on_click` · `on_mouse_enter` 等	事件	-	发生在图例条目上的事件（无参数）

同时设定尺寸和位置

width 和 height 是容纳图例的盒子尺寸。同时设上 layout="vertical"、align="right"、vertical_align="top"，图例就会竖着堆在右上角。图标也可以用 icon_size 和 icon_type 来改。

rx.recharts.composed_chart(
    rx.recharts.line(data_key="pv", type_="monotone", stroke=rx.color("accent", 7)),
    rx.recharts.line(data_key="amt", type_="monotone", stroke=rx.color("green", 7)),
    rx.recharts.line(data_key="uv", type_="monotone", stroke=rx.color("red", 7)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(
        width=60,
        height=100,
        layout="vertical",
        align="right",
        vertical_align="top",
        icon_size=15,
        icon_type="square",
    ),
    data=legend_data,
    width="100%",
    height=300,
)

图例中显示的名称和图标

图例的文字来自数据系列的 name，没有时显示 data_key。图标可以用数据系列的 legend_type 逐个选择；设为 "none" 时，该数据系列就不会出现在图例中。

rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", name="Visitors", fill=rx.color("accent", 8), legend_type="circle"),
    rx.recharts.bar(data_key="pv", name="Page views", fill=rx.color("teal", 8), legend_type="star"),
    rx.recharts.bar(data_key="amt", fill=rx.color("gray", 8), legend_type="none"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.legend(),
    data=legend_data,
    width="100%",
    height=280,
)

隐藏数据系列

把数据系列的 hide 绑定到 State 值上，就能用复选框开关线条。被隐藏的数据系列在图例中仍以浅色保留，让人知道哪些被关掉了。在 Reflex 0.10 中，图例的 on_click 不会告诉你点了哪个条目，所以这类操作要放在图表外的控件上做。

legend_toggle_data = [
    {"day": "Mon", "pv": 2400, "uv": 4000},
    {"day": "Tue", "pv": 1398, "uv": 3000},
    {"day": "Wed", "pv": 9800, "uv": 2000},
    {"day": "Thu", "pv": 3908, "uv": 2780},
    {"day": "Fri", "pv": 4800, "uv": 1890},
]


class LegendSeriesState(rx.State):
    show_pv: bool = True
    show_uv: bool = True

    @rx.event
    def set_show_pv(self, value: bool):
        self.show_pv = value

    @rx.event
    def set_show_uv(self, value: bool):
        self.show_uv = value


rx.vstack(
    rx.hstack(
        rx.checkbox("pv", checked=LegendSeriesState.show_pv, on_change=LegendSeriesState.set_show_pv),
        rx.checkbox("uv", checked=LegendSeriesState.show_uv, on_change=LegendSeriesState.set_show_uv),
        spacing="4",
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9), hide=~LegendSeriesState.show_pv),
        rx.recharts.line(data_key="uv", stroke=rx.color("orange", 9), hide=~LegendSeriesState.show_uv),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=legend_toggle_data,
        width="100%",
        height=260,
    ),
    width="100%",
)

完成订单

给每个数据系列用 name 加上分店名称，图例以小圆点的形式放在右上角。

legend_weekly = [
    {"week": "W1", "seoul": 120, "busan": 80, "daegu": 45},
    {"week": "W2", "seoul": 150, "busan": 95, "daegu": 60},
    {"week": "W3", "seoul": 140, "busan": 110, "daegu": 72},
    {"week": "W4", "seoul": 180, "busan": 105, "daegu": 90},
]


rx.recharts.line_chart(
    rx.recharts.line(data_key="seoul", name="Seoul", stroke=rx.color("accent", 9)),
    rx.recharts.line(data_key="busan", name="Busan", stroke=rx.color("teal", 9)),
    rx.recharts.line(data_key="daegu", name="Daegu", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="week"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(vertical_align="top", align="right", icon_type="circle", icon_size=10),
    data=legend_weekly,
    width="100%",
    height=280,
)

工坊笔记

把 legend() 作为子元素放进图表，每个数据系列都会带上图标和名称。
文字是数据系列的 name（没有时用 data_key），图标是 legend_type。设为 "none" 则不出现在图例中。
layout 定方向，align、vertical_align 定位置，icon_type、icon_size 定图标。
把数据系列的 hide 绑定到 State 就能开关。被隐藏的数据系列在图例里以浅色保留。

← 上一课

图表部件 · Chart Tooltip

下一课 →

图表部件 · Label

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex