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

チャートの部品

Reference

rx.recharts.reference_linerx.recharts.reference_dotrx.recharts.reference_area

公式ドキュメント

工房の注文書

月間売上チャートに目標線 5000 を引き、セール期間は色で塗り、最高の月には点を打ってください。

基準の部品はデータとは別に、チャートの上に「ここを見てください」という印を載せます。reference_line は1つの値に横線や縦線を、reference_area は区間に塗った四角形を、reference_dot は1つの座標に点を描きます。目標値、平均、外れ値、セール期間のように、解釈を助ける印に使います。

reference_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.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

プロパティを変えてみる

基準線の見た目を変えてみます。ここから下の例では、上で作った reference_data をそのまま使います。

プロパティを変えてみる

label

stroke

stroke_width

stroke_dasharray

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 5)),
    rx.recharts.reference_line(
        y=4343,
        label="Average",
        stroke=rx.color("green", 10),
        stroke_width=1,
        stroke_dasharray="",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=280,
)

label は線の上に文字を載せ、stroke_dasharray は線を破線にします。

プロパティ	値	対象	用途
`x` · `y`	数値またはカテゴリの値	line · dot	線を引く、または点を打つ位置。カテゴリ軸ならカテゴリ名
`x1` `x2` `y1` `y2`	数値またはカテゴリの値	area	四角形の境界。x 側を省くと x 方向全体、y 側を省くと y 方向全体
`segment`	`[{"x", "y"}, {"x", "y"}]`	line	2つの端点を結ぶ斜めの線
`r`	数値	dot	点の半径
`label`	文字列、数値	line · dot	文字を付ける。さらに装飾するなら `rx.recharts.label` を子に
`stroke` · `fill` · `fill_opacity`	色 · 色 · `0`~`1`	すべて	線の色、塗りの色、塗りの不透明度
`stroke_width` · `stroke_dasharray`	数値 · `"4 4"`	line	線の太さ（既定 `1`）、破線の模様
`if_overflow`	`"discard"` `"hidden"` `"visible"` `"extendDomain"`	すべて	軸の範囲を外れたときの処理（既定 `"discard"`）
`x_axis_id` · `y_axis_id`	軸の id	すべて	軸が複数あるとき、どの軸を基準にするか
`on_click` など	イベント	dot	点をクリックしたりマウスを乗せたりしたとき（引数なし）

Reference Area：区間を塗る

reference_area は x1〜x2、y1〜y2 で四角形を描きます。数値軸なら数値、カテゴリ軸ならカテゴリ名を使います。fill_opacity を下げないと、下のデータが透けて見えません。

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, fill="#8884d8", name="A"),
    rx.recharts.reference_area(x1=150, x2=180, y1=150, y2=300, fill="#8884d8", fill_opacity=0.3),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Reference Line：線を引く

y を指定するとその値に横線が、x を指定すると縦線ができます。x 軸がカテゴリ軸なら x="Page C" のようにカテゴリ名を使います。segment に2つの端点を与えると、斜めの線も描けます（オレンジの破線）。

rx.recharts.area_chart(
    rx.recharts.area(data_key="pv", stroke=rx.color("accent", 8), fill=rx.color("accent", 7)),
    rx.recharts.reference_line(x="Page C", stroke=rx.color("accent", 10), label="Max PV PAGE"),
    rx.recharts.reference_line(y=9800, stroke=rx.color("green", 10), label="Max"),
    rx.recharts.reference_line(y=4343, stroke=rx.color("green", 10), label="Average"),
    rx.recharts.reference_line(
        segment=[{"x": "Page A", "y": 2400}, {"x": "Page G", "y": 4300}],
        stroke=rx.color("orange", 9),
        stroke_dasharray="6 3",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=reference_data,
    width="100%",
    height=300,
)

Reference Dot：点を打つ

reference_dot は x、y の座標に半径 r の点を打ちます。注目したいデータ点を囲んだり、データにない基準点を示したりするときに使います。下では前の reference_points を使います。

rx.recharts.scatter_chart(
    rx.recharts.scatter(data=reference_points, 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"),
    rx.recharts.reference_dot(x=160, y=350, r=15, fill=rx.color("accent", 5), stroke=rx.color("accent", 10)),
    rx.recharts.reference_dot(x=170, y=300, r=20, fill=rx.color("accent", 7)),
    rx.recharts.reference_dot(x=90, y=220, r=18, fill=rx.color("green", 7)),
    width="100%",
    height=240,
)

軸の範囲を外れたら：if_overflow

データの最大値は 4000 なのに基準線を 6000 に引くと、既定値の "discard" は線をまったく描きません（左）。"extendDomain" は軸の範囲を広げて線が見えるようにします（右）。"hidden" は領域の外を切り取り、"visible" は外にはみ出しても描きます。

rx.flex(
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="discard", stroke=rx.color("red", 9)),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    rx.recharts.line_chart(
        rx.recharts.line(data_key="uv"),
        rx.recharts.reference_line(y=6000, label="extendDomain", stroke=rx.color("red", 9), if_overflow="extendDomain"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=reference_data,
        width=280,
        height=200,
    ),
    spacing="4",
    wrap="wrap",
)

State で基準を動かす

y のような位置の値にも State をつなげます。スライダーで目標を変えると線がついて動き、目標を超えた月の数も一緒に変わります。

Goal

5000

3 months reached

reference_sales = [
    {"month": "Jan", "sales": 3200}, {"month": "Feb", "sales": 4100}, {"month": "Mar", "sales": 5600},
    {"month": "Apr", "sales": 4700}, {"month": "May", "sales": 6300}, {"month": "Jun", "sales": 5900},
]


class ReferenceGoalState(rx.State):
    goal: int = 5000

    @rx.event
    def set_goal(self, value: list[float]):
        self.goal = int(value[0])

    @rx.var
    def hits(self) -> int:
        return sum(1 for row in reference_sales if row["sales"] >= self.goal)


rx.vstack(
    rx.hstack(
        rx.text("Goal", size="2"),
        rx.slider(value=[ReferenceGoalState.goal], min=2000, max=7000, step=100, on_change=ReferenceGoalState.set_goal, width="200px"),
        rx.badge(ReferenceGoalState.goal),
        rx.text(ReferenceGoalState.hits, " months reached", size="2"),
        align="center",
        wrap="wrap",
    ),
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="sales", fill=rx.color("accent", 8)),
        rx.recharts.reference_line(y=ReferenceGoalState.goal, stroke=rx.color("red", 9), stroke_dasharray="4 4"),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(domain=[0, 7000]),
        data=reference_sales,
        width="100%",
        height=260,
    ),
    width="100%",
)

点をクリックする

reference_dot には on_click などのマウスイベントがあります。イベントは値を渡してくれないので、下のようにハンドラーに引数を直接入れて、どの点かを伝えます。

Click a marked dot

reference_click_points = [
    {"x": 45, "y": 100}, {"x": 100, "y": 200}, {"x": 120, "y": 100}, {"x": 170, "y": 300},
    {"x": 140, "y": 250}, {"x": 150, "y": 400}, {"x": 110, "y": 280}, {"x": 80, "y": 150},
]


class ReferenceDotState(rx.State):
    picked: str = "Click a marked dot"

    @rx.event
    def pick(self, name: str):
        self.picked = name


rx.vstack(
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=reference_click_points, fill=rx.color("gray", 8)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.reference_dot(x=150, y=400, r=14, fill=rx.color("red", 7), on_click=ReferenceDotState.pick("Highest")),
        rx.recharts.reference_dot(x=45, y=100, r=14, fill=rx.color("blue", 7), on_click=ReferenceDotState.pick("Lowest")),
        width="100%",
        height=220,
    ),
    rx.text(ReferenceDotState.picked, size="2", weight="bold"),
    width="100%",
)

注文書を仕上げる

セール期間は reference_area、目標は reference_line、最高の月は reference_dot です。領域を系列より先に入れると、線の後ろに敷かれます。上の reference_sales を使います。

rx.recharts.line_chart(
    rx.recharts.reference_area(
        rx.recharts.label(value="Sale week", position="insideTop"),
        x1="Mar",
        x2="Apr",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.line(data_key="sales", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopLeft"),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_dot(x="May", y=6300, r=8, fill=rx.color("green", 9), stroke="white"),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    data=reference_sales,
    width="100%",
    height=280,
)

工房ノート

reference_line は x か y の1つの値に線、segment で斜めの線。
reference_area は x1・x2・y1・y2 の四角形。fill_opacity を下げてデータを透かす。
reference_dot は x・y に半径 r の点。on_click には引数を直接入れて区別する。
軸の範囲外なら既定では描かない。if_overflow="extendDomain" で軸を広げる。
文字は label="…" または rx.recharts.label の子。描く順序がそのまま重なる順序。

← 前へ

チャートの部品 · Label

チャートの部品 · Brush

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex