chart
English시작하기

문서 › 프레임워크와 서버

서버에서 그리기 (SSR)

renderToSVG 로 DOM 없이 SVG 문자열. Node, Workers, Astro, 메일, OG 이미지.

화면에 그리는 함수와 같은 함수가 SVG 문자열을 만듭니다. 그래서 renderToSVG 로 서버에서 만든 그림, 브라우저에서 그린 차트, toSVG() 로 내보낸 파일이 똑같습니다. DOM 이 필요 없어 Node, Cloudflare Workers, Deno, Bun 어디서나 됩니다.

import { renderToSVG } from '@82chart/core';

const svg = renderToSVG(
  {
    type: 'line',
    language: 'ko',          // 서버에는 문서 언어가 없으니 직접
    timeZone: 'Asia/Seoul',  // 서버는 대부분 UTC: 날짜가 하루 밀리지 않게
    title: '주간 방문자',
    unit: '명',
    data: { labels: ['월', '화', '수', '목', '금'], series: [{ name: '방문자', data: [1820, 2140, 1990, 2410, 2290] }] },
  },
  { width: 640, height: 360, theme: 'light' },
);
// '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360" role="img" aria-label="선 차트, 주간 방문자. …">…</svg>'
두 번째 인자기본값설명
width640폭(px)
height자동전체 높이(px). 주지 않으면 그림 부분이 폭 × 0.5625 (aspectRatio)
theme'light''light' | 'dark'
headertrue카드 머리글·범례·주석까지 그리기
idPrefix자동한 페이지에 여러 SVG를 넣을 때 id 충돌 방지

Cloudflare Workers

import { renderToSVG } from '@82chart/core';

export default {
  async fetch(req, env) {
    const rows = await env.DB.prepare('SELECT day, visits FROM stats ORDER BY day DESC LIMIT 14').all();
    const list = rows.results.reverse();
    const svg = renderToSVG({
      type: 'area', language: 'ko', title: '최근 14일 방문',
      data: { series: [{ name: '방문', data: list.map((r) => [r.day, r.visits]) }] },
    }, { width: 800, height: 400 });
    return new Response(svg, { headers: { 'content-type': 'image/svg+xml; charset=utf-8', 'cache-control': 'max-age=300' } });
  },
};

Astro 같은 정적 사이트

---
import { renderToSVG } from '@82chart/core';
const svg = renderToSVG({ type: 'bar', language: 'ko', data: { labels: ['A', 'B'], series: [{ data: [3, 5] }] } }, { width: 560 });
---
<figure set:html={svg} />

아이디어: 공유 썸네일(OG 이미지)

블로그 글이나 보고서 페이지의 og:image 로 실제 숫자가 든 차트를 쓸 수 있습니다. Worker 에서 renderToSVG 로 1200×630 SVG를 만들고, SVG를 PNG로 바꾸는 라이브러리(예: resvg-wasm)로 변환해 캐시해 두면 됩니다. 메일에 붙일 때도 PNG로 바꿔 쓰세요(메일 프로그램 대부분이 SVG를 보여 주지 않음).