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

チャート

Pie Chart

rx.recharts.pie_chartrx.recharts.pierx.recharts.cell

公式ドキュメント

工房の注文書

先月の訪問者のブラウザ比率をドーナツ型で見せて、ピースごとに名前と値が見えるようにしてください。

rx.recharts.pie_chartは、全体を100として、各部分が占める割合をピースに分けて見せるチャートです。ピースが5〜6個以下で、「全体のうちどれだけか」が大事なときに使います。ほかのチャートと違い、dataはチャートの器ではなくrx.recharts.pieに渡します。data_keyはピースの大きさ、name_keyはピースの名前です。

データの各dictに"fill"を入れると、そのピースだけがその色になり、なければpieのfillが使われます。

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Group A", "value": 400},
            {"name": "Group B", "value": 300, "fill": rx.color("teal", 9)},
            {"name": "Group C", "value": 300, "fill": rx.color("orange", 9)},
            {"name": "Group D", "value": 200, "fill": rx.color("plum", 9)},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 9),
        label=True,
    ),
    width="100%",
    height=300,
)

プロパティを変えてみる

inner_radiusを0より大きくすると、真ん中が空いたドーナツになります。半径は数値（ピクセル）かパーセント文字列で指定します。

プロパティを変えてみる

inner_radius

outer_radius

color

label

label_line

legend_type

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Chrome", "value": 275},
            {"name": "Safari", "value": 150},
            {"name": "Firefox", "value": 100},
            {"name": "Edge", "value": 130},
        ],
        data_key="value",
        name_key="name",
        inner_radius="0%",
        outer_radius="80%",
        fill=rx.color("indigo", 8),
        stroke=rx.color("gray", 1),
        label=True,
        label_line=True,
        legend_type="rect",
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=300,
)

labelをオンにするとピースの外に値が付き、label_lineはピースと値を結ぶ線です。legend_typeは凡例アイコンの形です。

プロパティ	値	既定値	用途
`pie_chart(width=, height=, margin=)`	数値・パーセント / dict	`"100%"`	チャートのサイズと余白。`data`はここにはない
`pie(data=)`	dictのリスト	なし	ピースのデータ
`pie(data_key=, name_key=)`	文字列	なし / `"name"`	ピースの大きさと名前のキー
`pie(cx=, cy=)`	数値・パーセント	`"50%"`	中心の位置
`pie(inner_radius=, outer_radius=)`	数値・パーセント	`0` / `"80%"`	内側・外側の半径。内側が0より大きければドーナツ
`pie(start_angle=, end_angle=)`	数値（度）	`0` / `360`	描く角度の範囲。`180`と`0`なら半円
`pie(padding_angle=, min_angle=)`	数値（度）	`0`	ピースどうしのすき間、小さいピースの最小角度
`pie(fill=, stroke=)`	色	accent 3 / accent 9	ピースの色と枠線の色
`pie(label=, label_line=)`	`True` / `False` / dict	`False`	値の表示と引き出し線
`pie(legend_type=)`	`"rect"` `"circle"` … `"none"`	`"rect"`	凡例のアイコン
`pie(is_animation_active=, animation_begin=, animation_duration=, animation_easing=)`		`True` / `400` / `1500` / `"ease"`	登場アニメーション
`cell(fill=, stroke=)`	色		`pie`の中でピース1つの色
イベント	`on_click` `on_mouse_enter` `on_mouse_leave` …		`pie_chart`、`pie`、`cell`のすべてが受け取る

パイを2つ重ねる

pieを2つ入れると、同じ中心に重ねて描きます。内側のパイはouter_radius="50%"で小さく、外側のリングはinner_radius="60%"で真ん中を空けると、2つのデータを1枚の図で比べられます。padding_angleはピースどうしを指定した角度だけ離します。

rx.recharts.pie_chart(
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 400},
            {"name": "Q2", "value": 300},
            {"name": "Q3", "value": 300},
            {"name": "Q4", "value": 200},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("teal", 8),
        inner_radius="60%",
        padding_angle=5,
    ),
    rx.recharts.pie(
        data=[
            {"name": "Q1", "value": 2400},
            {"name": "Q2", "value": 4567},
            {"name": "Q3", "value": 1398},
            {"name": "Q4", "value": 9800},
        ],
        data_key="value",
        name_key="name",
        fill=rx.color("accent", 8),
        outer_radius="50%",
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

ピースごとに色を塗る (cell)

データに色を入れなくても、pieの中にrx.recharts.cellをピースの数だけ入れて色を決められます。rx.foreachでデータを回しながらcellを作り、色のリストからindex番目の色を選びます。cellの順番がそのままピースの順番です。strokeを背景色にして枠線を太くすると、ピースの間にすき間ができます。

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create(["#6366F1", "#8B5CF6", "#A855F7", "#D946EF", "#EC4899"])[index % 5],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="40%",
        outer_radius="80%",
        padding_angle=2,
        stroke="#fff",
        custom_attrs={"strokeWidth": 2},
    ),
    rx.recharts.graphing_tooltip(),
    width="100%",
    height=300,
)

グラデーションで塗る

サイズ0のrx.el.svgにradial_gradientを定義しておき、各cellのfillからurl(#id)で参照します。グラデーションの定義がチャートの外にあっても、同じページ内なら見つけて使えます。idはページ内で重ならないように付けます。

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.box(
    rx.el.svg(
        rx.el.svg.defs(
            *[
                rx.el.svg.radial_gradient(
                    rx.el.svg.stop(offset="10%", stop_color=color, stop_opacity=1),
                    rx.el.svg.stop(offset="95%", stop_color=color, stop_opacity=0.6),
                    id=f"piechart_grad_{i}",
                    cx="50%",
                    cy="50%",
                    r="50%",
                )
                for i, color in enumerate(["#6366F1", "#8B5CF6", "#EC4899", "#F59E0B"])
            ],
        ),
        width=0,
        height=0,
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            *[rx.recharts.cell(fill=f"url(#piechart_grad_{i})") for i in range(4)],
            data=piechart_data[:4],
            data_key="value",
            name_key="name",
            inner_radius="60%",
            outer_radius="80%",
            padding_angle=5,
            stroke="#fff",
            custom_attrs={"strokeWidth": 2},
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=300,
    ),
    width="100%",
)

Stateで変わるデータ

pieのdataにStateの値を渡すと、数が変わるたびにピースの大きさも変わります。start_angle=180、end_angle=0で半円のチャートを作り、中心を下のほう（cy="80%"）に下げました。

Wood 3

Stone 2

Gold 1

Food 4

from typing import Any


class PieChartStockState(rx.State):
    stock: list[dict[str, Any]] = [
        {"item": "Wood", "count": 3},
        {"item": "Stone", "count": 2},
        {"item": "Gold", "count": 1},
        {"item": "Food", "count": 4},
    ]

    @rx.event
    def change(self, item: str, delta: int):
        self.stock = [
            {**row, "count": max(0, row["count"] + delta)} if row["item"] == item else row
            for row in self.stock
        ]


rx.vstack(
    rx.recharts.pie_chart(
        rx.recharts.pie(
            data=PieChartStockState.stock,
            data_key="count",
            name_key="item",
            cx="50%",
            cy="80%",
            start_angle=180,
            end_angle=0,
            fill=rx.color("accent", 8),
            label=True,
        ),
        rx.recharts.graphing_tooltip(),
        width="100%",
        height=240,
    ),
    rx.flex(
        rx.foreach(
            PieChartStockState.stock,
            lambda row: rx.hstack(
                rx.button("-", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), -1)),
                rx.text(row["item"], " ", row["count"], size="2"),
                rx.button("+", size="1", variant="soft", on_click=PieChartStockState.change(row["item"].to(str), 1)),
                align="center",
            ),
        ),
        spacing="4",
        wrap="wrap",
    ),
    align="center",
    width="100%",
)

マウスを乗せると (hover イベント)

cellのon_mouse_enterにそのピースのindexを渡し、on_mouse_leaveで消します。選んだピースの値と名前は、ドーナツの真ん中に重ねた文字で見せます。文字のボックスにpointer_events="none"を指定して、マウスがピースに届くようにします。

Hover a slice

class PieChartHoverState(rx.State):
    languages: list[dict[str, str | int]] = [
        {"name": "Python", "value": 35},
        {"name": "JavaScript", "value": 25},
        {"name": "Java", "value": 20},
        {"name": "C++", "value": 15},
        {"name": "Ruby", "value": 5},
    ]
    hovered_name: str = ""
    hovered_value: int = 0

    @rx.event
    def enter(self, index: int):
        self.hovered_name = str(self.languages[index]["name"])
        self.hovered_value = int(self.languages[index]["value"])

    @rx.event
    def leave(self):
        self.hovered_name, self.hovered_value = "", 0


rx.box(
    rx.vstack(
        rx.cond(
            PieChartHoverState.hovered_name != "",
            rx.fragment(
                rx.heading(PieChartHoverState.hovered_value, "%", size="7"),
                rx.text(PieChartHoverState.hovered_name, size="2"),
            ),
            rx.text("Hover a slice", size="2", color_scheme="gray"),
        ),
        align="center",
        spacing="1",
        position="absolute",
        top="50%",
        left="50%",
        transform="translate(-50%, -50%)",
        pointer_events="none",
    ),
    rx.recharts.pie_chart(
        rx.recharts.pie(
            rx.foreach(
                PieChartHoverState.languages,
                lambda item, index: rx.recharts.cell(
                    fill=rx.Var.create(["#2B79D1", "#2469B3", "#1E5AA1", "#3D8EE1", "#61A9E4"])[index % 5],
                    on_mouse_enter=PieChartHoverState.enter(index),
                    on_mouse_leave=PieChartHoverState.leave,
                ),
            ),
            data=PieChartHoverState.languages,
            data_key="value",
            name_key="name",
            inner_radius=90,
            stroke="0",
        ),
        width="100%",
        height=300,
    ),
    position="relative",
    width="100%",
)

注文書を仕上げる

5つのブラウザをドーナツで描き、cellでピースごとに決まった順番の色を塗りました。最後の「Other」は灰色にして目立たせません。値はlabel、名前は凡例とツールチップで読み取ります。

piechart_data = [
    {"name": "Chrome", "value": 275},
    {"name": "Safari", "value": 150},
    {"name": "Firefox", "value": 100},
    {"name": "Edge", "value": 130},
    {"name": "Other", "value": 60},
]


rx.recharts.pie_chart(
    rx.recharts.pie(
        rx.foreach(
            piechart_data,
            lambda item, index: rx.recharts.cell(
                fill=rx.Var.create([
                    rx.color("indigo", 9), rx.color("teal", 9), rx.color("orange", 9),
                    rx.color("plum", 9), rx.color("gray", 8),
                ])[index],
            ),
        ),
        data=piechart_data,
        data_key="value",
        name_key="name",
        inner_radius="55%",
        outer_radius="80%",
        padding_angle=2,
        stroke=rx.color("gray", 1),
        label=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    width="100%",
    height=320,
)

工房ノート

dataはpie_chartではなくpieに渡す。data_keyは大きさ、name_keyは名前。
inner_radius > 0ならドーナツ、start_angle・end_angleで半円。
ピースの色は、データの"fill"キーか、pieの中にforeachで入れたrx.recharts.cellで決める。
pieを2つ入れると同じ中心に重なる。outer_radius・inner_radiusで場所を分ける。
cellのon_mouse_enter(index)で、選んだピースをStateに入れられる。

← 前へ

チャート · Composed Chart

チャート · Radar Chart

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

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

質問と回答

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

ReflexKR

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

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

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

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

Built with Reflex