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

チャート

Composed Chart

rx.recharts.composed_chart

公式ドキュメント

工房の注文書

月ごとの注文数は棒で、目標値は破線で1つのチャートに重ねて、目標を超えた月がすぐわかるようにしてください。

rx.recharts.composed_chartは、エリア（area）、棒（bar）、線（line）を1つのチャートに混ぜて描く器です。実際の値は棒で、目標や平均は線で見せるように、1種類のチャートだけでは語りきれないときに使います。子は書いた順に描かれるので、後に書いた系列が前の系列の上に重なります。

例では下のcomposedchart_dataを使います。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", bar_size=20, fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9)),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    width="100%",
    height=280,
)

プロパティを変えてみる

複合チャートは、棒グラフの間隔プロパティとエリアチャートのbase_valueをあわせ持ちます。base_valueはエリアが始まる底です。"dataMin"にするとデータの最小値から始まるので、エリアが上に浮き上がります。

プロパティを変えてみる

bar_color

curve

base_value

bar_category_gap

rx.recharts.composed_chart(
    rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 4)),
    rx.recharts.bar(data_key="target", fill=rx.color("teal", 8)),
    rx.recharts.line(data_key="orders", type_="monotone", stroke=rx.color("orange", 9), stroke_width=2),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    data=composedchart_data,
    base_value="auto",
    bar_category_gap="10%",
    width="100%",
    height=280,
)

base_valueはareaだけに、bar_category_gapはbarだけに効きます。1つの器のプロパティが、系列の種類ごとに分かれて使われます。

プロパティ	値	既定値	用途
`data`	dictのリスト	なし	すべての系列が共有するデータ
`layout`	`"horizontal"` `"vertical"`	`"horizontal"`	流れの向き
`base_value`	数値、`"dataMin"` `"dataMax"` `"auto"`	`"auto"`	`area`の底の値
`bar_category_gap`	パーセント・数値	`"10%"`	項目どうしの間隔（`bar`）
`bar_gap`	数値	`4`	同じ項目内の棒の間隔（`bar`）
`bar_size`	数値	自動	すべての棒の太さ
`stack_offset`	`"none"` `"expand"` `"wiggle"` `"silhouette"`	なし	積み上げた系列の基準の計算
`reverse_stack_order`	`True` / `False`	`False`	積み上げ順を逆にする
`sync_id`, `sync_method`	文字列 / `"index"` `"value"`	なし / `"index"`	他のチャートとツールチップ・ブラシを連動させる
`margin`, `width`, `height`	dict / 数値・パーセント		周りの余白とサイズ
`on_click` `on_mouse_enter` `on_mouse_move` `on_mouse_leave`	イベント		チャート領域のマウスイベント

area、bar、lineそれぞれのプロパティは、各チャートのページと同じです。0.10ではcomposed_chartのbar_gapは数値しか受け付けません（bar_chartはパーセント文字列も受け付けます）。

複合チャートを使う場面

実際の値（棒）と、目標・平均・トレンド（線）を一緒に見たいとき
量（エリア）とその中のイベント数（棒）のように、性質の違う値を同じx軸の上で比べたいとき

すべての系列が同じdata、同じ軸、同じツールチップと凡例を共有します。そのため1つのツールチップに棒の値と線の値が一緒に出ます。

描く順番

子は書いた順に、下から上へ重なっていきます。上のチャートは棒を先に、下のチャートはエリアを先に書きました。濃いエリアが後に来ると棒を隠してしまうので、広く塗る系列を先に書くのがふつうです。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.flex(
    rx.recharts.composed_chart(
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    rx.recharts.composed_chart(
        rx.recharts.area(data_key="visits", stroke=rx.color("accent", 9), fill=rx.color("accent", 6)),
        rx.recharts.bar(data_key="orders", fill=rx.color("teal", 8)),
        rx.recharts.x_axis(data_key="month"),
        rx.recharts.y_axis(),
        data=composedchart_data,
        width="100%",
        height=200,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

軸を2本使う

注文数（数十）と売上（数千）のように大きさがまったく違う値を同じ軸に載せると、片方が底に張り付いてしまいます。2本目のy軸をorientation="right"で右側に置き、y_axis_idで系列と軸を対応させます。目盛りが2つあると読み間違えやすいので、凡例や軸の色で、どの値がどの軸なのかをはっきりさせましょう。

rx.recharts.composed_chart(
    rx.recharts.bar(
        data_key="orders",
        bar_size=20,
        fill=rx.color("accent", 8),
        y_axis_id="left",
    ),
    rx.recharts.line(
        data_key="revenue",
        type_="monotone",
        stroke=rx.color("green", 9),
        y_axis_id="right",
    ),
    rx.recharts.x_axis(data_key="day"),
    rx.recharts.y_axis(y_axis_id="left"),
    rx.recharts.y_axis(y_axis_id="right", orientation="right"),
    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=[
        {"day": "Mon", "orders": 40, "revenue": 2400},
        {"day": "Tue", "orders": 30, "revenue": 1398},
        {"day": "Wed", "orders": 55, "revenue": 9800},
        {"day": "Thu", "orders": 27, "revenue": 3908},
        {"day": "Fri", "orders": 62, "revenue": 4800},
        {"day": "Sat", "orders": 48, "revenue": 3800},
        {"day": "Sun", "orders": 35, "revenue": 4300},
    ],
    width="100%",
    height=300,
)

注文書を仕上げる

注文数は棒、目標値は破線のlineで重ねました。線を棒の後に書いて上に描かれるようにし、dot=Falseで点を消して基準線のように見せています。

composedchart_data = [
    {"month": "Jan", "visits": 4000, "orders": 2400, "target": 2400},
    {"month": "Feb", "visits": 3000, "orders": 1398, "target": 2210},
    {"month": "Mar", "visits": 2000, "orders": 5800, "target": 2290},
    {"month": "Apr", "visits": 2780, "orders": 3908, "target": 2000},
    {"month": "May", "visits": 1890, "orders": 4800, "target": 2181},
    {"month": "Jun", "visits": 2390, "orders": 3800, "target": 2500},
]


rx.recharts.composed_chart(
    rx.recharts.cartesian_grid(stroke_dasharray="3 3", vertical=False),
    rx.recharts.bar(data_key="orders", name="Orders", fill=rx.color("accent", 8), radius=[4, 4, 0, 0], max_bar_size=28),
    rx.recharts.line(
        data_key="target",
        name="Target",
        type_="monotone",
        stroke=rx.color("orange", 9),
        stroke_width=2,
        stroke_dasharray="5 4",
        dot=False,
    ),
    rx.recharts.x_axis(data_key="month"),
    rx.recharts.y_axis(),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=composedchart_data,
    width="100%",
    height=300,
)

工房ノート

1つのcomposed_chartにarea・bar・lineを混ぜて入れる。データ・軸・ツールチップは共有する。
後に書いた子が上に描かれる。広く塗る系列を先に。
base_valueはarea、bar_category_gap・bar_gap・bar_sizeはbarに使われる。
大きさの違う値はy_axis_idで2本目の軸に。本当に必要なときだけ。
sync_idで他のチャートと連動させる方法はArea Chartのページと同じ。

← 前へ

チャート · Line Chart

チャート · Pie Chart

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex