ヒストグラムブロック
生の数値を読み取りやすい範囲に自動でビン(区間)分けします — 事前に集計したバケットではなく個々の数値を渡すだけで、分布を計算してくれます。
仕組み
このブロック群の他のチャートと異なり、ヒストグラムにはカテゴリーや系列といった入力形式がまったくありません。行のリストは、生の数値が1行に1つずつ入った、単一の値列です — 生徒ごとのテスト得点、取引ごとの注文金額、リクエストごとの応答時間などです。範囲へのビン分けはレンダリング時に行われ、入力時には行われません — 範囲や件数を自分で入力することは一切ありません。ビン分けが終わると、ヒストグラムは単一系列の棒グラフとまったく同じ方法で描画されます — 内部的には棒グラフ自身のラスターパイプラインを再利用しています。そのため、このブロック群のすべてのチャートが守っている、レンダリングされたPNG画像と常に表示されるデータ表という組み合わせも引き継いでいます: 画像だけがビンの件数を保持する唯一の場所になることはありません。
ビンの数(2〜20)で、目標とするビンの数をおおまかに指定します。このブロックは、入力データの最小値から最大値までの範囲を、その数だけの等幅のバケットに分割し、入力した値がそれぞれいくつ入るかを数えます。入力したすべての値が同一である場合、範囲はゼロになり、分割するものが何もありません。指定したビンの数のうち1つだけを実際のバーとして描き、残りを空のビンとして描く代わりに、ヒストグラムはすべての値を保持する単一のビンに統合されます。値がちょうど1種類しかない分布は、本質的に1本のバーであり、それを取り囲むN-1個の空のバケットではありません。
画像の下にあるデータ表には、すべてのビンの正確な範囲(「開始〜終了」の形式)と件数が並びます。正確なバケットの境界と件数を一緒に読める唯一の場所です — 画像は分布の形をひと目で伝えますが、ビンの数が上限に近づくにつれて、すべてのバーにラベルを付けるわけではなくなります。
値の列にある空欄または数値でないセルは、ビン分けの前に取り除かれます(空のセルは本物のゼロではありません)。手入力を想定した、十分に余裕のある上限として、最大500個の入力値が読み込まれます。
このブロックは手入力の行のみに対応しており、データソースへの紐付けやキャンペーンの回答結果への紐付けモードはありません。どの4種類のチャートタイプが紐付けに対応しているかについては、チャートを実データに紐付けるを参照してください。
設定可能なフィールド:
- チャートタイトル — 画像の上に表示されます。
- 値 — 行のリスト。1行に1つの生の数値を持つ、単一の値列です。
- ビンの数 — 2〜20。目標とする等幅バケットの数です。
- バーの色 — すべてのビンに対して、デフォルトのパレットの色を上書きします。
- カードの背景色、パディング、境界線、角の丸み。
- タイトルと凡例・データ表のテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。
例
Subject
This week's order value spread
クイズ結果のダイジェストでは、生徒それぞれの100点満点の生の得点をヒストグラム化することで、クラスが合格ラインの周辺に集まっているのか、それとも2つのグループに分かれているのかを即座に示せます。サポート運用のレポートでは、その週のチケットの応答時間(分単位)をヒストグラム化することで、ほとんどのチケットが速くクローズし外れ値の長い尾を引いているのか、あるいはSLAの境界付近に集まっているのかがひと目で分かります。ECのまとめでは、注文金額をヒストグラム化することで、どの価格帯があるべきかを事前に決めることなく、顧客が実際に購入している自然な価格帯を見ることができます — ブロックが生の合計金額から自分で計算してくれます。
静的フォールバックの見え方
<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">Quiz scores</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Histogram: 60–68: 3, 68–76: 5, 76–84: 9, 84–92: 7, 92–100: 4"
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">Category</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Count</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">76–84</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">9</td>
</tr>
</table>
</div>
各ビンの正確な範囲と件数は、プレーンな表の行として示されます — alt属性がまとめ、バーが可視化しているのと同じ数値です。