レーダーチャートカード
ダッシュボードカードシェルのレーダーチャート - チャートトークンのポリゴングリッド、ホバーされた軸線、デルタチップ、およびすべてのシリーズのパルスアクティブドットに従うカウントアップヘッドライン。 1つのプロップは、充填された、点数、ラインのみ、およびセンタースコアレイアウトの間で切り替わります。
訪問者
1,424
+5.2%インストール
レーダーチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
バリエーション
variant 一見を選ぶ: filled (デフォルト), dots, lines 比較シリーズのため、 scoreラベルの横に各軸値を印刷し、それらを上げられた中心ディスクに平均します。 tiles (上のプレビューのように) それらのいずれかの下で軸ごとの統計タイルを追加し、カードが成長できるようにします。
{/* Dots on every vertex */}<RadarChartCard variant="dots" />
{/* Outline only - two series and a legend */}<RadarChartCard variant="lines" series={[ { key: "desktop", label: "Desktop" }, { key: "mobile", label: "Mobile" }, ]}/>
{/* Centre score: each axis label carries its value, low ones turn rose */}<RadarChartCard variant="score" alertBelow={30} />データデータ
data 列のフラットリスト - 1軸あたり - によってキープされる label、シリーズごとの数字フィールドを使って。 series これらのフィールドの名前と、オプションで、その色。他のすべて(ラディウスの天井、合計、凡例の値、ホバー州)が由来します。 期間のカプセルは、あなたが通過したときにドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
const data = [ { label: "January", desktop: 186, mobile: 80 }, { label: "February", desktop: 305, mobile: 200 }, { label: "March", desktop: 237, mobile: 120 }, { label: "April", desktop: 273, mobile: 190 }, { label: "May", desktop: 209, mobile: 130 }, { label: "June", desktop: 214, mobile: 140 },];
<RadarChartCard title="Visitors" data={data} series={[ { key: "desktop", label: "Desktop" }, // palette colour { key: "mobile", label: "Mobile", color: "var(--color-chart-6)" }, // or your own ]} max={320} // optional radius ceiling (defaults to the largest value) headline={1424} // optional resting headline (defaults to the primary total) delta={0.052} // "+5.2%" chip range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / delta / headline.<RadarChartCard title="Visitors" series={[{ key: "desktop", label: "Desktop" }]} ranges={[ { id: "h1", label: "H1 2024", data: h1Data, delta: 0.052 }, { id: "h2", label: "H2 2024", data: h2Data, delta: 0.081 }, { id: "year", label: "2024", data: yearData, delta: 0.067 }, ]} defaultRange="h1" onRangeChange={(id) => track("radar_range", { id })}/>