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

チャートの部品

Cartesian Grid

rx.recharts.cartesian_grid

公式ドキュメント

工房の注文書

棒の高さを目で読み取りやすいように、チャートの背後に薄い横線だけを敷いてください。

rx.recharts.cartesian_grid はチャートの背後に横・縦のグリッド線を描きます。値がどの目盛りのあたりかを目で追いやすくなります。折れ線チャート、棒チャート、面チャート、散布図のように x・y 軸のあるチャートに子として入れます。

cgrid_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.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="4 4"),
    data=cgrid_data,
    width="100%",
    height=300,
)

stroke_dasharray は SVG の stroke-dasharray と同じで、数値をカンマや空白でつなぎ、「線の長さ、すき間の長さ」を繰り返します。"5,5" は5ピクセルの線と5ピクセルのすき間、"10,5,5,5" は長い線・すき間・短い線・すき間を繰り返します。空のままなら実線です。

プロパティを変えてみる

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

プロパティを変えてみる

stroke_dasharray

horizontal

vertical

stroke

fill

fill_opacity

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(
        stroke_dasharray="4 4",
        horizontal=True,
        vertical=True,
        stroke=rx.color("gray", 7),
        fill=rx.color("indigo", 3),
        fill_opacity=0,
    ),
    data=cgrid_data,
    width="100%",
    height=280,
)

horizontal・vertical で横線と縦線を別々にオン・オフします。fill と fill_opacity はグリッドのマスの背景を塗ります。

プロパティ	値	既定値	用途
`horizontal`	`True` / `False`	`True`	横線を表示
`vertical`	`True` / `False`	`True`	縦線を表示
`stroke_dasharray`	`"4 4"`, `"5,5"` …	実線	破線の模様
`stroke`	色	`rx.color("gray", 7)`	線の色
`fill` · `fill_opacity`	色 · `0`~`1`	なし	グリッドのマスの背景とその不透明度
`horizontal_points` · `vertical_points`	ピクセル位置のリスト	`[]`	線を引く位置を直接指定
`x` · `y` · `width` · `height`	数値	`0`	グリッドの位置とサイズ。普通はチャートが自動で計算する

片方の線だけを残す

vertical=False で縦線を消すと、横線だけが残ります。棒や面の高さを読むには横線で十分なので、画面がぐっと軽くなります。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="2 4", vertical=False, horizontal=True),
    data=cgrid_data,
    width="100%",
    height=300,
)

薄く敷く

class_name でグリッド線の不透明度を下げると、データより前に出ない補助線になります。このサイトは Tailwind を使っているので、"opacity-25" のようなクラスがそのまま効きます。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(horizontal=True, vertical=False, class_name="opacity-25"),
    data=cgrid_data,
    width="100%",
    height=300,
)

線の位置を直接決める

horizontal_points と vertical_points は、線を引く位置をリストで受け取ります。横線はチャートの上端から、縦線は左端から測ったピクセル距離です。

この値は軸の目盛りの値ではなく、画面上のピクセル位置である点に注意します。チャートのサイズが変わっても、線は同じピクセル位置に残ります。特定の区間を目立たせたいときに、控えめに使います。

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


rx.recharts.scatter_chart(
    rx.recharts.scatter(data=cgrid_points, fill="#8884d8"),
    rx.recharts.x_axis(data_key="x", type_="number"),
    rx.recharts.y_axis(data_key="y"),
    rx.recharts.cartesian_grid(
        stroke_dasharray="3 3",
        horizontal_points=[0, 25, 50],
        vertical_points=[65, 90, 115],
    ),
    width="100%",
    height=200,
)

注文書を仕上げる

棒チャートに縦線なしで薄い破線の横線だけを敷き、軸線と目盛り線も消して、グリッドに目盛りの役割を任せます。

rx.recharts.bar_chart(
    rx.recharts.cartesian_grid(vertical=False, stroke_dasharray="3 3", class_name="opacity-50"),
    rx.recharts.bar(data_key="uv", fill=rx.color("accent", 8), radius=[4, 4, 0, 0]),
    rx.recharts.x_axis(data_key="name", axis_line=False, tick_line=False),
    rx.recharts.y_axis(axis_line=False, tick_line=False),
    data=cgrid_data,
    width="100%",
    height=280,
)

工房ノート

cartesian_grid は x・y 軸のあるチャートの子として入れる。
stroke_dasharray="4 4" のように線・すき間の長さを繰り返して破線を作る。
horizontal・vertical で片方の線だけを残す。棒・面チャートは横線で十分。
class_name="opacity-25" のように薄く敷くと、データが前に出る。
horizontal_points・vertical_points は目盛りの値ではなくピクセル位置。

← 前へ

チャートの部品 · Axis

チャートの部品 · Chart Tooltip

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex