원형/도넛 그래프 블록
카테고리별 값 하나를 전체 대비 비율로 보여주는 파이 차트, 또는 도넛 모드에서는 가운데에 헤드라인 숫자를 넣을 수 있는 고리 형태입니다.
작동 방식
이 차트는 서버에서 생성한 하나의 PNG 이미지로 렌더링되며(클라이언트 측 차트 라이브러리도, 자바스크립트도 없습니다), 항상 표시되는 범례와 그 아래 HTML 데이터 표가 함께 제공됩니다 — 이는 이 계열의 모든 차트가 지키는 절대 원칙입니다. 막대/선 그래프의 범례와 달리, 파이 차트의 범례는 조각 개수와 관계없이 항상 렌더링됩니다. 파이 차트 자체의 제목은 막대/선 그래프의 단일 시리즈처럼 특정 조각 하나를 대신 나타낼 수 없기 때문에, 조각이 하나뿐인 파이 차트라도 범례가 있어야 그 조각이 무엇인지 알 수 있습니다.
범례의 각 항목은 조각의 라벨과 함께 전체 대비 비율을 보여줍니다. 데이터 표는 세 번째 열(카테고리, 비율에 더해 정확한 값)을 추가하므로, 대략적인 비율과 정확한 숫자를 항상 텍스트로 함께 확인할 수 있습니다.
입력 형식은 막대/선 그래프의 고정된 시리즈 슬롯과 다릅니다. 카테고리별로 한 행씩, 각각 값(Value) 하나와 선택적인 조각별 색상(Color) 오버라이드를 갖습니다. 파이 차트는 정의상 카테고리당 측정값이 하나뿐이므로 두 번째나 세 번째 시리즈는 없습니다. 카테고리가 비어 있거나 값이 0 이하인 행은 빈 조각으로 그려지는 대신 완전히 건너뜁니다.
조각이 8개를 넘으면 차트가 지나치게 얇아지는 대신, 가장 작은 조각들이 하나의 합성 "기타(Other)" 조각으로 합쳐집니다. 조각이 대략 8개를 넘어서면 파이 차트가 각 조각을 구분 가능한 각도로 표시할 수 없게 되므로, 이 병합이 그려진 조각 모두를 계속 알아볼 수 있게 유지해줍니다. 병합은 값 기준 상위 7개 조각은 그대로 두고 나머지 전부를 "기타"로 합칩니다. 범례와 데이터 표 모두 같은 병합 결과를 반영하므로, 차트 옆에서 읽는 내용은 항상 실제로 그려진 것과 일치합니다. 범례에서는 조용히 숨겨졌는데 이미지에서는 여전히 집계되는 식의 불일치는 없습니다.
도넛 모드는 파이 차트를 고리 형태로 바꿉니다. 그때에만 **중앙 값(Center value)**과 중앙 라벨(Center label) 필드가 의미를 가지며, 고리 가운데에 KPI 스타일의 숫자를 넣을 수 있습니다. 이는 조각 값에서 자동으로 계산되는 것이 아니라 직접 입력하는 값입니다 — KPI 스코어카드 자체의 Δ 방향과 같은 "자동 추론이 아닌 직접 입력" 원칙을 따릅니다. 속이 꽉 찬 파이 차트에는 텍스트를 넣을 구멍이 없으므로, 이 필드들은 도넛 모드가 켜지기 전까지는 그냥 비활성 상태입니다.
설정 가능한 필드:
- 차트 제목(Chart title) — 이미지 위에 표시됩니다.
- 도넛(Donut)(가운데를 비우는) 토글.
- 데이터(Data) — 행 목록(카테고리 + 값 + 선택적 색상).
- 중앙 값 / 중앙 라벨 — 도넛 모드 전용.
- 카드의 배경색, 여백, 테두리, 모서리 둥글기.
- 제목과 범례/표 텍스트에 각각 독립된 색상/글자 크기 쌍.
원형 그래프도 조각을 직접 입력하는 대신 연결된 데이터 소스에 연동할 수 있습니다 — 그룹 기준(Group by) 필드(서로 다른 값마다 조각 하나)와 값(Value) 필드 및 집계 방식(합계, 평균, 개수, 최신 행)을 하나 지정하는 방식입니다. 선택적 필터에서 수신자 병합 태그를 참조하면 같은 소스를 수신자별로 다르게 보여줄 수 있습니다. 전체 메커니즘은 차트를 실제 데이터에 연동하기에서 확인하세요. 캠페인 응답 결과 모드도 함께 다루는데, 예를 들어 과거 투표나 평점의 득표 분포를 곧바로 그릴 수 있습니다.
예시
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>
범례와 표 모두 모든 조각에 대해 완전히 같은 라벨/값/비율을 담고 있습니다 — 의도적인 중복으로, 범례는 빠르게 훑어보기 위한 것이고 표는 정확한 출처이기 때문입니다.