チャート
チャートの概要
ダッシュボードパターンで使うチャートプリミティブとチャートカードのカテゴリ概要です。データの形、比較対象、表示密度に合わせて適切なチャートへ移動できます。
カテゴリ概要
このカテゴリの責務
データの比較、分布、構成比、時間変化、進捗を、用途に合う視覚表現で読み取れるようにします。
コードの前提
チャートページのコードは、表示データ、選択状態、凡例、スマホ操作までコピーして再現できることを前提にします。
パターンで確認する場面
ダッシュボードや分析画面で、複数チャートを並べた時の密度、凡例、タッチ選択、ツールチップを確認します。
コンポーネント一覧
各チャートの詳細ページで、データ、プレビュー、コード、スマホ時の操作を確認できます。
分析カードチャートプレビュー、差分、補足情報を載せるメトリックカードです。スパークライン密度の高いカード向けの小さな線・面・ステップチャートです。折れ線チャート複数系列の時系列比較に使う線・面チャートです。リボンチャート期間ごとの流量やセグメント幅の変化を比較するチャートです。ラジアルバーチャート進捗・比率・容量を同心円バーで比較するチャートです。同心円進捗カードストレージやクォータを複数リングで示す進捗カードです。棒グラフ平均値マーカー付きの縦棒・横棒チャートです。積み上げ棒チャートグループごとの内訳を比較する積み上げ棒チャートです。分布バーセグメントやチャネル構成を示す積み上げ割合バーです。ミニ分布バーカードカテゴリ構成や利用率を密集したティックバーで示すカードです。ドーナツチャート中央ラベル付きで構成比を示すドーナツチャートです。ラベル付きドーナツカード中央サマリーと外部ラベルで構成比を見せるドーナツカードです。円グラフセグメントの構成比を比較する円グラフです。ゲージチャートスコア、進捗、容量を示す半円ゲージです。セグメントゲージカード支出、リスク、進捗状態をセグメント付き半円ゲージで示すカードです。レーダーチャート複数軸の正規化スコアを比較するレーダーチャートです。ヒートマップ曜日・時間・コホートの密集度を示すヒートマップです。活動タイムラインカード活動量、睡眠、業務負荷の時間帯別データをまとめるカードです。セグメントタイムラインカードカテゴリ別の時間範囲を横方向に示すタイムラインカードです。継続率コホートカードコホートごとの継続率を期間別に比較するカードです。塗り分け地図地域別の密集度、地点マーカー、ランキングを示す地図です。4象限マトリクス項目を x/y 位置で配置してランキングできる4象限マトリクスです。チャート凡例チャート系列やセグメントのラベル・値を表示します。