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 例

图表部件

Cartesian Grid

rx.recharts.cartesian_grid

官方文档

工坊订单

为了让柱子的高度一眼就能读出来，请在图表后面只铺上浅浅的横线。

rx.recharts.cartesian_grid 在图表背后画出横向和纵向的网格线，让人更容易用眼睛追踪数值落在哪个刻度附近。把它作为子元素放进折线图、柱形图、面积图、散点图这类带 x、y 轴的图表中。

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray 与 SVG 的 stroke-dasharray 相同：用逗号或空格连接数字，循环表示“线段长度、间隔长度”。"5,5" 是 5 像素线段加 5 像素间隔，"10,5,5,5" 则重复长线、间隔、短线、间隔。留空就是实线。

试着改属性

从下面的示例开始，都直接使用上面创建的 cgrid_data。

试着改属性

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

horizontal、vertical 分别开关横线和竖线。fill 和 fill_opacity 用来给网格格子涂底色。

属性	取值	默认值	用途
`horizontal`	`True` / `False`	`True`	显示横线
`vertical`	`True` / `False`	`True`	显示竖线
`stroke_dasharray`	`"4 4"`、`"5,5"` …	实线	虚线样式
`stroke`	颜色	`rx.color("gray", 7)`	线的颜色
`fill` · `fill_opacity`	颜色 · `0`~`1`	无	网格格子的底色及其不透明度
`horizontal_points` · `vertical_points`	像素位置列表	`[]`	直接指定画线的位置
`x` · `y` · `width` · `height`	数字	`0`	网格的位置和尺寸。通常由图表自动计算

只留一个方向的线

用 vertical=False 关掉竖线，就只剩横线。要读柱子或面积的高度，横线就足够了，画面也会清爽很多。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

浅浅地铺一层

用 class_name 降低网格线的不透明度，它就成了不会抢数据风头的参考线。本站使用 Tailwind，所以 "opacity-25" 这样的类可以直接生效。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

直接指定线的位置

horizontal_points 和 vertical_points 以列表形式接收画线的位置。横线是从图表顶边量起的像素距离，竖线是从左边量起的像素距离。

注意，这些值不是轴的刻度值，而是画面中的像素位置。即使图表尺寸改变，线仍停在同样的像素位置上。只在需要突出某个区间时谨慎使用。

cgrid_points = [
    {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 170, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280},
    {"x": 200, "y": 150}, {"x": 130, "y": 350}, {"x": 90, "y": 220},
    {"x": 180, "y": 320}, {"x": 140, "y": 230}, {"x": 160, "y": 180},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

完成订单

在柱形图上不画竖线，只铺浅色虚线横线，再去掉轴线和刻度线，让网格代替刻度的作用。

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

工坊笔记

cartesian_grid 作为子元素放进带 x、y 轴的图表。
像 stroke_dasharray="4 4" 这样循环线段与间隔的长度来做虚线。
用 horizontal、vertical 只留一个方向的线。柱形图、面积图有横线就够了。
像 class_name="opacity-25" 这样浅浅地铺，数据就会更突出。
horizontal_points、vertical_points 是像素位置，不是刻度值。

← 上一课

图表部件 · Axis

下一课 →

图表部件 · Chart Tooltip

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex