[javascript] Chartist에서 차트를 PDF로 저장하기

01 Dec 2023

javascript

Chartist는 JavaScript로 작성된 간단하고 가벼운 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 종류의 차트를 웹 페이지에 쉽게 추가할 수 있습니다. 이제 Chartist를 사용해 생성한 차트를 PDF로 저장해보겠습니다.

PDF로 저장하기 기능 추가하기

PDF로 저장하기 기능은 Chartist 라이브러리 자체에 내장되어 있지 않습니다. 따라서 PDF로 저장하기 기능을 추가하기 위해 다른 라이브러리를 사용해야 합니다. 예를 들어, jsPDF 라이브러리는 JavaScript로 PDF를 생성하는 데 사용할 수 있는 라이브러리입니다.

먼저, jsPDF 라이브러리를 프로젝트에 추가해야 합니다. script 태그를 사용하여 CDN 링크를 페이지에 추가할 수 있습니다. 아래 코드를 <head> 태그 안에 추가하세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>

이제 jsPDF를 사용하여 Chartist 차트를 PDF로 저장하는 함수를 만들어보겠습니다. 아래 코드를 JavaScript 파일에 추가하세요.

function saveChartAsPDF(chartElementId, fileName) {
  const chartElement = document.getElementById(chartElementId);
  const chartSVG = chartElement.getElementsByTagName('svg')[0].outerHTML;

  const doc = new jsPDF();
  doc.setFontSize(30);
  doc.text('Chart', 15, 20);

  doc.addImage(chartSVG, 'SVG', 15, 30, 180, 160);
  doc.save(fileName + '.pdf');
}

위의 코드에서 saveChartAsPDF 함수는 두 개의 매개변수 chartElementId와 fileName을 받습니다. chartElementId는 차트가 표시된 HTML 요소의 id이며, fileName은 저장될 PDF 파일의 이름입니다.

함수는 먼저 차트를 표시하는 HTML 요소를 가져온 다음, 해당 요소의 SVG를 추출합니다. 그런 다음 jsPDF를 사용하여 차트 SVG를 PDF로 변환하여 저장합니다.

예제

이제 위에서 작성한 함수를 사용하여 Chartist로 생성된 차트를 PDF로 저장하는 예제를 살펴보겠습니다. 아래는 사용자 인터페이스가 있는 예제입니다.

<button onclick="saveChartAsPDF('chart', 'myChart')">Save as PDF</button>

<div id="chart" style="width: 400px; height: 300px"></div>

<script>
  // Chartist로 차트 생성하는 코드
  var chart = new Chartist.Line('#chart', {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [
      [5, 2, 4, 2, 0]
    ]
  }, {
    showPoint: false,
    fullWidth: true
  });

  // Chartist 차트가 로드된 후에 실행할 함수
  chart.on('draw', function(data) {
    if (data.type === 'line' || data.type === 'area') {
      data.element.animate({
        d: {
          begin: 2000 * data.index,
          dur: 2000,
          from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()),
          to: data.path.clone(),
          easing: Chartist.Svg.Easing.easeOutQuint
        }
      });
    }
  });

  // 차트를 PDF로 저장하는 함수 호출
  function saveChartAsPDF(chartElementId, fileName) {
    const chartElement = document.getElementById(chartElementId);
    const chartSVG = chartElement.getElementsByTagName('svg')[0].outerHTML;

    const doc = new jsPDF();
    doc.setFontSize(30);
    doc.text('Chart', 15, 20);

    doc.addImage(chartSVG, 'SVG', 15, 30, 180, 160);
    doc.save(fileName + '.pdf');
  }
</script>

이 예제에서는 saveChartAsPDF 함수를 호출하는 “Save as PDF” 버튼을 만들어 페이지에 추가합니다. 차트가 표시되는 <div> 요소는 id="chart"로 설정되어야 합니다.

위의 코드를 웹 페이지에 추가하고 실행하면 “Save as PDF” 버튼을 클릭하여 Chartist 차트를 PDF로 저장할 수 있습니다.

결론

Chartist와 jsPDF 라이브러리를 사용하면 Chartist로 생성한 차트를 PDF로 저장할 수 있습니다. 위의 예제 코드를 사용하여 PDF로 저장하는 기능을 쉽게 추가할 수 있습니다. Chartist와 jsPDF에 대한 자세한 사항은 공식 문서를 참조하시기 바랍니다.

참조: