차트 내보내기

Graphic Walker는 IGWHandler ref를 통해 프로그래밍 방식의 차트 내보내기를 제공합니다. 개별 차트를 내보내거나 워크북의 모든 차트를 반복할 수 있습니다.

설정

React ref를 통해 내보내기 API에 접근하세요:

import { useRef } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import type { IGWHandler } from '@kanaries/graphic-walker';
 
function App() {
  const gwRef = useRef<IGWHandler>(null);
 
  return (
    <GraphicWalker
      ref={gwRef}
      data={data}
      fields={fields}
    />
  );
}

현재 차트 내보내기

exportChart()를 사용하여 현재 보이는 차트를 내보내세요:

async function handleExport() {
  if (!gwRef.current) return;
 
  // Export as SVG (default)
  const svgResult = await gwRef.current.exportChart('svg');
 
  // Export as data URL (base64 PNG)
  const pngResult = await gwRef.current.exportChart('data-url');
}

내보내기 결과 구조

IChartExportResult에는 다음이 포함됩니다:

속성	타입	설명
`mode`	`'svg' \| 'data-url'`	내보내기 형식
`title`	`string`	차트 이름
`nCols`	`number`	패시팅 열 수
`nRows`	`number`	패시팅 행 수
`charts`	`Array`	차트 패널 배열
`charts[].data`	`string`	SVG 마크업 또는 data URL 문자열
`charts[].width`	`number`	차트 너비
`charts[].height`	`number`	차트 높이
`charts[].canvas()`	`Function`	canvas/SVG DOM 요소 반환
`container()`	`Function`	차트 컨테이너 요소 반환
`chartType`	`string`	지오메트리 타입

모든 차트 내보내기

exportChartList()를 사용하여 워크북의 모든 차트를 반복합니다. AsyncGenerator를 반환합니다:

async function exportAll() {
  if (!gwRef.current) return;
 
  for await (const item of gwRef.current.exportChartList('svg')) {
    console.log(`Exporting chart ${item.index + 1} of ${item.total}`);
    console.log('Title:', item.data.title);
    console.log('SVG:', item.data.charts[0]?.data);
 
    // item.hasNext tells you if more charts follow
  }
}

SVG 파일로 다운로드

async function downloadSVG() {
  if (!gwRef.current) return;
 
  const result = await gwRef.current.exportChart('svg');
  const svgData = result.charts[0]?.data;
  if (!svgData) return;
 
  const blob = new Blob([svgData], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
 
  const link = document.createElement('a');
  link.href = url;
  link.download = `${result.title || 'chart'}.svg`;
  link.click();
 
  URL.revokeObjectURL(url);
}

PNG 파일로 다운로드

async function downloadPNG() {
  if (!gwRef.current) return;
 
  const result = await gwRef.current.exportChart('data-url');
  const dataUrl = result.charts[0]?.data;
  if (!dataUrl) return;
 
  const link = document.createElement('a');
  link.href = dataUrl;
  link.download = `${result.title || 'chart'}.png`;
  link.click();
}

렌더 상태 확인

내보내기 전에 차트가 준비되었는지 확인할 수 있습니다:

async function safeExport() {
  if (!gwRef.current) return;
 
  // Wait for idle status
  if (gwRef.current.renderStatus !== 'idle') {
    await new Promise<void>(resolve => {
      const dispose = gwRef.current!.onRenderStatusChange(status => {
        if (status === 'idle') {
          dispose();
          resolve();
        }
      });
    });
  }
 
  return gwRef.current.exportChart('svg');
}

내보내기 전 차트 이동

내보내기 전에 특정 차트 탭으로 전환합니다:

// Export the third chart
gwRef.current.openChart(2);  // 0-indexed
 
// Wait for render, then export
const result = await safeExport();

지리적 시각화 국제화