ラジアルチャートカード
ダッシュボードカードシェルのラジアルバー - チャートトラック上の丸みのあるアーク、ホバーは、他のすべてのBoardUIチャートのようなトーンを暗くし、ホバーリングに従うカウントアップヘッドライン。 6つは、1つのプロップから見ます:プレーン、ラベリング、またはグリッドリング、薄くて固体単一値のゲージ、および積み重ねられたハーフゲージ。
訪問者
925
+5.2%インストール
ラジアルチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
バリエーション
rings (デフォルト), ラベル, と グリッド 項目ごとの1つのリングを引いて下さい。 gauge そして、 固体固体 単一の値に対して表示する max 中心の比率を使って; スタッキング 中心がプライマリセグメントのシェアを示し、ホバーされた1つに従う半分のゲージに項目を折って下さい。
{/* Ring names set along each arc */}<RadialChartCard variant="labels" />
{/* No tracks - rings over a circular grid */}<RadialChartCard variant="grid" />
{/* Single value against a goal, percent in the centre */}<RadialChartCard variant="gauge" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Thicker ring on a raised disc */}<RadialChartCard variant="solid" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Half gauge of stacked segments with a legend */}<RadialChartCard variant="stacked" data={[ { label: "Desktop", value: 1260 }, { label: "Mobile", value: 570 }, ]} delta={0.052} range="Last 7 days"/>タイルを使って
tiles チャートの下にアイテムごとに統計タイルを追加します。 - 値の上にスウォッチと名前を付け、最後の行で3つをフル幅に伸ばし、カードが収まるようにします。 タイルを覆うと、そのリングと逆に焦点を合わせます。
{/* Stat tiles under the rings: three per row, the last row full width (5 → 3 + 2) */}<RadialChartCard tiles />データデータ
data フラット { label, value, color? } リスト。アイテムを追加し、リングまたはセグメントになり、カラーは1つを設定しない限り、チャートパレットをサイクルします。 max フルサークル値を設定します。 期間のカプセルは、あなたが通過するときのドロップダウンです ranges - 各範囲は、独自のデータ(オプションで)を運ぶ delta / headline)および選択のチャートの再アニメーション; onRangeChange 代わりにフェッチします。データなしで、カードは3つのデモ範囲を出荷します。これは、上記のプレビューが使用しているものです。
// One item per ring / segment. First item = innermost ring.const data = [ { label: "Other", value: 90 }, { label: "Edge", value: 173 }, { label: "Firefox", value: 187 }, { label: "Safari", value: 200 }, { label: "Chrome", value: 275, color: "var(--color-chart-6)" }, // override any colour];
<RadialChartCard title="Visitors" data={data} max={300} // full-circle value; defaults to 110% of the largest ring headline={925} // optional resting headline (defaults to the total) delta={0.052} range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / max / delta / headline.<RadialChartCard variant="gauge" ranges={[ { id: "7d", label: "Last 7 days", data: [{ label: "Visitors", value: 1260 }], max: 2000, delta: 0.052 }, { id: "30d", label: "Last 30 days", data: [{ label: "Visitors", value: 4820 }], max: 6000, delta: 0.081 }, { id: "90d", label: "Last 90 days", data: [{ label: "Visitors", value: 12400 }], max: 15000, delta: -0.024 }, ]}/>