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

チャート

Scatter Chart

rx.recharts.scatter_chartrx.recharts.scatterrx.recharts.z_axis

公式ドキュメント

工房の注文書

2チームの選手の身長と体重を点で打ち、年齢は点の大きさで見せて、チームごとの体格の分布を比べられるようにしてください。

rx.recharts.scatter_chartは、x値とy値が交わる位置に点を打つ散布図です。2つの数値の関係（背が高いと体重も重いのか）や、集団から離れた値を見つけたいときに使います。ほかの直交座標のチャートと違い、dataは系列（rx.recharts.scatter）ごとに別々に渡し、軸のdata_keyでどの値をx・yに使うかを決めます。

x軸は既定では項目の軸なので、数値として使うなら必ずtype_="number"を指定します。例では下の2つのデータを使います。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    width="100%",
    height=280,
)

プロパティを変えてみる

点の形（shape）、凡例アイコン（legend_type）、点を結ぶ線（line）とその線の引き方（line_type）を変えてみてください。line_type="fitting"は点の間を通る回帰直線を引きます。

プロパティを変えてみる

color

shape

legend_type

line

line_type

rx.recharts.scatter_chart(
    rx.recharts.scatter(
        data=scatterchart_a,
        name="A",
        fill=rx.color("indigo", 9),
        shape="circle",
        legend_type="circle",
        line=False,
        line_type="joint",
    ),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    width="100%",
    height=280,
)

line_typeはlineをオンにしたときだけ見えます。jointは点を順番に結び、fittingはトレンドの直線を1本引きます。

プロパティ	値	既定値	用途
`scatter_chart(width=, height=, margin=)`	数値・パーセント / dict	`"100%"` / 各5	サイズと余白。`data`はここにはない
`scatter(data=)`	dictのリスト	なし	この系列の点
`scatter(name=)`	文字列	なし	凡例・ツールチップに表示する名前
`scatter(fill=)`	色	accent 9	点の色
`scatter(shape=)`	`"circle"` `"square"` `"cross"` `"diamond"` `"star"` `"triangle"` `"wye"`	`"circle"`	点の形
`scatter(legend_type=)`	上の形、`"line"` `"rect"` `"none"` …	`"circle"`	凡例のアイコン
`scatter(line=, line_type=)`	`True` / `False`、`"joint"` `"fitting"`	`False` / `"joint"`	点を結ぶ線
`scatter(x_axis_id=, y_axis_id=, z_axis_id=)`	文字列・数値	`0`	どの軸に付けるか
`scatter(is_animation_active=, animation_duration=, …)`			登場アニメーション
`z_axis(data_key=, range=, name=, unit=)`	キー、`[最小, 最大]`ピクセル	`[60, 400]`	3つ目の値を点の大きさに
イベント	`on_click` `on_mouse_enter` `on_mouse_leave` …		チャートと`scatter`の両方が受け取る

複数の集団を重ねる

系列ごとにscatterを1つずつ入れ、それぞれにdataとname、色を渡します。凡例にはnameが表示されます。z_axisを入れると、データの3つ目の値（z）がツールチップに一緒に表示され、点の大きさにも使われます。複数の軸に振り分けるx_axis_id、y_axis_idはエリアチャートのページで扱います。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

形で集団を区別する

色だけで集団を分けると、色を見分けにくい人には同じ集団に見えることがあります。系列ごとにshapeも変えておけば、白黒でも区別できます。凡例のアイコンもその形に合わせて変わります。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
    rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
    rx.recharts.scatter(
        data=[
            {"x": 130, "y": 150},
            {"x": 160, "y": 180},
            {"x": 220, "y": 170},
            {"x": 250, "y": 200},
            {"x": 175, "y": 130},
        ],
        fill=rx.color("amber", 9),
        name="C",
        shape="star",
    ),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.legend(),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

バブルチャート (z_axis)

z_axis(data_key="z", range=[60, 400])は、zの値がいちばん小さい点を60、いちばん大きい点を400の大きさ（面積）で描きます。x・yに加えて3つ目の値を点の大きさで見せるのがバブルチャートです。軸のnameはツールチップに表示する名前です。

scatterchart_a = [
    {"x": 100, "y": 200, "z": 200},
    {"x": 120, "y": 100, "z": 260},
    {"x": 170, "y": 300, "z": 400},
    {"x": 140, "y": 250, "z": 280},
    {"x": 150, "y": 400, "z": 500},
    {"x": 110, "y": 280, "z": 200},
]

scatterchart_b = [
    {"x": 200, "y": 260, "z": 240},
    {"x": 240, "y": 290, "z": 220},
    {"x": 190, "y": 290, "z": 250},
    {"x": 198, "y": 250, "z": 210},
    {"x": 180, "y": 280, "z": 260},
    {"x": 210, "y": 220, "z": 230},
]


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="x", name="x", type_="number"),
    rx.recharts.y_axis(data_key="y", name="y", type_="number"),
    rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

Stateで変わるデータ

コラッツ予想の数列を点で打ちます。偶数なら2で割り、奇数なら3を掛けて1を足す、という操作を1になるまで繰り返します。数を入力して送信すると、ハンドラーが数列を計算し直してdataに入れ、チャートが描き直されます。最初の値は15から始まります。

Start: 15

def scatterchart_collatz(n: int) -> list[dict[str, int]]:
    rows = []
    for step in range(400):
        rows.append({"x": step, "y": n})
        if n == 1:
            break
        n = n // 2 if n % 2 == 0 else 3 * n + 1
    return rows


class ScatterChartCollatzState(rx.State):
    start: int = 15
    data: list[dict[str, int]] = scatterchart_collatz(15)

    @rx.event
    def compute(self, form_data: dict):
        try:
            n = int(form_data.get("start") or 1)
        except ValueError:
            n = 1
        self.start = min(max(n, 1), 1_000_000)
        self.data = scatterchart_collatz(self.start)


rx.vstack(
    rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
    rx.recharts.scatter_chart(
        rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
        rx.recharts.x_axis(data_key="x", type_="number"),
        rx.recharts.y_axis(data_key="y", type_="number"),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=260,
    ),
    rx.form.root(
        rx.hstack(
            rx.input(placeholder="Enter a number", name="start", type="number"),
            rx.button("Compute", type="submit"),
        ),
        on_submit=ScatterChartCollatzState.compute,
        reset_on_submit=True,
    ),
    width="100%",
)

注文書を仕上げる

身長をx、体重をy、年齢をz_axisの点の大きさに使いました。2チームは色と形の両方を変え、軸にunitとnameを付けて、ツールチップが「height: 170cm」のように読めるようにしています。x軸はdomainで150〜190だけを表示し、点が広く散らばるようにしました。

rx.recharts.scatter_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.scatter(
        data=[
            {"height": 160, "weight": 52, "age": 21},
            {"height": 165, "weight": 58, "age": 34},
            {"height": 170, "weight": 63, "age": 28},
            {"height": 158, "weight": 49, "age": 45},
            {"height": 175, "weight": 70, "age": 39},
        ],
        name="Team A",
        fill=rx.color("accent", 9),
    ),
    rx.recharts.scatter(
        data=[
            {"height": 172, "weight": 66, "age": 25},
            {"height": 180, "weight": 78, "age": 31},
            {"height": 168, "weight": 61, "age": 52},
            {"height": 185, "weight": 82, "age": 27},
            {"height": 177, "weight": 74, "age": 44},
        ],
        name="Team B",
        fill=rx.color("teal", 9),
        shape="triangle",
    ),
    rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
    rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
    rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

工房ノート

dataはチャートではなくscatterごとに渡す。x・yは軸のdata_keyで選ぶ。
数値のx軸には必ずx_axis(type_="number")を指定する。
集団ごとにscatterを1つ。nameは凡例、shapeは点の形（色と併用するとさらに区別しやすい）。
z_axis(data_key=, range=[最小, 最大])で3つ目の値を点の大きさで見せればバブルチャート。
line=Trueとline_type="fitting"でトレンドラインを引く。

← 前へ

チャート · Radial Bar Chart

チャート · Funnel Chart

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex