Skip to content
fandhe-frontendcore v0.4.3
GitHub

Radar Chart

fandhe-frontend-pre-styled-ui の charts（内包）mod が提供するスタイル済み Radar Chart 部品です。

イシュー #2085 で shadcn/ui Charts（radar、14 バリアント）と突合し、グリッド種（多角形/正円/なし）・グリッド塗り・スポーク有無・外周 1 本グリッド・塗りなし・データ点（dots）・値付き軸ラベル・半径軸の静的バリアントを RadarChartProps の純追加で補完しました。マウス追従ツールチップ・hover 強調は #2086/#2128、凡例の系列トグルは #2132 のスコープです。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

ChartData（カテゴリ = 軸、系列 = ポリゴン）+ LinearScale + SVG ノード木生成ヘルパーのみで組み立てる、外部依存ゼロのレーダーチャートです。頂点角度は θ_i = -π/2 + i・2π/n（12 時方向開始・時計回り）の決定的な式で算出します。イシュー #2085 で shadcn/ui Charts（radar、14 バリアント）と突合し、グリッド種・グリッド塗り・スポーク有無・dots・値付き軸ラベル・半径軸の静的バリアントを純追加で補完しました。凡例は charts::legend との合成で表現します。マウス追従ツールチップ・hover 強調は #2086/#2128、凡例の系列トグルは #2132 のスコープです。

speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
speedpowerrangecontrolarmor
80/50speed60/85power40/70range90/45control55/65armor
speedpowerrangecontrolarmor20406080
speedpowerrange

Features

  • ChartData（カテゴリ = 軸、系列 = ポリゴン）+ LinearScale + SVG ノード木生成ヘルパーのみで組み立てる外部依存ゼロのレーダーチャート
  • 頂点角度は θ_i = -π/2 + i・2π/n（12 時方向開始・時計回り）の決定的な式で算出する
  • 系列ポリゴンの輪郭は stroke-width 2 / round join で line-chart・area-chart と統一（イシュー #1597）
  • グリッド種・グリッド塗り・スポーク有無・dots・値付き軸ラベル・半径軸の静的バリアント（イシュー #2085、shadcn/ui Charts（radar）突合）
  • 既定値は #2085 以前と完全に同一の HTML を出力する（golden 純追加原則）
  • 凡例は charts::legend、ツールチップは charts（共通 API）側の別部品との合成で表現する

Anatomy

root
  grid
  spoke
  axis-label
  series
  point
    axis-value
  radius-label

API Reference

Arguments

NameTypeDefaultDescription
sizef64300.0viewBox の一辺の長さ（正方形、px 相当）。
gridRadarGridPolygon同心グリッドの形状（Polygon/Circle/None）。shadcn/ui chart-radar-default/-grid-circle/-grid-none 相当。
grid_ringsRadarGridRingsTicksグリッドの同心リング本数（Ticks/Outer）。Outer は外周 1 本のみ描く静的近似。shadcn/ui chart-radar-grid-custom 相当。
grid_fillRadarGridFillNoneグリッドの塗り（None/Series）。Series は先頭系列色で塗る。shadcn/ui chart-radar-grid-fill/-grid-circle-fill 相当。
spokesbooltrueスポーク（中心 → 各軸頂点の線）の描画有無。shadcn/ui radialLines 相当。
fillRadarFillSolid系列ポリゴンの塗り（Solid/None）。shadcn/ui chart-radar-lines-only 相当。
dotsboolfalseデータ点マーカーの描画有無。shadcn/ui chart-radar-dots 相当。
axis_labelRadarAxisLabelCategory軸ラベルの内容（Category/ValueAndCategory）。ValueAndCategory は各系列の値を / 区切りで併記する。shadcn/ui chart-radar-label-custom 相当。
radius_axisboolfalse半径軸（値目盛ラベル）の描画有無。角度は軸 0/1 中間角に固定（静的近似）。shadcn/ui chart-radar-radius 相当。

Data Attributes

PartAttributeObserved Values
pointdata-index0, 1, 2, 3, 4
pointdata-seriesmercury, venus
seriesdata-seriesmercury, venus

Examples

2 系列のレーダーチャート

5 軸（speed/power/range/control/armor）× 2 系列（mercury/venus）を重ねて表示します。

speedpowerrangecontrolarmor

グリッド種と塗り + dots

grid: RadarGrid::Circle + grid_fill: RadarGridFill::Series + dots: true で正円グリッドを系列色で塗り、データ点を表示します。

speedpowerrangecontrolarmor

値付き軸ラベルと半径軸

axis_label: RadarAxisLabel::ValueAndCategory + radius_axis: true で各軸に値付きラベルと半径方向の目盛を表示します。

80speed60power40range90control55armor20406080

凡例（icon 付き）との合成

charts::legend::legend を並べて凡例を合成します（系列に with_icon でアイコンを設定）。

speedpowerrange