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

チャートの部品

Label

rx.recharts.labelrx.recharts.label_list

公式ドキュメント

工房の注文書

棒ごとに上に数字を直接書き、横軸の下には「Pages」と名前を書いてください。

チャートの中に文字を書く部品は2つあります。rx.recharts.label は軸や基準線のような1か所に文字を1つ付け、rx.recharts.label_list は系列のデータ点ごとに値を1つずつ自動で書きます。棒の上の数字は label_list、軸名は label です。

label_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": 5800, "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.bar_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        fill=rx.color("accent", 8),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="center", position="center", offset=30),
        rx.recharts.label(value="inside left", position="insideLeft", offset=10),
        rx.recharts.label(value="inside right", position="insideRight", offset=10),
        height=50,
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 20, "bottom": 20},
    width="100%",
    height=250,
)

label は x_axis の子として入り、軸に付きます。value が文字、position が位置、offset がその位置から押し出す距離です。label_list は bar の子として入り、data_key の列の値を棒ごとに書きます。

プロパティを変えてみる

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

プロパティを変えてみる

list_position

list_fill

value

position

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        data_key="uv",
        fill=rx.color("accent", 6),
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center"),
        data_key="name",
        height=50,
    ),
    data=label_data,
    margin={"top": 20, "left": 20, "right": 20},
    width="100%",
    height=280,
)

label_list の position は棒を基準に、label の position は軸の領域を基準に位置を決めます。

rx.recharts.label

プロパティ	値	既定値	用途
`value`	文字列	-	表示する文字
`position`	`"top"` `"left"` `"right"` `"bottom"` `"inside"` `"outside"` `"insideLeft"` `"insideRight"` `"insideTop"` `"insideBottom"` `"insideTopLeft"` `"insideBottomLeft"` `"insideTopRight"` `"insideBottomRight"` `"insideStart"` `"insideEnd"` `"end"` `"center"`	-	親の領域内での位置
`offset`	数値	-	その位置から押し出す距離
`view_box`	dict	自動	基準の領域。普通は自動で計算

rx.recharts.label_list

プロパティ	値	既定値	用途
`data_key`	列名	-	点ごとに書く値の列
`position`	`label` と同じ18種類	-	棒・点を基準にした位置
`offset`	数値	`5`	その位置から離す距離
`fill`	色	`rx.color("gray", 10)`	文字色
`stroke`	色	`"none"`	文字の縁取りの色

系列ごとに値を書く：label_list

label_list は、自分を含む系列のデータ点ごとに文字を書きます。棒が2つなら棒ごとに label_list を1つずつ入れ、data_key でどの列の値を書くかを決めます。

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top"),
        data_key="uv",
        stroke="#8884d8",
        fill="#8884d8",
    ),
    rx.recharts.bar(
        rx.recharts.label_list(data_key="pv", position="top"),
        data_key="pv",
        stroke="#82ca9d",
        fill="#82ca9d",
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    margin={"left": 10, "right": 0, "top": 20, "bottom": 10},
    data=label_data,
    width="100%",
    height=300,
)

文字を装飾する

label のプロパティにない装飾は、custom_attrs で Recharts にそのまま渡します。文字サイズと太さを決め、縦軸の名前は angle を 270 に回して軸に沿って立てます。

rx.recharts.area_chart(
    rx.recharts.area(data_key="uv", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="center", custom_attrs={"fontSize": "12px", "fontWeight": "700"}),
        data_key="name",
        height=60,
    ),
    rx.recharts.y_axis(
        rx.recharts.label(value="Views", position="left", custom_attrs={"angle": 270, "fontSize": "12px", "fontWeight": "700"}),
    ),
    data=label_data,
    margin={"left": 20, "right": 20, "top": 25},
    width="100%",
    height=300,
)

基準線や領域に付ける

label は軸のほかに、reference_line、reference_dot、reference_area の子にもなれます。目標線に "Goal"、強調区間に名前を付けるときに使います。文字色も custom_attrs の fill で決めます。

rx.recharts.line_chart(
    rx.recharts.line(data_key="pv", stroke=rx.color("accent", 9)),
    rx.recharts.reference_line(
        rx.recharts.label(value="Goal 5000", position="insideTopRight", custom_attrs={"fill": rx.color("red", 11)}),
        y=5000,
        stroke=rx.color("red", 9),
        stroke_dasharray="4 4",
    ),
    rx.recharts.reference_area(
        rx.recharts.label(value="Campaign", position="insideTop"),
        x1="Page C",
        x2="Page E",
        fill=rx.color("amber", 5),
        fill_opacity=0.4,
    ),
    rx.recharts.x_axis(data_key="name"),
    rx.recharts.y_axis(),
    data=label_data,
    width="100%",
    height=280,
)

注文書を仕上げる

label_list を2つ入れて、棒の上には値を、棒の内側の下にはページ名を書きます。名前が棒にあるので軸の目盛りはオフにし、軸の下に label で "Pages" だけを残します。

rx.recharts.bar_chart(
    rx.recharts.bar(
        rx.recharts.label_list(data_key="uv", position="top", fill=rx.color("gray", 11)),
        rx.recharts.label_list(data_key="name", position="insideBottom", fill="white", offset=10),
        data_key="uv",
        fill=rx.color("accent", 9),
        radius=[4, 4, 0, 0],
    ),
    rx.recharts.x_axis(
        rx.recharts.label(value="Pages", position="insideBottom", custom_attrs={"fontWeight": "700"}),
        tick=False,
        height=30,
    ),
    data=label_data,
    margin={"top": 20},
    width="100%",
    height=280,
)

工房ノート

label は1か所に文字1つ、label_list はデータ点ごとに値1つ。
label は x_axis・y_axis・reference_* の子、label_list は bar・line・area のような系列の子。
value・position・offset で文字と位置を決める。position は18種類。
プロパティにない装飾（fontSize、fontWeight、angle）は custom_attrs で渡す。

← 前へ

チャートの部品 · Legend

チャートの部品 · Reference

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex