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

チャート

Radar Chart

rx.recharts.radar_chartrx.recharts.radarrx.recharts.polar_gridrx.recharts.polar_angle_axisrx.recharts.polar_radius_axis

公式ドキュメント

工房の注文書

2人の生徒の科目別の点数をクモの巣の形で重ねて、誰がどの科目に強いのかひと目でわかるようにしてください。

rx.recharts.radar_chartは、複数の項目の点数を中心から伸びる軸の上に打って結び、多角形として見せるチャートです。同じ基準の項目5〜6個で、対象の「形」を比べたいときに使います。チャートにdataを渡し、系列ごとにrx.recharts.radar(data_key=…)を入れます。

円形のチャートでは、直交座標の軸の代わりに極座標の部品を使います。polar_gridはクモの巣状のグリッド、polar_angle_axisは外周の項目名、polar_radius_axisは中心から外へ向かう目盛りです。

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(data_key="Mina", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    width="100%",
    height=300,
)

プロパティを変えてみる

塗りの濃さ（fill_opacity）、頂点の点（dot）、グリッドの形（grid_type）、チャートの内側・外側の半径を変えてみてください。データは上のradarchart_dataです。

プロパティを変えてみる

color

fill_opacity

0.6

dot

grid_type

inner_radius

outer_radius

rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("indigo", 9),
        fill=rx.color("indigo", 8),
        fill_opacity=0.6,
        dot=False,
    ),
    rx.recharts.polar_grid(grid_type="polygon"),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    data=radarchart_data,
    inner_radius="0%",
    outer_radius="80%",
    width="100%",
    height=300,
)

inner_radiusを大きくすると真ん中が空き、小さい値どうしの差が見やすくなります。grid_type="circle"はグリッドを円で描きます。

プロパティ	値	既定値	用途
`radar_chart(data=)`	dictのリスト	なし	項目ごとにdictを1つ
`radar_chart(cx=, cy=)`	数値・パーセント	`"50%"`	中心の位置
`radar_chart(inner_radius=, outer_radius=)`	数値・パーセント	`0` / `"80%"`	内側・外側のグリッドの半径
`radar_chart(start_angle=, end_angle=)`	数値（度）	`90` / `-270`	最初の軸の角度と回る向き
`radar_chart(margin=)`	dict	0	周りの余白
`radar(data_key=)`	文字列	なし	描く値のキー
`radar(stroke=, fill=, fill_opacity=)`	色 / 0〜1	accent 9 / accent 3 / `0.6`	枠線、塗り、塗りの濃さ
`radar(dot=)`	`True` / `False` / dict	なし	頂点の点
`radar(legend_type=, label=)`	凡例アイコン / bool	`"rect"`	凡例の形、値の表示
`radar(animation_begin=, animation_duration=, animation_easing=)`	ms / ms / `"ease"` …	`0` / `1500` / `"ease"`	登場アニメーション
`polar_grid(grid_type=)`	`"polygon"` `"circle"`	`"polygon"`	グリッドの形
`polar_radius_axis(angle=, domain=)`	数値 / `[最小, 最大]`		目盛り軸の向きと範囲
イベント	`on_click` `on_mouse_enter` `on_mouse_leave`		チャート。`radar`には`on_animation_start`・`on_animation_end`も

レーダーを複数重ねる

radarを2つ入れると、同じグリッドの上に多角形が重なります。後に書いた系列が上に描かれるので、fill_opacityを下げて下の系列も透けて見えるようにします。チャートのinner_radius、outer_radiusで図の大きさと真ん中の空きを決めます。

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.6,
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    inner_radius="15%",
    outer_radius="80%",
    width="100%",
    height=300,
)

点・凡例・アニメーション

dot=Trueは頂点ごとに点を打ち、legend_type="line"は凡例アイコンを線に変えます。animation_begin、animation_duration、animation_easingで最初に描かれるときの動きを決めます。下の例は4秒かけてゆっくり広がります。

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.radar(
        data_key="Mina",
        dot=True,
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.6,
        legend_type="line",
        animation_begin=0,
        animation_duration=4000,
        animation_easing="ease-in",
    ),
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150]),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=300,
)

Stateで変わるデータ

5つの能力値に100ポイントを振り分ける例です。スライダーを動かすとStateのtraitsが変わり、チャートがすぐに描き直されます。残りポイントより多くは上げられないよう、ハンドラーで止めています。polar_radius_axisのtick=False、axis_line=Falseは目盛りを隠して形だけを残します。

Strength

Speed

Stamina

Wisdom

Charm

Remaining: 25

from typing import Any


class RadarChartTraitState(rx.State):
    budget: int = 100
    traits: list[dict[str, Any]] = [
        {"trait": "Strength", "value": 15},
        {"trait": "Speed", "value": 15},
        {"trait": "Stamina", "value": 15},
        {"trait": "Wisdom", "value": 15},
        {"trait": "Charm", "value": 15},
    ]

    @rx.var
    def remaining(self) -> int:
        return self.budget - sum(t["value"] for t in self.traits)

    @rx.event
    def set_trait(self, trait: str, value: list[float]):
        new = int(value[0])
        rows = []
        for t in self.traits:
            if t["trait"] == trait:
                new = min(new, self.remaining + t["value"])
                t = {**t, "value": new}
            rows.append(t)
        self.traits = rows


rx.flex(
    rx.box(
        rx.recharts.radar_chart(
            rx.recharts.radar(data_key="value", stroke=rx.color("accent", 9), fill=rx.color("accent", 8)),
            rx.recharts.polar_grid(),
            rx.recharts.polar_angle_axis(data_key="trait"),
            rx.recharts.polar_radius_axis(domain=[0, 100], tick=False, axis_line=False),
            data=RadarChartTraitState.traits,
            width="100%",
            height=260,
        ),
        flex="1 1 240px",
    ),
    rx.vstack(
        rx.foreach(
            RadarChartTraitState.traits,
            lambda t: rx.hstack(
                rx.text(t["trait"], size="2", width="5em"),
                rx.slider(
                    value=[t["value"].to(int)],
                    max=100,
                    on_change=lambda v: RadarChartTraitState.set_trait(t["trait"].to(str), v),
                    width="10em",
                ),
                rx.text(t["value"], size="2"),
                align="center",
            ),
        ),
        rx.text("Remaining: ", RadarChartTraitState.remaining, size="2", weight="bold"),
        flex="1 1 240px",
    ),
    spacing="4",
    wrap="wrap",
    align="center",
    width="100%",
)

注文書を仕上げる

データのキーを生徒の名前（"Mina"、"Joon"）にしたので、その名前がそのまま凡例とツールチップに表示されます。0.10のradarにはnameプロパティがないため、このようにキー名を読みやすく付けるのがいちばん簡単です。どちらもfill_opacity=0.4で淡く塗って重なった部分も読めるようにし、色と点を併用して系列を区別しています。

radarchart_data = [
    {"subject": "Math", "Mina": 120, "Joon": 110},
    {"subject": "Science", "Mina": 98, "Joon": 130},
    {"subject": "English", "Mina": 86, "Joon": 130},
    {"subject": "History", "Mina": 99, "Joon": 100},
    {"subject": "Art", "Mina": 85, "Joon": 90},
    {"subject": "Music", "Mina": 65, "Joon": 85},
]


rx.recharts.radar_chart(
    rx.recharts.polar_grid(),
    rx.recharts.polar_angle_axis(data_key="subject"),
    rx.recharts.polar_radius_axis(angle=90, domain=[0, 150], tick=False, axis_line=False),
    rx.recharts.radar(
        data_key="Mina",
        stroke=rx.color("accent", 9),
        fill=rx.color("accent", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.radar(
        data_key="Joon",
        stroke=rx.color("teal", 9),
        fill=rx.color("teal", 8),
        fill_opacity=0.4,
        dot=True,
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(),
    data=radarchart_data,
    width="100%",
    height=320,
)

工房ノート

radar_chart(data=…)の中に、radar(data_key=…)とpolar_grid・polar_angle_axis・polar_radius_axisを入れる。
polar_angle_axis(data_key=)は外周の項目名、polar_radius_axis(domain=)は目盛りの範囲。
複数の系列はradarを複数。fill_opacityを下げて重なりを見せる。
チャートのinner_radius・outer_radius・start_angle・end_angleで形と向きを決める。
dataにStateの値を渡すと、スライダーなどの入力で多角形がすぐに変わる。

← 前へ

チャート · Pie Chart

チャート · Radial Bar Chart

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

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