ReflexKR

コンポーネント工房：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

チャート

Radial Bar Chart

rx.recharts.radial_bar_chartrx.recharts.radial_bar

公式ドキュメント

工房の注文書

3チームの今四半期の目標達成率を丸い進捗バーで、ダッシュボードの1マスに収まるように見せてください。

rx.recharts.radial_bar_chartは、棒を直線ではなく円に沿って曲げて描くチャートです。棒の長さ（角度）が値の大きさで、棒ごとに中心からの距離が異なります。項目が少なく場所が狭いときや、目標に対する進捗率を見せたいときに使います。

データの各dictに"fill"を入れると、それがその棒の色になります。min_angleは、ごく小さい値でも最低その角度だけは見えるようにします。

radialbarchart_data = [
    {"name": "Mon", "x": 3, "fill": rx.color("cyan", 9)},
    {"name": "Tue", "x": 4, "fill": rx.color("blue", 9)},
    {"name": "Wed", "x": 5, "fill": rx.color("orange", 9)},
    {"name": "Thu", "x": 6, "fill": rx.color("red", 9)},
    {"name": "Fri", "x": 7, "fill": rx.color("gray", 9)},
    {"name": "Sat", "x": 8, "fill": rx.color("green", 9)},
]


rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(data_key="x", min_angle=15),
    data=radialbarchart_data,
    width="100%",
    height=320,
)

プロパティを変えてみる

チャートのinner_radius・outer_radiusは棒が並ぶリングの内側と外側を決め、bar_category_gapは棒どうしの間隔です。backgroundをオンにすると、棒がいっぱいになったときの場所が淡く見えます。

プロパティを変えてみる

inner_radius

outer_radius

bar_category_gap

background

label

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="x",
        min_angle=15,
        background=False,
        label=False,
    ),
    rx.recharts.graphing_tooltip(),
    data=radialbarchart_data,
    inner_radius="30%",
    outer_radius="100%",
    bar_category_gap="10%",
    width="100%",
    height=320,
)

labelをオンにすると棒ごとに値が付きます。データは上のradialbarchart_dataです。

プロパティ	値	既定値	用途
`radial_bar_chart(data=)`	dictのリスト	なし	棒ごとにdictを1つ。`"fill"`キーで色
`radial_bar_chart(cx=, cy=)`	数値・パーセント	`"50%"`	中心の位置
`radial_bar_chart(inner_radius=, outer_radius=)`	数値・パーセント	`"30%"` / `"100%"`	棒が並ぶリング
`radial_bar_chart(start_angle=, end_angle=)`	数値（度）	`0` / `360`	棒が回る範囲と向き
`radial_bar_chart(bar_category_gap=, bar_gap=, bar_size=)`	パーセント・数値	`"10%"` / `4` / 自動	棒の間隔と太さ
`radial_bar_chart(margin=)`	dict	各5	周りの余白
`radial_bar(data_key=)`	文字列	なし	棒の長さになる値
`radial_bar(min_angle=)`	数値（度）	なし	小さい値の最小角度
`radial_bar(background=)`	`True` / `False` / dict	なし	空いた場所の背景
`radial_bar(label=)`	`True` / `False` / dict	なし	値の表示。dictで`fill`・`position`
`radial_bar(legend_type=)`	凡例アイコン		凡例の形
`radial_bar(animation_begin=, animation_duration=, animation_easing=)`			登場アニメーション
イベント	`on_click` `on_mouse_enter` `on_mouse_leave` `on_mouse_move`		チャート領域のマウスイベント

半円とラベル（応用例）

start_angle=180、end_angle=0にすると、棒が左から右へ半円を描きます。labelにdictを渡すと値の文字の色（fill）と位置（position）を決められ、"insideStart"は棒が始まる側の内側に文字を置きます。background=Trueは棒の後ろに空のトラックを敷きます。

rx.recharts.radial_bar_chart(
    rx.recharts.radial_bar(
        data_key="uv",
        min_angle=90,
        background=True,
        label={"fill": "#666", "position": "insideStart"},
    ),
    data=[
        {"name": "18-24", "uv": 31.47, "fill": "#8884d8"},
        {"name": "25-29", "uv": 26.69, "fill": "#83a6ed"},
        {"name": "30-34", "uv": 15.69, "fill": "#8dd1e1"},
        {"name": "35-39", "uv": 8.22, "fill": "#82ca9d"},
        {"name": "40-49", "uv": 8.63, "fill": "#a4de6c"},
        {"name": "50+", "uv": 2.63, "fill": "#d0ed57"},
    ],
    inner_radius="10%",
    outer_radius="80%",
    start_angle=180,
    end_angle=0,
    width="100%",
    height=300,
)

進捗ゲージ

値を「100点満点中いくつ」として見せるには、角度軸の範囲を固定する必要があります。角度軸polar_angle_axisに数値軸（type: "number"）と範囲（domain: [0, 100]）を指定すると、1周が100になります。0.10のpolar_angle_axisにはこの2つのプロパティが用意されていないので、custom_attrsでRechartsにそのまま渡します。この軸がないと、いちばん大きい値が1周をまるごと埋めてしまいます。start_angle=90、end_angle=-270は12時の方向から始まって時計回りに回ります。

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="value",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "center"},
    ),
    data=[{"name": "Goal", "value": 72, "fill": rx.color("accent", 9)}],
    inner_radius="70%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=220,
)

使いどころ

ダッシュボードの1マスのような狭い場所に、いくつかの項目の大きさを収めたいとき
目標に対する進捗率を複数重ねて見せたいとき

棒の長さが角度なので、外側の棒と内側の棒は同じ値でも長さが違って見えます。値を正確に比べる必要があるなら、棒グラフのほうが向いています。形はinner_radius、outer_radius、start_angle、end_angle、bar_sizeで整えます。

注文書を仕上げる

角度軸を0〜100に固定して、3チームの達成率を同じ基準で描きました。凡例を右側に縦に並べてチーム名を読めるようにし、labelで棒の中に数値を入れています。

rx.recharts.radial_bar_chart(
    rx.recharts.polar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]}, tick=False, axis_line=False),
    rx.recharts.radial_bar(
        data_key="done",
        background=True,
        label={"fill": rx.color("gray", 12), "position": "insideStart"},
    ),
    rx.recharts.graphing_tooltip(),
    rx.recharts.legend(icon_size=10, layout="vertical", vertical_align="middle", align="right"),
    data=[
        {"name": "Sales", "done": 82, "fill": rx.color("indigo", 9)},
        {"name": "Support", "done": 64, "fill": rx.color("teal", 9)},
        {"name": "Design", "done": 45, "fill": rx.color("orange", 9)},
    ],
    inner_radius="30%",
    outer_radius="100%",
    start_angle=90,
    end_angle=-270,
    width="100%",
    height=280,
)

工房ノート

radial_bar_chart(data=…)の中にradial_bar(data_key=…)を入れる。棒の色はデータの"fill"。
リングはinner_radius・outer_radius、向きはstart_angle・end_angle（180→0なら半円）。
min_angleで小さい値も見えるようにし、background=Trueで空のトラックを敷く。
進捗率はpolar_angle_axis(custom_attrs={"type": "number", "domain": [0, 100]})で1周を100に固定する。
正確な比較が必要なら棒グラフを使う。

← 前へ

チャート · Radar Chart

チャート · Scatter Chart

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

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