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

チャートの部品

Brush

rx.recharts.brush

公式ドキュメント

工房の注文書

30日分の注文を1つのチャートに収めつつ、最初は最後の1週間だけを大きく表示し、ハンドルで区間を動かせるようにしてください。

rx.recharts.brush はチャートの下に付く区間選択バーです。両側のハンドルをドラッグして見たいデータの範囲を選ぶと、上のチャートがその範囲だけを大きく描きます。データ点が多くて1画面に収まりにくいときに使います。折れ線・棒・面・複合チャートに子として入れます。

import math

brush_data = [
    {"name": str(i), "uv": round(300 * math.sin(i / 3)), "pv": round(250 + 300 * math.cos(i / 5))}
    for i in range(1, 41)
]


rx.recharts.bar_chart(
    rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=300,
)

data_key の値がハンドルの横の文字として表示されます。真ん中のグレーの区間をドラッグすると、範囲の長さはそのままで位置だけが動きます。

プロパティを変えてみる

ここから下の例では、上で作った brush_data をそのまま使います。

プロパティを変えてみる

data_key

stroke

fill

rx.recharts.line_chart(
    rx.recharts.line(data_key="uv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", stroke=rx.color("indigo", 9), fill=rx.color("gray", 3)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=280,
)

stroke は枠線とハンドルの色、fill は背景色です。data_key を変えると、ハンドルの横の文字が変わります。

プロパティ	値	既定値	用途
`data_key`	列名	-	ハンドルの横に表示する値
`start_index` · `end_index`	データの番号	`0` · 最後	最初に選ぶ範囲
`height`	数値	`40`	バーの高さ
`traveller_width`	数値	`5`	ハンドル（traveller）の幅
`gap`	数値	`1`	何マスごとにチャートを描き直すか
`stroke` · `fill`	色	`rx.color("gray", 9)` · `rx.color("gray", 2)`	枠線・ハンドルの色、背景色
`x` · `y` · `width`	数値	自動	バーの位置と幅。普通はチャートが計算する
`data`	リスト	チャートの data	ブラシに使う元データ
`on_change`	イベント	-	範囲が変わったとき（0.10 では引数なし）

最初の範囲とハンドルの大きさ

start_index と end_index は最初に選ぶ範囲です。データの番号（0 から）なので、下では4番目〜11番目の点が表示されます。traveller_width はハンドルの幅で、広いほどつかみやすくなります。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.area(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
    rx.recharts.brush(
        data_key="name",
        traveller_width=15,
        start_index=3,
        end_index=10,
        stroke=rx.color("mauve", 10),
        fill=rx.color("mauve", 3),
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=200,
)

gap は上のチャートを描き直す間隔です。gap=5 ならハンドルが5マス動くたびに1回チャートを更新するので、点がとても多いときに描き直しの回数が減ります。

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.brush(data_key="name", gap=5, height=24, traveller_width=10, end_index=19),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=brush_data,
    width="100%",
    height=240,
)

範囲が変わったとき：on_change

on_change はハンドルを動かすたびに発生します。Reflex 0.10 ではこのイベントが新しい範囲を渡してくれないので（公式ドキュメントの表でも説明が空欄です）、「動いた」という事実しかわかりません。ドラッグ中にイベントが殺到しないよう、ハンドラーに debounce を付けました。

Brush moved 0 times

brush_days = [{"day": f"D{i}", "orders": 40 + (i * 37) % 60} for i in range(1, 31)]


class BrushMoveState(rx.State):
    moves: int = 0

    @rx.event(debounce=300)
    def moved(self):
        self.moves += 1


rx.vstack(
    rx.recharts.bar_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("accent", 8)),
        rx.recharts.brush(data_key="day", height=26, on_change=BrushMoveState.moved),
        rx.recharts.x_axis(data_key="day"),
        data=brush_days,
        width="100%",
        height=240,
    ),
    rx.text("Brush moved ", BrushMoveState.moves, " times", size="2"),
    width="100%",
)

注文書を仕上げる

30日分をすべて入れ、start_index=23、end_index=29 で最後の1週間だけを最初に表示します。上の brush_days を使います。

rx.recharts.composed_chart(
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 7)),
    rx.recharts.line(data_key="orders", stroke=rx.color("orange", 9), dot=False, legend_type="none"),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.brush(
        data_key="day",
        start_index=23,
        end_index=29,
        height=28,
        traveller_width=10,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 2),
    ),
    data=brush_days,
    width="100%",
    height=300,
)

工房ノート

brush を折れ線・棒・面チャートの子に入れると、下に区間選択バーができる。
data_key はハンドルの横の文字、start_index・end_index は最初の範囲（番号）。
height・traveller_width でサイズ、stroke・fill で色、gap で描き直す間隔。
on_change は 0.10 では範囲を渡さない。動いたかどうかだけがわかる。

← 前へ

チャートの部品 · Reference

ほかのチャートライブラリ · Plotly

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex