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

チャート

Funnel Chart

rx.recharts.funnel_chartrx.recharts.funnelrx.recharts.label_list

公式ドキュメント

工房の注文書

訪問から登録、体験、決済まで、各段階で何人残るのかを漏斗の形で見せてください。

rx.recharts.funnel_chartは、順に続く段階で値がどれだけ減っていくかを漏斗（じょうご）の形で見せるチャートです。登録の流れや購入の流れのように、段階ごとに離脱する人を見たいときに使います。dataはrx.recharts.funnelに渡し、データの各dictに"fill"を入れて段階ごとの色を決めます。

段階の名前は、rx.recharts.label_listをfunnelの中に入れて付けます。data_keyでどの値を文字にするか、positionでどこに置くかを決めます。

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    width="100%",
    height=250,
)

プロパティを変えてみる

ラベルの位置と内容、段階の枠線の色、アニメーションを変えてみてください。データは上のfunnelchart_dataです。

プロパティを変えてみる

position

label_key

stroke

animate

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
        stroke=rx.color("gray", 9),
        is_animation_active=True,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

position="inside"は段階の内側の中央に文字を置きます。is_animation_activeをオフにすると、最初から描き終わった状態で表示されます。

プロパティ	値	既定値	用途
`funnel_chart(width=, height=, margin=)`	数値・パーセント / dict	`"100%"` / 各5	サイズと余白
`funnel_chart(layout=, stroke=)`	文字列 / 色	`"centric"`	段階の配置、枠線の色
`funnel(data=)`	dictのリスト	なし	段階のデータ。`"fill"`キーで色
`funnel(data_key=, name_key=)`	文字列	なし / `"name"`	段階の値と名前のキー
`funnel(stroke=)`	色	gray 3	段階の枠線
`funnel(legend_type=)`	凡例アイコン	`"line"`	凡例の形
`funnel(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `0` / `1500`	登場アニメーション
`label_list(data_key=, position=)`	キー / `"right"` `"inside"` …		段階ごとに付く文字
`label_list(fill=, stroke=, offset=)`	色 / 数値	gray 10 / `"none"` / `5`	文字の色、縁取り、離す距離
イベント	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		チャートと`funnel`。`funnel`には`on_animation_start`・`on_animation_end`も

イベント

funnel_chartはクリックとマウスのイベントを受け取ります。下のチャートでマウスを乗せたり、押したり、離したりしてみてください。イベントごとに通知（toast）が出ます。イベントにはStateのハンドラーも、rx.toastのような組み込みの動作もつなげられます。

funnelchart_data = [
    {"value": 100, "name": "Sent", "fill": "#8884d8"},
    {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
    {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
    {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
    {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
]


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=funnelchart_data,
    ),
    on_click=rx.toast("Clicked on funnel chart"),
    on_mouse_enter=rx.toast("Mouse entered"),
    on_mouse_leave=rx.toast("Mouse left"),
    width="100%",
    height=250,
)

Stateで変わるデータ

funnelのdataにStateの値をつなぎ、funnelのon_clickで値を新しく決めます。漏斗を押すたびに、最初の段階は100のまま、次の段階からは0〜20ずつ減った値が入ります。

import random
from typing import Any


class FunnelChartLiveState(rx.State):
    data: list[dict[str, Any]] = [
        {"value": 100, "name": "Sent", "fill": "#8884d8"},
        {"value": 80, "name": "Viewed", "fill": "#83a6ed"},
        {"value": 50, "name": "Clicked", "fill": "#8dd1e1"},
        {"value": 40, "name": "Add to Cart", "fill": "#82ca9d"},
        {"value": 26, "name": "Purchased", "fill": "#a4de6c"},
    ]

    @rx.event
    def shuffle(self):
        value = 100
        rows = []
        for row in self.data:
            rows.append({**row, "value": value})
            value -= random.randint(0, 20)
        self.data = rows


rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        data_key="value",
        data=FunnelChartLiveState.data,
        on_click=FunnelChartLiveState.shuffle,
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=250,
)

アニメーションを変える

animation_beginは描き始めを遅らせる時間、animation_durationは描くのにかかる時間（ミリ秒）です。animation_easingで速くなったり遅くなったりする動き方を選びます。legendを入れると、段階の名前が凡例に表示されます。

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        data_key="value",
        data=[
            {"name": "Visits", "value": 5000, "fill": "#8884d8"},
            {"name": "Cart", "value": 3000, "fill": "#83a6ed"},
            {"name": "Checkout", "value": 2500, "fill": "#8dd1e1"},
            {"name": "Purchase", "value": 1000, "fill": "#82ca9d"},
        ],
        animation_begin=300,
        animation_duration=6000,
        animation_easing="ease-in-out",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

注文書を仕上げる

label_listを2つ入れて、右側には段階の名前を、内側には人数を付けました。色は1つの色の濃淡で、段階が下がるほど淡くし、右のmarginを広げて名前が切れないようにしています。

rx.recharts.funnel_chart(
    rx.recharts.funnel(
        rx.recharts.label_list(position="right", data_key="name", fill=rx.color("gray", 12), stroke="none"),
        rx.recharts.label_list(position="inside", data_key="value", fill="white", stroke="none"),
        data_key="value",
        data=[
            {"name": "Visit", "value": 1200, "fill": rx.color("indigo", 10)},
            {"name": "Sign up", "value": 640, "fill": rx.color("indigo", 9)},
            {"name": "Trial", "value": 310, "fill": rx.color("indigo", 8)},
            {"name": "Paid", "value": 95, "fill": rx.color("indigo", 7)},
        ],
        stroke=rx.color("gray", 1),
    ),
    rx.recharts.graphing_tooltip(),
    margin={"top": 5, "right": 90, "bottom": 5, "left": 5},
    width="100%",
    height=280,
)

工房ノート

funnel_chartの中にfunnel(data=…, data_key=…)を入れる。段階の色はデータの"fill"。
段階の名前はfunnelの中のlabel_list(data_key=, position=)。複数入れてもよい。
funnel_chartはon_click・on_mouse_enter・on_mouse_leaveを受け取る。
funnelのon_clickとStateのdataで漏斗を描き直す。
animation_begin・animation_duration・animation_easingで描くときの動きを決める。

← 前へ

チャート · Scatter Chart

チャート · Treemap

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex