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 例

图表

Composed Chart

rx.recharts.composed_chart

官方文档

工坊订单

请把每月订单数画成柱子、目标值画成虚线，叠在同一张图里，让超额完成的月份一眼可见。

rx.recharts.composed_chart 是一个容器，能在一张图里混合绘制面积（area）、柱子（bar）和折线（line）。比如实际值用柱子、目标或平均值用折线，单靠一种图表说不清楚时就用它。子组件按书写顺序绘制，所以后写的系列会叠在先写的系列上面。

示例都使用下面这份 composedchart_data。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

试着改属性

组合图同时拥有柱状图的间距属性和面积图的 base_value。base_value 是面积起始的底部。设为 "dataMin" 时从数据的最小值开始，面积看起来就像浮了起来。

试着改属性

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_value 只影响 area，bar_category_gap 只影响 bar。同一个容器的属性按系列类型分别生效。

属性	取值	默认值	用途
`data`	dict 的列表	无	所有系列共用的数据
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	排布方向
`base_value`	数字，`"dataMin"` `"dataMax"` `"auto"`	`"auto"`	`area` 的底部值
`bar_category_gap`	百分比或数字	`"10%"`	项目之间的间距（`bar`）
`bar_gap`	数字	`4`	同一项目内柱子的间距（`bar`）
`bar_size`	数字	自动	所有柱子的粗细
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	无	堆叠系列的基准计算
`reverse_stack_order`	`True` / `False`	`False`	反转堆叠顺序
`sync_id`, `sync_method`	字符串 / `"index"` `"value"`	无 / `"index"`	与其他图表联动提示框和刷选区
`margin`, `width`, `height`	dict / 数字或百分比		四周留白和尺寸
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	事件		图表区域的鼠标事件

area、bar、line 各自的属性与对应图表页面相同。在 0.10 中，composed_chart 的 bar_gap 只接受数字（bar_chart 还接受百分比字符串）。

什么时候用组合图

想同时看实际值（柱子）和目标、平均、趋势（折线）时
想在同一条 x 轴上比较性质不同的值时，比如总量（面积）和其中的事件数（柱子）

所有系列共用同一份 data、同一组坐标轴、同一个提示框和图例。所以一个提示框里会同时显示柱子的值和折线的值。

绘制顺序

子组件按书写顺序从下往上叠。上面的图表先写柱子，下面的图表先写面积。颜色深的面积放在后面会遮住柱子，所以通常把大面积涂色的系列写在前面。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

使用两条坐标轴

订单数（几十）和销售额（几千）这种量级完全不同的值放在同一条轴上，其中一个会被压在底部。用 orientation="right" 把第二条 y 轴放到右侧，再用 y_axis_id 把系列和坐标轴配对。两套刻度容易读错，要用图例和坐标轴颜色讲清楚哪个值对应哪条轴。

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

完成订单

订单数用柱子，目标值用虚线 line 叠在上面。把折线写在柱子之后，让它画在上层；再用 dot=False 去掉数据点，看起来就像一条基准线。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

工坊笔记

在一个 composed_chart 里混合放入 area、bar、line。数据、坐标轴、提示框共用。
后写的子组件画在上层。大面积涂色的系列写在前面。
base_value 作用于 area，bar_category_gap、bar_gap、bar_size 作用于 bar。
量级不同的值用 y_axis_id 放到第二条轴上。只在确有必要时才用。
用 sync_id 与其他图表联动的方法和 Area Chart 页面相同。

← 上一课

图表 · Line Chart

下一课 →

图表 · Pie Chart

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex