선/영역 그래프 블록
주, 월, 퍼널 단계 등 순서가 있는 구간에 걸친 추세를 선으로 그리거나, 채우기 토글을 켜면 선 아래를 음영으로 채운 영역으로 그립니다. 최대 3개 시리즈까지 지원합니다.
작동 방식
이 차트는 서버에서 생성한 하나의 PNG 이미지로 렌더링되며 — 클라이언트 측 차트 라이브러리도, 자바스크립트도 없습니다 — 그 바로 아래에는 이미지가 그리는 모든 숫자를 그대로 반복하는 HTML 데이터 표가 항상 표시됩니다. 이는 이 계열의 모든 차트가 지키는 절대 원칙으로, 텍스트 전용 클라이언트나 이미지가 차단된 받은편지함, 이미지를 꺼둔 환경에서도 추세를 읽을 수 있게 해줍니다.
입력 형식은 막대 그래프와 동일합니다. 카테고리(Category) 열 하나(여기서는 보통 "1주 차", "월", "1분기" 같은 시간 구간이지만, 순서가 있는 라벨이라면 무엇이든 가능합니다)에 숫자 시리즈 열이 최대 3개까지 붙습니다. 시리즈 1은 항상 활성 상태이며, 이름을 따로 지정하지 않으면 차트 자체의 제목을 이름으로 빌려 씁니다. 시리즈 2와 3은 이름을 지정해야 비로소 활성화되므로, 시리즈 라벨 없이 값 열만 절반만 채워도 이름 없는 유령 선으로 나타나지 않습니다. 활성화된 시리즈마다 고유한 색상의 선으로 그려지며, 범례는 시리즈가 2개 이상 활성화됐을 때만 표시됩니다.
채우기(Filled) 토글을 켜면 선 그래프가 영역 그래프로 바뀝니다. 각 선 아래 영역이 낮은 불투명도로 축까지 음영 처리됩니다. 별도 블록이 아니라 토글인 이유는 어느 쪽이든 기반 데이터 모델과 축, 카테고리 구조가 완전히 동일하고 선이 그려지는 방식만 달라지기 때문입니다. 여러 시리즈를 함께 채워도 각자 고유한 시리즈 색을 낮은 불투명도로 유지하기 때문에 겹치는 영역도 시각적으로 구분됩니다. 이 블록은 여전히 이중 축을 지원하지 않으므로, 채워진 시리즈가 여러 개여도 항상 하나의 값 축을 공유합니다.
점 마커(입력된 각 데이터 값 위에 표시되는 작은 채워진 원)는 카테고리가 약 20개 이하일 때 선 위에 그려집니다. 그 이상이 되면 마커가 점점 옅어지다가 개별적으로 그려지지 않는데, 밀도가 높아지면 서로 겹쳐 선을 따라 하나의 얼룩처럼 보여 개별 점으로 읽히지 않기 때문입니다. 그 임계값을 넘어서도 선 자체와 공유 값 축, 데이터 표는 계속해서 추세를 전달합니다 — 차트를 읽는 데 마커 자체가 필수적인 요소는 아닙니다.
설정 가능한 필드:
- 차트 제목(Chart title) — 이미지 위에 표시되며, 시리즈 1만 활성화된 경우 폴백 시리즈 이름으로도 쓰입니다.
- 채우기(Filled)(영역 그래프 변형) 토글.
- 데이터(Data) — 행 목록(카테고리 + 시리즈 1/2/3), 막대 그래프와 동일한 열 구성입니다.
- 시리즈 1/2/3 이름과 시리즈 1/2/3 색상.
- 카드의 배경색, 여백, 테두리, 모서리 둥글기.
- 제목과 범례/표 텍스트에 각각 독립된 색상/글자 크기 쌍.
선 그래프도 데이터를 직접 입력하는 대신 연결된 데이터 소스에 행을 연동할 수 있습니다. 그룹 기준(Group by) 필드는 서로 다른 값을 카테고리 축의 지점으로 변환하며, 각각 고유한 집계 방식을 가진 시리즈 필드 최대 3개와 짝을 이룹니다. 선택적 필터에서 수신자 병합 태그를 참조하면 같은 추세를 수신자별로 다르게 보여줄 수 있습니다. 전체 메커니즘은 차트를 실제 데이터에 연동하기에서 확인하세요. 캠페인 응답 결과 모드도 함께 다룹니다.
예시
Subject
Weekly signups are trending up
주간 운영 다이제스트라면 지난 8주간의 미해결 티켓 수를 선 하나로 그릴 수 있고, 그 정도 개수라면 점 마커도 여전히 표시되어 추세가 개선되고 있는지 즉시 확인할 수 있습니다. 매출 리캡이라면 분기 누적 매출을 제품 라인별로(최대 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">Open tickets</p>
<img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
alt="Line chart: Week 1 (Open tickets 42); Week 2 (Open tickets 35); Week 3 (Open tickets 28)"
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">Open tickets</th>
</tr>
<tr>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">Week 1</td>
<td style="text-align:left;padding:4px 8px;font-size:12px;color:#6b7280">42</td>
</tr>
</table>
</div>
대체 텍스트가 모든 카테고리/시리즈 값 쌍을 요약하므로 이미지를 불러오지 않아도 추세를 읽을 수 있고, 그 아래 표는 같은 숫자를 순수 HTML로 담고 있습니다.