レーダーチャートRadarChartExperimental

複数軸の正規化スコアを比較するレーダーチャートです。

プレビュー

データ

状態とバリエーション

標準表示

ラベルとグリッドを含む標準表示です。

現在と成長後

スキルの現在値と、育成後に伸びる想定値を比較します。

現在46%
成長後66%

コンパクト

軸ラベルを省いたコンパクト表示です。

別カラー

別のチャート色トークンで表示します。

最小表示

密度の高いパネル向けにグリッドを非表示にします。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
dataChartDataPoint[]-単一系列として正規化した多角形で表示する値です。
seriesRadarChartSeries[]-現在値と目標値など、複数のレーダー面を重ねて比較します。
variant"default" | "compact""default"チャートサイズを切り替える SSOT 登録済みバリエーションです。
showGrid / showLabelsboolean-グリッドリングと軸ラベルの表示を切り替えます。

使い方

const data = [
    { label: "到達", value: 72 },
    { label: "品質", value: 84 },
    { label: "売上", value: 58 },
    { label: "継続", value: 76 },
    { label: "速度", value: 64 },
    { label: "リスク", value: 42 },
];

<RadarChart data={data} max={100} />
<RadarChart data={data} variant="compact" showLabels={false} />
<RadarChart data={data} color="success" fillOpacity={0.12} />

const currentData = [
    { label: "STR", value: 42 },
    { label: "DEX", value: 58 },
    { label: "INT", value: 36 },
    { label: "VIT", value: 50 },
    { label: "AGI", value: 62 },
    { label: "LUK", value: 28 },
];

const targetData = [
    { label: "STR", value: 76 },
    { label: "DEX", value: 70 },
    { label: "INT", value: 54 },
    { label: "VIT", value: 68 },
    { label: "AGI", value: 82 },
    { label: "LUK", value: 46 },
];

const series = [
    { label: "現在", data: currentData, color: "muted", fillOpacity: 0.08 },
    { label: "成長後", data: targetData, color: "success", fillOpacity: 0.14 },
];

<RadarChart data={currentData} series={series} max={100} />

使用コンポーネント

レーダーチャートチャート凡例ツールチップ

関連コンポーネント

ラジアルバーチャート4象限マトリクス