제품 및 API 안내

차트와 보고서

하나의 템플릿에 차트, 표, 텍스트를 조합해 영업, 마케팅, 프로젝트 보고서를 만드세요. 직접 차트를 만드는 데에는 완성된 보고서 디자인을 구매할 필요가 없습니다.

생성기에서 차트 만들기

  1. 자산에서 차트를 추가한 다음, 속성 패널에서 유형과 제목을 선택하세요.
  2. 차트 데이터 편집을 열어 계열 이름, 색상, 범주, 숫자 값을 편집하세요. 필요에 따라 계열이나 행을 추가할 수 있습니다.
  3. 적용을 누르면 차트에 변경 사항이 반영됩니다. 취소하면 대화 상자 안에서 변경한 내용이 삭제됩니다. 템플릿을 저장한 후 미리 보기와 출력을 확인하세요.

유형 및 제한

세로 막대, 가로 막대, 꺾은선, 영역, 원형, 도넛 차트를 지원합니다. JSON 유형 코드는 다음과 같습니다.

  • bar
  • horizontal-bar
  • line
  • area
  • pie
  • donut

예시는 같은 네 행의 데이터를 제품 자체 차트 엔진으로 그린 것이며, 유형 코드만 다릅니다.

각 차트는 최대 100개 범주와 6개 계열을 지원합니다. 원형 및 도넛 차트에는 계열 하나만 사용할 수 있으며 음수 값은 허용되지 않습니다.

템플릿 요소 예제

이 객체는 schemaVersion: 2 템플릿의 elements 배열에 포함되는 차트 요소이며, 완전한 생성 요청이 아닙니다. 예제에서는 content.data에 데이터를 직접 저장합니다.

JSON
{
  "id": "monthly-revenue",
  "type": "chart",
  "placementMode": "flow",
  "layout": { "width": 100, "widthUnit": "percent", "height": 240 },
  "content": {
    "title": "Revenue",
    "data": [{ "month": "Jan", "revenue": 42 }, { "month": "Feb", "revenue": 52 }]
  },
  "chart": {
    "type": "bar",
    "labelField": "month",
    "series": [{ "field": "revenue", "label": "Revenue", "color": "#e3232a" }],
    "showLegend": true,
    "showValues": true
  }
}

동적 데이터 바인딩

문서마다 다른 데이터를 사용하려면 차트 요소에 binding: monthlyRevenue를 추가하고, 요청 데이터에 monthlyRevenue라는 이름의 객체 배열을 보내세요. 이때 content.data는 제거하세요. labelField는 범주 필드를 지정하며, 각 계열의 field는 숫자 값 필드를 지정합니다. sales.net과 같은 중첩 경로도 지원합니다.

누락되거나 유한하지 않은 숫자는 0으로 변환하지 않으며, 꺾은선 및 영역 차트에서는 빈 구간으로 남습니다. 원형 및 도넛 차트의 음수 값은 원본 데이터에서 수정하세요. 데이터가 빽빽한 차트에서는 겹침을 피하려고 일부 값 레이블을 생략할 수 있습니다.

실제 데이터를 사용하는 보고서

monthlyRevenue에 바인딩된 차트는 요청에서 같은 이름의 배열을 읽습니다. 템플릿은 유지되고 호출마다 숫자만 전달됩니다.

cURL 
curl -X POST https://api.pdfgine.com/api/v1/render \
  -H "X-PDFgine-Key: $PDFGINE_KEY" \
  -H "Content-Type: application/json" \
  -d '{
        "templateCode": "sales-report",
        "format": "pdf",
        "locale": "ko",
        "data": {
          "monthlyRevenue": [
            { "month": "2026-01", "revenue": 42000, "target": 40000 },
            { "month": "2026-02", "revenue": 51500, "target": 45000 },
            { "month": "2026-03", "revenue": 47250, "target": 50000 }
          ]
        }
      }'

배열의 각 객체는 하나의 카테고리입니다. labelField로 카테고리 이름을 선택하고 각 계열 필드는 같은 객체에서 숫자를 가져옵니다.

자주 발생하는 문제

  • binding과 content.data는 둘 중 하나를 사용합니다. 둘 다 지정하면 고정 데이터를 계속 그리므로 요청이 무시된 것처럼 보입니다.
  • 계열 값은 숫자여야 합니다. "42.000,00"은 문자열입니다. 독자용 서식은 계열이 아닌 텍스트 요소에서 지정하세요.
  • 차트는 최대 100개 데이터 포인트와 6개 계열을 지원합니다. 추가 행이 그려지기를 기대하지 말고 전송 전에 집계하세요.
  • Word의 차트는 편집 가능한 Word 차트가 아닌 이미지입니다. 클릭해서 편집할 수는 없으며 PDF와 뷰어에서도 같은 그림을 표시합니다.
  • 100%는 용지가 아닌 포함 영역의 너비입니다. 열이나 안쪽 여백이 있는 컨테이너 안에서는 페이지보다 좁습니다.

미리 보기 및 출력 동작

차트는 공통 SVG 렌더러를 사용합니다. PDF와 Viewer에서는 모양을 유지합니다. Word 출력에는 편집 가능한 Word 기본 차트 객체 대신 차트 이미지가 포함됩니다.

너비 100%는 용지 전체가 아니라 포함 영역에서 사용할 수 있는 너비를 뜻합니다. 페이지 여백, 열, 안쪽 여백 때문에 이 영역이 줄어들 수 있습니다.

문서 생성 →