円グラフ・ドーナツグラフブロック
カテゴリーごとに1つの値を、全体に対する割合として示します — 円グラフ、またはドーナツモードでは中央に見出し数値を置けるリングとして描画します。
仕組み
このチャートは、サーバー側で生成された1枚のPNG画像としてレンダリングされます(クライアント側のチャートライブラリもJavaScriptも使いません)。常に表示される凡例と、その下のHTMLデータ表を伴います — このブロック群のすべてのチャートが守っている、妥協のない組み合わせです。棒グラフ・折れ線グラフの凡例と異なり、円グラフの凡例はスライスの数にかかわらず常に表示されます。円グラフ自身のタイトルは、棒グラフ・折れ線グラフの単独系列がブロックのタイトルを借用できるような形で、個々のスライスの名前にはなれません。そのため、スライスが1つだけの円グラフでも、そのスライスが何であるかを示すには凡例が必要です。
各凡例項目は、スライスのラベルと、その全体に対する割合(パーセント)を並べて表示します。データ表は3番目の列(カテゴリーとパーセントに加えて、正確な値)を追加するため、丸めたひと目で分かる割合と、正確な数値の両方が常にテキストとして手に入ります。
入力形式は、棒グラフ・折れ線グラフの固定された系列スロットとは異なります: カテゴリーごとに1行で、それぞれに1つの値と任意のスライスごとの色の上書きを持ちます。円グラフは定義上、カテゴリーごとに測定値がちょうど1つなので、第2・第3の系列はありません。カテゴリーが空欄、または値がゼロ/負の値である行は、空のくさび形として描かれるのではなく、完全にスキップされます。
8個を超えるスライスでは、チャートが読み取れないほど細くなる代わりに、最小のスライスがまとめて1つの合成された「その他」のくさびに統合されます。おおよそ8個を超えると、円グラフは各スライスを判別できる角度で示せなくなるため、この統合によって、描かれるすべてのくさびが判別可能な状態を保ちます。統合では、値の大きい上位7個のスライスが保たれ、それ以外がすべて「その他」に結合されます。凡例とデータ表はどちらも同じ統合結果を反映するため、チャートの横で読む内容は、実際にチャートに描かれている内容と常に一致します。凡例からは静かに隠されているのに画像ではカウントされている、あるいはその逆、ということはありません。
ドーナツモードは円グラフをリングに変えます。このときにのみ、中央の値と中央のラベルのフィールドが意味を持ち、リングの中央にKPI風の数値を表示できます。これは、スライスの値から自動的に導かれるものではなく、手入力された組み合わせです — KPIスコアカード自身のΔの方向と同じ「手入力であり、推測ではない」という前提です。通常の円グラフにはテキストを入れる穴がないため、ドーナツがオンになるまで、これらのフィールドは単に無効なままです。
設定可能なフィールド:
- チャートタイトル — 画像の上に表示されます。
- ドーナツ(中央を空洞にする)トグル。
- データ — 行のリスト(カテゴリー + 値 + 任意の色)。
- 中央の値/中央のラベル — ドーナツモード専用です。
- カードの背景色、パディング、境界線、角の丸み。
- タイトルと凡例・データ表のテキストには、それぞれ独立した色・フォントサイズの組み合わせがあります。
円グラフは、行を入力する代わりに、連携したデータソースにスライスを紐付けることもできます — グループ化フィールド(値ごとに1つのスライスになります)と、1つの値フィールドおよび集計方法です。任意のフィルターは受信者のマージタグを参照できるため、同じソースのうち受信者ごとのスライスを表示できます。仕組みの詳細(キャンペーンの回答結果モード — たとえば過去の投票や評価の得票分布をそのままプロットする場合など — を含む)については、チャートを実データに紐付けるを参照してください。
例
Subject
Where your traffic is coming from
キャンペーン後のレポートでは、そのキャンペーンの回答結果に直接紐付けることで、投票の得票分布を円グラフにできます — データソースは不要で、ピッカーからその投票を選ぶだけで、レポートは常に投票の現在の集計を反映します。サブスクリプションのまとめでは、「プランの構成比」(Free/Starter/Pro/Businessをスライスとして)をドーナツチャートにし、中央にアクティブなアカウントの合計数をリングの中のKPI風の数値として表示することもできます。チケットのカテゴリーが十数個あるサポートダイジェストは、自動の「その他」統合に頼ってチャートを読みやすく保ちつつ、その下のデータ表がすべての個別カテゴリーを正確な件数で一覧表示することを信頼します。
静的フォールバックの見え方
<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">Plan mix</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="320"
alt="Donut chart: Free 420 (52%), Starter 210 (26%), Pro 175 (22%)"
style="display:block;max-width:100%;height:auto;margin:8px 0" />
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:0 0 6px">
<span style="font-size:12px;color:#6b7280">
<span aria-hidden="true" style="display:inline-block;width:10px;height:10px;background-color:#4f46e5"></span>
Free (52%)
</span>
</div>
<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">Value</th>
<th style="text-align:left;padding:4px 8px;font-weight:600;font-size:12px;color:#6b7280">Percent</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Free</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">420</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">52%</td>
</tr>
</table>
</div>
凡例と表はどちらも、すべてのスライスについて同じラベル・値・パーセントを示しています — これは意図的な重複で、凡例はひと目で把握するためのもの、表は正確な数値の出典だからです。