棒グラフブロック
カテゴリー間の値を比較する縦または横の棒グラフです — 「どちらが大きいか」を示す定番のチャートで、最大3系列まで対応します。
仕組み
このチャートは、サーバー側で生成された1枚のPNG画像としてレンダリングされます(クライアント側のチャートライブラリもJavaScriptも使いません)。その画像のすぐ下には、画像が描く数値をすべて繰り返す、常に表示されるHTMLのデータ表が置かれます。この表は壊れたクライアント向けに後付けされたフォールバックではありません — 画像と同じ数値をそのままのHTMLで示しており、これがあるからこそ、テキストのみのメールクライアント、画像がブロックされた受信ボックス、スクリーンリーダーでもこのチャートが実際に使えるのです。
データは行として入力します: 1つのカテゴリー列と、最大3つの数値系列列です。系列1は常に有効です — 単一系列の棒グラフには、系列自体の名前は不要です。ブロック自体のタイトルが既にそれを示しているためです。
系列2と系列3は、系列2の名前/系列3の名前に名前を入力した時点で有効になります。系列名のない、半分だけ入力された値の列は、ラベルのない幻の棒として表示されるのではなく無視されるため、部分的にしか入力されていないデータがレンダリングに紛れ込むことはありません。有効な系列にはそれぞれ独自の色があり、系列ごとに自分で選ぶか、プロジェクトのカテゴリカルパレットから自動的に決まります。凡例(色付きのスウォッチとラベル)は、有効な系列が2つ以上ある場合にのみ表示されます — 単一系列はチャート自身のタイトルで既に名前が示されているため、1項目だけの凡例は冗長になるからです。
カテゴリーがおおよそ8個までの間は、画像自体に、各バーへの直接の数値ラベルが(データ表に加えて)バーの上または中に描かれます。それを超えると、チャートは1本ごとのラベルをやめ、目盛り線付きの共有の値軸に切り替わります。十数本以上のバーそれぞれに数値ラベルを収めようとすると、そのはるか手前から読みにくくなるためです。そこからは、軸がひと目で把握するための手段となり、データ表が正確な数値の出典を引き継ぎます。チャートはカテゴリー総数24個で上限に達します — それを超えて入力された分は単純に描画されません(データ表も、実際に描画された内容のみを反映します)。
横向きの棒にすると、カテゴリー軸が左右方向ではなく上下方向に流れます。カテゴリー名が長い、または数が多い場合に選ぶとよいでしょう — 横向きのラベルは、縦軸のラベルのように回転させたり省略したりする必要がありません。
設定可能なフィールド:
- チャートタイトル — 画像の上に表示されます。系列1のみが有効な場合の、フォールバックの系列名にもなります。
- 横向きの棒トグル。
- データ — 行のリスト(カテゴリー + 系列1/2/3)。
- 系列1/2/3の名前と系列1/2/3の色。
- カードの背景色、パディング、境界線、角の丸み。
- タイトルと凡例・データ表のテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。
棒グラフは、行を直接入力する代わりに、連携したデータソースに紐付けることもできます。グループ化フィールドは、それぞれの値を1つのカテゴリーにし、最大3つの系列フィールド(それぞれ独自の集計方法(合計・平均・件数・最新行)を持つ)と組み合わせます — 手入力の行と同じ、最大3系列という形式です。任意のフィルターは受信者のマージタグを参照できるため、同じブロックでも、共有された1つのデータソースのうち受信者ごとに異なる部分を表示できます。仕組みの詳細(キャンペーンの回答結果モードを含む)については、チャートを実データに紐付けるを参照してください。
例
Subject
Q3 revenue vs. cost breakdown
ダッシュボードの用途のプロジェクトは、3つのKPIスコアカードの行のすぐ下に、棒グラフを自動的に用意します — 定期レポートのワンクリックの出発点です。ダッシュボードグリッドプリセットを参照してください。週次の売上ダイジェストでは、地域別の売上を単一系列の3〜4カテゴリーとしてグラフ化したり、「今週対前週」を各カテゴリーにつき2系列として直接比較したりできます。イベント後のレポートでは、縦軸のラベルに収まらないほど長いチーム名が十数個ある場合、「チーム別RSVP」に横向きの棒を使うとよいでしょう。教育業界向けの進捗ダイジェストでは、クラスごとの平均クイズ得点をグラフ化し、データソースにライブで紐付けることで、定期送信のたびに数値が最新の状態を保てます。
静的フォールバックの見え方
<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">Revenue by region</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Bar chart: North (Revenue 12,400); South (Revenue 9,800); East (Revenue 14,200)"
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">Revenue</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">North</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">12,400</td>
</tr>
</table>
</div>
<img>には、すべてのカテゴリー・系列の値をまとめた説明的なalt属性が付いており、その下にある表は同じ数値を、プレーンで常に表示されるHTMLとして繰り返します。