散布図・バブルチャートブロック

2つの数値指標の関係を示すX/Yの点です — 任意の3つ目の次元(マーカーの大きさ)を加えれば、バブルチャートのバリエーションになります。

仕組み

このチャートは、サーバー側で生成された1枚のPNG画像としてレンダリングされます(クライアント側のチャートライブラリもJavaScriptも使いません)。その下には、画像がプロットするすべての点を一覧にした、常に表示されるHTMLのデータ表が置かれます。棒グラフ・折れ線グラフの共有カテゴリー表や、円グラフの全体比率の表とは異なり、散布図のフォールバックは独自の形をしています。互いに独立した点の集まりには、カテゴリー軸も全体に対する割合も当てはまらないため、表は単純に点ごとの1行です: 系列・X・Y、そして(バブルモードのみ)大きさです。その上にある系列別の凡例は、各系列のスウォッチと点の数を示します。「点がいくつあるか」は、系列が自然に持つ唯一の要約数値だからです。

行は、任意の系列名、Xの値、Yの値、任意の大きさの値(バブルモードでのみ意味を持ちます)で入力します。系列の識別は、系列列に入力した内容だけで完全に決まります — 同じ系列名を持つ行は、最初に現れた順にグループ化・色付けされます。すべての行で系列を空欄にすると、すべての点が、ブロック自身のタイトル(タイトルがない場合は「Series 1」)にちなんで名付けられた、1つの暗黙の系列を共有します。代わりに異なる系列名を入力すれば、同じ行のリストから、専用の「系列数」設定など一切なしに、本当に複数の色を持つ散布図が生成されます — 系列がいくつ存在するかについては、行データ自体が唯一の情報源です。XまたはYのいずれかが欠けている行は、(0, 0)にプロットされるのではなくスキップされます。空欄のセルは、手入力されたゼロと同じではないためです。

バブルチャートトグルは、大きさの列を有効にします: 各点のマーカーの半径は、固定サイズの点ではなく、大きさの値に応じて拡大縮小します。バブルモードをオフにしても、大きさの列に入力した内容が削除されるわけではありません — トグルが再びオンになるまで、単に無視されるだけです。データ表の大きさの列は、バブルモードが有効な間だけ表示されるため、通常の散布図の表に、何もない列が表示されることはありません。

このチャートは、すべての系列を合わせた合計で120点、系列数で8個が上限であり、これはカテゴリカルパレット自体の長さと一致します。上限を超えて入力された行は、入力した順序で除外されます — 散布図には、円グラフのようにあふれた分をまとめる自然な「その他」バケットがありません。

このブロックは手入力の行のみに対応しており、データソースへの紐付けやキャンペーンの回答結果への紐付けモードはありません。どの4種類のチャートタイプが紐付けに対応しているかについては、チャートを実データに紐付けるを参照してください。

設定可能なフィールド:

• チャートタイトル — 画像の上に表示されます。
• バブルチャート(大きさの列がマーカーの大きさを決める)トグル。
• データ — 行のリスト(系列 + X + Y + 大きさ)。
• カードの背景色、パディング、境界線、角の丸み。
• タイトルと凡例・データ表のテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。

例

週次の運用ダイジェストでは、サポート担当者ごとの応答時間(X)とチケット件数(Y)をプロットし、系列によるグループ化なしに、担当者1人につき1つの点とすることで、対応が遅くならずに多くの件数を処理している人を素早く読み取れます。プロダクト利用状況のレポートでは、プランのティア(Free/Pro/Business)ごとに点を2〜3系列にグループ化し、それぞれ異なる色で、エンゲージメントスコアとアカウントの経過期間をプロットして、関係性がティアによって異なるかどうかを見ることもできます。売上レポートでは、バブルのバリエーションを使って、案件規模(X)とクローズまでの日数(Y)をプロットし、大きさの列には関与したステークホルダーの人数を設定できます。これは、このブロック群が決して追加しない4本目の軸なしに、1つのチャートに収めた3つの数値の次元です。

静的フォールバックの見え方

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Response time vs. ticket volume</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="320"
       alt="Scatter chart: Agent A (1 point), Agent B (1 point), Agent C (1 point)"
       style="display:block;max-width:100%;height:auto;margin:8px 0" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Series</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">X</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Y</th>
    </tr>
    <tr>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Agent A</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">4.2</td>
      <td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">38</td>
    </tr>
  </table>
</div>

バブルではない通常の散布図の表には、大きさの列がまったくありません。バブルチャートトグルがオンのときにのみ表示されます。

関連ページ

• 分析とチャートのブロック
• KPIスコアカードブロック
• ヒストグラムブロック