図とグラフ / 量を比較する

Bar chart

名前・正確な値・共通のゼロ基準を揃え、カテゴリの量を比較します。

共通スケールで呼び出し元を比較

プレビュー

SQL文が最も多い呼び出し元は？

呼び出し元ごとのSQL文 · 共通スケール：0〜8文

MySQL::save 8文
MySQL::__construct 1文
MySQL::load 1文
MySQL::mtime 1文
MySQL::touch 1文
MySQL::unlink 1文

13文のうち8文がMySQL::saveにあり、ほかの呼び出し元にはそれぞれ1文あります。WordPress SQLカタログのスナップショット · cache_data · SimplePie/Cache/MySQL.php。件数は静的な呼び出し箇所であり、実行頻度ではありません。

HTML

<figure class="plate plate-wide">
  <p><strong>SQL文が最も多い呼び出し元は？</strong></p>
  <p class="muted">呼び出し元ごとのSQL文 · 共通スケール：0〜8文</p>
  <ul class="bars">
    <li class="bar-row">
      <span class="bar-label mono">MySQL::save</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:100%"></span></span>
      <span class="bar-value">8文</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::__construct</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1文</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::load</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1文</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::mtime</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1文</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::touch</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1文</span>
    </li>
    <li class="bar-row">
      <span class="bar-label mono">MySQL::unlink</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:12.5%"></span></span>
      <span class="bar-value">1文</span>
    </li>
  </ul>
  <figcaption>13文のうち8文がMySQL::saveにあり、ほかの呼び出し元にはそれぞれ1文あります。<span class="plate-source">WordPress SQLカタログのスナップショット · cache_data · SimplePie/Cache/MySQL.php。件数は静的な呼び出し箇所であり、実行頻度ではありません。</span>
  </figcaption>
</figure>

測定されたゼロと不明な値

プレビュー

ゼロと不明は、異なる問いへの答えです。

実行時入力まで完全に追跡 0文 844文の解析で観測されたゼロ。
実行時に実行されたSQL 未測定静的解析では実行時の実行回数を記録しません。

測定がなければ棒の長さもありません。ゼロで代用しないでください。WordPress SQLカタログのスナップショット · 解決状況と解析範囲。

HTML

<figure class="plate plate-wide">
  <p><strong>ゼロと不明は、異なる問いへの答えです。</strong></p>
  <ul class="bars">
    <li class="bar-row">
      <span class="bar-label">実行時入力まで完全に追跡</span>
      <span class="bar-track" aria-hidden="true"><span class="bar-fill" style="--dd-bar:0%"></span></span>
      <span class="bar-value">0文</span>
      <span class="bar-note">844文の解析で観測されたゼロ。</span>
    </li>
    <li class="bar-row">
      <span class="bar-label">実行時に実行されたSQL</span>
      <span class="bar-track is-missing" aria-hidden="true"></span>
      <span class="bar-value">未測定</span>
      <span class="bar-note">静的解析では実行時の実行回数を記録しません。</span>
    </li>
  </ul>
  <figcaption>測定がなければ棒の長さもありません。ゼロで代用しないでください。<span class="plate-source">WordPress SQLカタログのスナップショット · 解決状況と解析範囲。</span>
  </figcaption>
</figure>

クラスと属性

クラス / 属性	用途
`.bars / .bar-row`	意味を持つリストと各行。広い場合は名前・棒・値を揃え、狭い場合は文字の下に棒を置きます。
`.bar-label / .bar-value / .bar-note`	カテゴリ、単位を添えた正確な量、任意の但し書き。長い名前は折り返し、数字は分割しません。
`.bar-track / .bar-fill`	共通のスケールと比例する印。--dd-barを値 / 共通の最大値 × 100%で指定します。一覧全体で同じ最大値を使います。
`.bar-track.is-missing`	取得できない測定値。bar-fillを省き、bar-valueに「未測定」と書きます。測定されたゼロは--dd-bar:0%です。
`.tone-*`	任意のカテゴリ識別。色がなくてもカテゴリ名で同じ意味が伝わるようにします。

使い方の注意

非負の量の比較に使います。棒は必ずゼロから始め、最大値と単位を示します。微小な値に最小表示幅を付けたり、棒ごとに正規化したりしません。内訳にはMeter、正確な値の検索には表を使います。印刷や支援技術でも、値とラベルはHTMLに残ります。

作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。

Storybookでバリエーションを見る ↗すべてのコンポーネント →