[javascript] Highcharts에서 화면 캡쳐기 기능 추가하기

27 Nov 2023

javascript

Highcharts는 데이터 시각화를 위한 강력한 라이브러리입니다. 이러한 라이브러리를 사용하여 만든 그래프나 차트를 쉽게 화면에 표시할 수 있고, 사용자들과 공유할 수 있습니다. 하지만 Highcharts에는 기본적으로 화면 캡쳐기 기능이 포함되어 있지 않습니다. 이 기능을 추가하여 사용자가 그래프를 캡처하고 저장할 수 있도록 만들어보겠습니다.

필요한 라이브러리 추가하기

먼저, Highcharts에서 제공하는 exporting 모듈을 사용하기 위해 해당 라이브러리를 추가해야 합니다. 아래와 같은 코드를 HTML 파일의 <head> 태그 내부에 추가하세요.

<script src="https://code.highcharts.com/modules/exporting.js"></script>

화면 캡처하기 버튼 추가하기

그래프 위에 화면 캡처하기 버튼을 추가할 수 있도록 HTML을 수정해야 합니다. 아래와 같은 코드를 그래프를 표시하는 <div> 태그 위에 추가하세요.

<div id="chart-container">
  <!-- 그래프가 표시될 공간 -->
  
  <button id="capture-button">화면 캡처하기</button>
</div>

버튼 클릭 이벤트 처리하기

화면 캡처하기 버튼을 클릭하면 현재 화면의 그래프를 캡처하고 저장하는 기능을 구현해야 합니다. 자바스크립트를 사용하여 버튼 클릭 이벤트를 처리할 수 있습니다. 아래와 같은 코드를 JavaScript 파일에 추가하세요.

// 차트 인스턴스 생성
const chart = Highcharts.chart('chart-container', {
  // 그래프 옵션 설정
});

// 화면 캡처하기 버튼 클릭 이벤트 처리
document.getElementById('capture-button').addEventListener('click', () => {
  // 차트를 이미지로 변환하여 캡처
  const chartImage = chart.exportChart({
    type: 'image/png',
    filename: 'chart',
  });
  
  // 이미지 다운로드 URL 생성
  const downloadUrl = URL.createObjectURL(chartImage);
  
  // 이미지 다운로드
  const downloadLink = document.createElement('a');
  downloadLink.href = downloadUrl;
  downloadLink.download = 'chart.png';
  downloadLink.click();
});

결과 확인하기

이제 그래프 페이지에 접속하여 화면 캡처하기 버튼을 클릭하면 그래프가 이미지로 캡처되어 다운로드됩니다.

참고 자료

Highcharts exporting 모듈 문서: https://www.highcharts.com/docs/export-module/export-module-overview