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 例

图表

Error Bar

rx.recharts.error_bar

官方文档

工坊订单

请在各班平均分的柱子上，一并画出表示分数离散范围的误差线。

rx.recharts.error_bar 是一个部件，用胡须状的线在一个值上叠画出"大约有这么多误差"的范围。展示测量值、平均值与标准差、预测区间这类不确定性时就用它。它不单独使用，而是作为子组件放进要加误差的系列（scatter、line、bar）里。

data_key 是从数据中读取误差大小的键。在散点图里，direction="y" 表示纵向误差，direction="x" 表示横向误差，两者也可以一起放。

errorbar_data = [
    {"x": 45, "y": 100, "errorY": [30, 20], "errorX": 5},
    {"x": 100, "y": 200, "errorY": [20, 30], "errorX": 3},
    {"x": 120, "y": 100, "errorY": 20, "errorX": [5, 3]},
    {"x": 170, "y": 300, "errorY": [15, 18], "errorX": 4},
    {"x": 140, "y": 250, "errorY": 23, "errorX": [6, 7]},
    {"x": 150, "y": 400, "errorY": [21, 10], "errorX": 4},
    {"x": 110, "y": 280, "errorY": 21, "errorX": [5, 6]},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(data_key="errorY", direction="y", width=4, stroke_width=2, stroke=rx.color("red", 9)),
        rx.recharts.error_bar(data_key="errorX", direction="x", width=4, stroke_width=2),
        data=errorbar_data,
        fill=rx.color("accent", 9),
        name="A",
    ),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    width="100%",
    height=300,
)

试着改属性

试着改一改误差线的方向、颜色和线宽。这份数据在两个方向上都使用同一个误差值（err）。

试着改属性

direction

color

stroke_width

1.5

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        rx.recharts.error_bar(
            data_key="err",
            direction="y",
            stroke=rx.color("red", 9),
            stroke_width=1.5,
        ),
        data=[
            {"x": 10, "y": 30, "err": 4},
            {"x": 20, "y": 45, "err": [6, 2]},
            {"x": 30, "y": 38, "err": 3},
            {"x": 40, "y": 60, "err": [2, 8]},
            {"x": 50, "y": 52, "err": 5},
        ],
        fill=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="x", type_="number", domain=[0, 60]),
    rx.recharts.y_axis(data_key="y", type_="number", domain=[0, 80]),
    width="100%",
    height=280,
)

只有散点图能选择 direction。柱状图和折线图中，误差线沿数值轴方向绘制。

属性	取值	默认值	用途
`data_key`	字符串	无	误差大小的键。值为一个数字或 `[下, 上]`
`direction`	`"x"` `"y"`	无	散点图中误差的方向
`width`	数字	`5`	胡须末端横线的长度（像素）
`stroke`	颜色	gray 8	线条颜色
`stroke_width`	数字	`1.5`	线宽

error_bar 放在 scatter、line、bar 里。在 0.10 中不能放进 area。

对称误差与非对称误差

误差值是一个数字（20）时，在值的上下（或左右）画出等长的线。给 [30, 20] 这样两个数时，前一个是下方（左侧）的长度，后一个是上方（右侧）的长度。最上面示例的 errorbar_data 混用了这两种方式：第一个点向下 30、向上 20，第三个点上下各 20。

给折线图加误差

把 error_bar 放进 line，折线上的每个点都会带上纵向误差。像每月平均气温这样，可以同时展示每个值可能波动多少。

rx.recharts.line_chart(
    rx.recharts.line(
        rx.recharts.error_bar(
            data_key="error",
            direction="y",
            width=4,
            stroke_width=2,
            stroke=rx.color("accent", 9),
        ),
        data_key="temp",
        stroke=rx.color("accent", 9),
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=[
        {"month": "Jan", "temp": 7, "error": [2, 3]},
        {"month": "Feb", "temp": 9, "error": 2},
        {"month": "Mar", "temp": 12, "error": [3, 2]},
        {"month": "Apr", "temp": 16, "error": 3},
        {"month": "May", "temp": 20, "error": [2, 4]},
        {"month": "Jun", "temp": 24, "error": 3},
    ],
    width="100%",
    height=280,
)

完成订单

用柱子展示各班平均分，并在 bar 里放入 error_bar 标出分数的离散程度。B 班和 D 班是上下长度不同的非对称误差。胡须用比柱子更深的灰色绘制，即使和柱子颜色重叠也看得清。

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(
        rx.recharts.error_bar(data_key="spread", width=6, stroke_width=1.5, stroke=rx.color("gray", 12)),
        data_key="score",
        name="Average score",
        fill=rx.color("accent", 8),
        radius=[4, 4, 0, 0],
        max_bar_size=40,
    ),
    rx.recharts.x_axis(data_key="group"),
    rx.recharts.y_axis(domain=[0, 100]),
    rx.recharts.graphing_tooltip(),
    data=[
        {"group": "Class A", "score": 72, "spread": 8},
        {"group": "Class B", "score": 65, "spread": [12, 6]},
        {"group": "Class C", "score": 81, "spread": 5},
        {"group": "Class D", "score": 58, "spread": [9, 14]},
    ],
    width="100%",
    height=300,
)

工坊笔记

error_bar 作为子组件放进 scatter、line、bar 里。
data_key 的值是一个数字就是对称误差，是 [下, 上] 就是非对称误差。
在散点图里用 direction="x"/"y" 设定方向，两个可以一起放。
width 是胡须末端的长度，stroke、stroke_width 是线条的颜色和粗细。

← 上一课

图表 · Sankey Chart

下一课 →

图表部件 · Axis

订阅新课时和新课程通知

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

问答

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

ReflexKR

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

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

联盟链接与赞助说明

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

Built with Reflex