チャートグループ

チャートグループ

完全なチャート表示

説明用データです。実測ベンチマークは製品のリンク先を参照してください。

使用箇所： ベンチマーク.

使い方とインターフェース

共通スケール上の値には BenchmarkBars、各行の内訳には BenchmarkStackedBars を使います。配信量の比較のように行の合計も共通スケールで比べる場合は、積み上げグラフに同じ max を渡します。以下は実測結果ではなく説明用データです。実際のフィクスチャ、出典、制約はベンチマークを参照してください。

BenchmarkChartGroup は既存のバーを保ち、明確な指標名と単位、標本条件を組み合わせます。チャートグループのレビューに現在の見出しがあります。BenchmarkMetrics は短い要約を整えた定義リストで表示し、等幅数字の値と狭い列で下に回る補足行を備えます。指標のレビューで確認できます。BenchmarkDataTable は整えたネイティブの開閉領域と名前付きのキーボード対応スクロール領域により、長い表の全行・全列を保ちます。データテーブルのレビューに現在の表示があります。BenchmarkSource はコミット済みスナップショットと記録日時を示し、出典のレビューで確認できます。BenchmarkFigure、BenchmarkDelta、BenchmarkSampleSummary は、それぞれキャプション、条件を伴う差分、標本統計を提供します。

系列名を見える位置に置き、単位と標本数を示し、ゼロと欠測を区別します。ラベルは折り返し、値には等幅数字を使います。ゼロの値には色の塗りを付けません。積み上げ行はそれぞれの合計に正規化されるため、長さで絶対的な転送量を比較できません。重要な知見と制約はキャプションだけでなく本文にも記載します。

import BenchmarkChartGroup from '@master/internal-site/benchmarks/BenchmarkChartGroup.astro'import BenchmarkDataTable from '@master/internal-site/benchmarks/BenchmarkDataTable.astro'import BenchmarkSource from '@master/internal-site/benchmarks/BenchmarkSource.astro'<BenchmarkChartGroup title="Style recalculation" detail="Median · 3 samples" unit="ms"  items={[{ id: 'fixture-a', label: 'Fixture A', value: 12.5, color: 'blue' }]} /><BenchmarkDataTable title="All recorded measurements">  <table>    <thead><tr><th scope="col">Fixture</th><th scope="col">Median</th></tr></thead>    <tbody><tr><th scope="row">Fixture A</th><td>12.5 ms</td></tr></tbody>  </table></BenchmarkDataTable><BenchmarkSource generatedAt="2026-07-01T00:00:00Z" href="https://rc.css.master.co/benchmarks#data-sources" />

グラフと要約はサーバーで描画し、アニメーションや測定値の変更は行いません。表にはモバイル WebKit も含めて矢印キーで一貫してスクロールするための小さなハンドラーを追加しますが、開閉はネイティブのままです。1つのグラフには非負の有限値を同じ単位で使い、符号付きの変化には差分ラベルを使います。項目より小さい max は表示スケールを切り詰めるので避けます。表は自身の領域内だけで横スクロールし、文書全体をスクロールさせません。

#完全なチャートパターン