データ可視化

解剖

• 軸とグリッド

  情報量と背景に合わせ、可読性を保つ濃さの軸とグリッドを使う。

• 系列色

  成功、危険、青、紫、広告インプレッション、クリック、CTRを用途で固定する。

• ツールチップ

  白面、8px角丸、薄い境界線、軽い影で表データの補足として表示する。

• 面塗り

  ページビューなど面グラフは専用の淡色surfaceを使い、本文背景と混同させない。

• 数値代替

  見出しと要約に加え、支援技術で確認できる同値の数値表をチャートと同時に提供する。

状態

• 通常

  単系列は見出し、複数系列は凡例を添え、色だけで意味を判断させない。

• ホバー

  tooltipで数値、期間、系列名を返し、チャート本体のレイアウトは動かさない。

• 空配列

  チャート内に独自の空状態は持たず、呼び出し側が未取得とゼロ値を区別する。

• 複数系列

  広告overviewはimpressionsとclicks、個別tabは単系列で表示する。

仕様値

軸

--color-st-chart-axis / axis-muted

グリッド

--color-st-chart-grid / grid-soft

系列

positive / danger / primary / purple

広告

impressions / clicks / ctr

面グラフ

page-views-surface + page-views

高さ

Metric 120px / Ads 350px