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は、1つの値に「このくらいの誤差がある」という幅をひげのような線で描き足す部品です。測定値、平均と標準偏差、予測の範囲のように、不確かさも一緒に見せたいときに使います。単独では使わず、誤差を付けたい系列（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,
)

プロパティを変えてみる

エラーバーの向き、色、線の太さを変えてみてください。このデータは1つの誤差の値（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`	文字列	なし	誤差の大きさのキー。値は数値1つまたは`[下, 上]`
`direction`	`"x"` `"y"`	なし	散布図での誤差の向き
`width`	数値	`5`	ひげの先の横線の長さ（ピクセル）
`stroke`	色	gray 8	線の色
`stroke_width`	数値	`1.5`	線の太さ

error_barはscatter、line、barの中に入れます。0.10ではareaの中には入れられません。

対称な誤差と非対称な誤差

誤差の値が数値1つ（20）なら、値の上下（または左右）に同じ長さで描きます。[30, 20]のように2つ渡すと、前が下側（左側）、後ろが上側（右側）の長さです。いちばん上の例のerrorbar_dataは、2つの方式を混ぜてあります。1つ目の点は下に30、上に20で、3つ目の点は上下に20ずつです。

折れ線グラフに誤差を付ける

lineの中にerror_barを入れると、線の点ごとに縦の誤差が付きます。月ごとの平均気温のように、値ごとにどれだけ揺れうるかを一緒に見せられます。

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を入れて点数の散らばりを示しました。Class BとClass 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の値が数値1つなら対称、[下, 上]なら非対称な誤差。
散布図ではdirection="x"/"y"で向きを決め、2つを一緒に入れられる。
widthはひげの先の長さ、stroke・stroke_widthは線の色と太さ。

← 前へ

チャート · Sankey Chart

チャートの部品 · Axis

新しい授業・講座のお知らせを受け取る

この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。

質問と回答

この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。

ReflexKR

触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。

ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する

アフィリエイトと支援について

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

Built with Reflex