エリアチャートカード
時間の経過とともに構成 - ソフトグラデーションフィックス、ダッシュカーソル、およびホバーされたカテゴリの合計に交換するカウントアップヘッドラインのスタックされた領域として複数のシリーズ。 スタックされた、オーバーラップと100%のビュー間の1つのプロップスイッチ。 別のコンプリートは、ストレートセグメントのためのモノトーンスプラインを交換します。
訪問者
94,700
+8.2%オーガニック
50,500インフォメーション
25,900ペイド
18,300インストール
エリアチャートカードはBoardUI Proに含まれています。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
バリエーション
スタッキング (デフォルト) はボリュームとして読み込みます。 overlap シリーズを互いに比較し、 percent すべてのカテゴリを100%に正規化するため、チャートは共有として読み込まれます。 シェイプ カーブを選ぶ。
{/* Overlapping translucent areas - comparison rather than composition */}<AreaChartCard variant="overlap" />
{/* 100% stacked: every category fills the height, so it reads as share */}<AreaChartCard variant="percent" />
{/* Straight segments instead of the monotone spline */}<AreaChartCard shape="sharp" />データデータ
data 主キーの列のフラットリストです。 label シリーズごとの数値フィールドを使って; series それらのフィールドの名前と、オプションで、その色。合計、凡例、タイル、すべてのホバー状態が派生しています。あなたが渡るとき、期間のカプセルはドロップダウンです ranges; データ無しで、カードは3つのデモの期間を出荷します。これは、上記の使用のプレビューです。
// One row per category, one numeric field per series.const data = [ { label: "Jan", organic: 2400, referral: 1200, paid: 800 }, { label: "Feb", organic: 2800, referral: 1400, paid: 700 }, // …];
<AreaChartCard title="Visitors" data={data} series={[ { key: "organic", label: "Organic" }, // palette colour { key: "referral", label: "Referral" }, { key: "paid", label: "Paid", color: "var(--color-chart-3)" }, // or your own ]} headline={64820} // optional resting headline (defaults to the grand total) delta={0.082} // "+8.2%" chip range="This year" // static pill… tiles // stat tile per series under the chart/>
// …or a working period dropdown: each range overrides data / delta / headline.<AreaChartCard ranges={[ { id: "year", label: "This year", data: thisYear, delta: 0.082 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.036 }, ]}/>