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

チャート

Treemap

rx.recharts.treemap

公式ドキュメント

工房の注文書

スマホのストレージを写真・動画・アプリがどれだけ占めているか、面積で比べられる1枚の図で見せてください。

rx.recharts.treemapは、全体を1つの四角形とみなし、各項目を値に比例した面積の小さな四角形に分けて敷き詰めるチャートです。項目が多くてパイチャートではピースが小さくなりすぎるときや、分類の中にさらに下位分類がある階層データを見せたいときに使います。

ほかのチャートと違い、子の部品なしでtreemap1つで描きます。data_keyは面積になる値、name_keyは四角形に書かれる名前で、データの"fill"が四角形の色になります。

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

プロパティを変えてみる

同じデータに大きさの値が2種類（size、visits）あります。data_keyを変えると面積を決める基準が変わり、四角形の配置が計算し直されます。アニメーションの動き方も一緒に変えてみてください。

プロパティを変えてみる

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

data_keyを変えるたびに、新しい配置で描き直されます。is_animation_activeをオフにすると即座に切り替わります。

プロパティ	値	既定値	用途
`data`	dictのリスト	なし	項目。`"children"`で下位項目、`"fill"`で色
`data_key`	文字列	`"value"`	面積になる値のキー
`name_key`	文字列	`"name"`	四角形に書かれる名前のキー
`aspect_ratio`	数値	自動	四角形が近づけようとする横:縦の比率
`width`, `height`	数値・パーセント	`"100%"`	サイズ。高さは数値で
`is_animation_active`	`True` / `False`	`True`	アニメーションのオン・オフ
`animation_begin`, `animation_duration`	ミリ秒	`0` / `1500`	開始の遅れ、かかる時間
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	速さの変化
`on_animation_start`, `on_animation_end`	イベント		アニメーションの開始・終了
`on_click` `on_mouse_enter` `on_mouse_leave` …	イベント		マウスイベント

縦横比 (aspect_ratio)

aspect_ratioは、各四角形が近づこうとする横:縦の比率です。1ならなるべく正方形に近く、4なら横長の四角形になるように分けます。正方形に近いほど面積を目で比べやすく、名前も収まりやすくなります。0.10では整数しか受け付けません。

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

階層データ (children)

項目に"children"のリストを入れると、その中でさらに分割されます。親の面積は子の値の合計になり、同じ親の子どうしは1つのかたまりの中に集まります。下は、食料品の3つの分類の中に品目が入っている例です。同じ分類は同じ色の濃淡で塗り、かたまりが見えるようにしています。

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

アニメーションのイベント

on_animation_startとon_animation_endは、描画のアニメーションが始まるときと終わるときに呼ばれます。下の文字は、アニメーションが動いている間は「Drawing...」で、2.5秒後に終わると「Done」に変わり、かっこの中の回数が1つ増えます。

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

注文書を仕上げる

ストレージの5つの項目を面積で描き、いちばん小さい「Other」は灰色にして目立たせないようにしました。aspect_ratio=2で横に広い画面に合う少し横長の四角形を作り、アニメーションは短くしています。

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

工房ノート

treemap(data=…, data_key=…, name_key=…)1つで描く。子の部品は要らない。
四角形の色はデータの"fill"、下位分類は"children"のリスト。
aspect_ratio（整数）で四角形の形を決める。1に近いほど比べやすい。
アニメーションはis_animation_active・animation_duration・animation_easing、終わるとon_animation_end。
項目が数個しかないなら、パイチャートや棒グラフのほうが読みやすい。

← 前へ

チャート · Funnel Chart

チャート · Sankey Chart

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

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