Radar

一つのデータセットの複数の指標を、二次元のキャンバス上で見比べるためのレーダーチャートです。

使いどころ：一つのデータセットの複数の指標を見比べるレーダーチャートが必要なとき。軸の名前と点数の JSON 配列を abilitys 属性から <r-radar> に渡します。

クイックスタート

基本的な使い方

データは abilitys 属性に JSON 文字列（オブジェクトの配列）として渡します。HTML の属性は文字列しか持てないので、値は妥当な JSON である必要があり、内部で JSON.parse により解析されます。<r-radar> のホストは固有の大きさを持たないので、明示的な幅と高さを与えてください。

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"HP","scoreRate":"10"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

abilitys の JS プロパティから手続き的に設定することもできます。配列（属性へ文字列化して書き戻されます）でも JSON 文字列でも受け付けます。

const radar = document.createElement('r-radar');
radar.abilitys = [
  { abilityName: 'HP', scoreRate: 10 },
  { abilityName: '攻撃', scoreRate: 90 },
  { abilityName: '防御', scoreRate: 20 },
];
chart.append(radar);

API リファレンス

プロパティ

プロパティ	型	既定値	説明
abilitys	string / Array	''	チャートのデータ。JSON 文字列（JS プロパティなら配列）
colorPolygon	string	var(--ran-radar-polygon-color) / #e6e6e6	同心の網目多角形の色
colorLine	string	var(--ran-radar-line-color) / #e6e6e6	軸線と外周の色
fillColor	string	rgba(255,121,35,0.60)	データ領域の塗りの色
strokeColor	string	rgba(255,121,35,0.60)	データ領域の輪郭と頂点の点の色
sheet	string	''	コンポーネントの shadow DOM に注入する CSS

abilitys 配列の各要素は次のキーを受け付けます。

キー	型	必須	説明
abilityName	string	はい	軸のラベル文字列
scoreRate	number	はい	その軸の値。網目の上限は 100 です
backgroundColor	string	いいえ	ラベルの背景色（既定は透明）
fontSize	number	いいえ	ラベルの文字サイズ（既定はチャートに合わせた大きさ）
fontColor	string	いいえ	ラベルの文字色（既定は --ran-color-text）
fontFamily	string	いいえ	ラベルの書体（既定は SimHei）

メモ：colorPolygon、colorLine、fillColor、strokeColor は大文字小文字を区別せずに読まれるので、最初から属性がある場合もマウント後に変えた場合も正しく描画されます。どれを更新してもチャートは描き直されます。テーマに追従させたいときは、下の CSS 変数を優先してください。

チャートのデータ abilitys

ラベルごとのスタイル（backgroundColor、fontSize、fontColor）は、要素ごとに設定できます。

<r-radar
  style="width:300px;height:300px;display:block;"
  abilitys='[{"abilityName":"HP","scoreRate":"10","backgroundColor":"red","fontSize":"30","fontColor":"blue"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

網目多角形の色 colorPolygon

<r-radar
  style="width:300px;height:300px;display:block;"
  colorPolygon="green"
  abilitys='[{"abilityName":"HP","scoreRate":"10"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

軸線の色 colorLine

<r-radar
  style="width:300px;height:300px;display:block;"
  colorLine="blue"
  abilitys='[{"abilityName":"HP","scoreRate":"10"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

領域の塗りの色 fillColor

<r-radar
  style="width:300px;height:300px;display:block;"
  fillColor="red"
  abilitys='[{"abilityName":"HP","scoreRate":"10"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

領域の輪郭の色 strokeColor

<r-radar
  style="width:300px;height:300px;display:block;"
  strokeColor="blue"
  abilitys='[{"abilityName":"HP","scoreRate":"10"},{"abilityName":"攻撃","scoreRate":"90"},{"abilityName":"防御","scoreRate":"20"},{"abilityName":"元素熟知","scoreRate":"50"},{"abilityName":"会心率","scoreRate":"80"},{"abilityName":"会心ダメージ","scoreRate":"50"}]'
></r-radar>

完全な例データ

HTML の attribute は string しか運べないので、渡すデータは json の文字列である必要があり、JSON.parse でオブジェクトの配列に戻されます。JSON の形が崩れていると解析できません。

[
  {
    "abilityName": "HP",
    "scoreRate": "10",
    "backgroundColor": "red",
    "fontSize": "30",
    "fontColor": "blue"
  },
  {
    "abilityName": "攻撃",
    "scoreRate": "90"
  },
  {
    "abilityName": "防御",
    "scoreRate": "20"
  },
  {
    "abilityName": "元素熟知",
    "scoreRate": "50"
  },
  {
    "abilityName": "会心率",
    "scoreRate": "80"
  },
  {
    "abilityName": "会心ダメージ",
    "scoreRate": "50"
  }
]

CSS 変数

チャートの色は、ホストの CSS カスタムプロパティからも（テーマに反応する形で）設定できます。

変数	既定値	説明
--ran-radar-polygon-color	var(--ran-color-border) / #e6e6e6	網目多角形の色
--ran-radar-line-color	var(--ran-color-border) / #e6e6e6	軸線の色
--ran-radar-fill-color	rgba(255,121,35,0.60)	データ領域の塗りの色
--ran-radar-stroke-color	rgba(255,121,35,0.60)	データ領域の輪郭の色
--ran-radar-width	100%	キャンバスのコンテナの幅
--ran-radar-height	100%	キャンバスのコンテナの高さ
--ran-radar-display	block	キャンバスのコンテナの display
--ran-radar-position	relative	キャンバスのコンテナの position

ラベルの文字色もテーマトークン --ran-color-text にフォールバックするので、ライトでもダークでもラベルは読めるままです。

イベント

ありません。<r-radar> はカスタムイベントを派発しません。

ベストプラクティス

• 大きさ：ホストは固有の大きさを持ちません。必ず明示的な width / height を（style か --ran-radar-width / --ran-radar-height の変数で）設定してください。コンテナのリサイズは ResizeObserver で検知し、チャートは自動で描き直されます。
• データの形式：abilitys には妥当な JSON を渡してください。形の崩れた JSON は記録され、解析できません。スクリプトで実際の配列を扱うときは abilitys の JS プロパティを使います。
• 尺度：scoreRate は固定の最大値 100 に対して測られます。値をその範囲に正規化してください。
• テーマ：色の属性（colorPolygon、colorLine、fillColor、strokeColor）はリアクティブで、マウント後に変えるとチャートを描き直します。色をライト／ダークのテーマに自動で追従させたいときは --ran-radar-* の CSS 変数を優先してください。