앱스 스크립트(Apps Script) 차트를 이미지로 변환하기 (차트 이미지 만들기)

안녕하세요. 이번 시간에는 구글 앱스 스크립트(Google Apps Script)를 이용하여 스프레드시트에 삽입되어 있는 차트를 이미지로 변환하여 저장하는 방법에 대해서 알아보도록 하겠습니다.

앱스 스크립트 차트 이미지 변환하기

 

들어가기 전에...

이전 시간에 앱스 스크립트를 이용하여 막대 차트를 만드는 방법에 대해서 알아보았습니다. 이번 시간에는 그 때 만든 차트를 샘플 데이터로 활용하여 차트를 이미지로 변환하는 방법을 알아보겠습니다. 저와 동일한 방식으로 샘플 데이터를 만들어보고 싶으시거나, 앱스 스크립트를 이용하여 차트를 만드는 방법에 대해서 알아보고 싶으신 분은 아래 링크에 접근하시면 됩니다.

앱스 스크립트(Apps Script) 차트 만들기

앱스 스크립트(Apps Script) 차트 만들기

 

차트를 이미지로 변환하기(차트 이미지 만들기)

샘플 데이터 작성

새 스프레드시트를 생성하고 빈 시트에 좌측과 같이 샘플 데이터를 작성합니다. 데이터 작성이 완료되면 B1에서 C6까지 데이터 범위로 설정하고 막대 차트를 생성합니다. 샘플 데이터의 차트는 앱스 스크립트를 이용하여 생성해도 되고, 직접 수동으로 생성해도 됩니다. 차트가 한개 이상 존재하기만 하면 됩니다.

샘플 데이터 작성

앱스 스크립트 함수 생성 및 실행

앱스 스크립트 프로젝트 페이지에서 아래와 같이 ChartToImage 함수를 생성합니다.

function ChartToImage() {
  try { 
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();

    var chart = sheet.getCharts()
    var image = chart[0].getAs('image/png');

    sheet.insertImage(image,5,11,0,0);

    console.log("[+] 성공!"); }
  catch(e){
    console.log("[+] 실패! ("+e+")");
  }
}

 

결과 확인

ChartToImage 함수를 실행하고 스프레드시트를 확인해보면, 막대 차트 아래에 차트와 동일한 모양의 이미지가 생성된 것을 확인할 수 있습니다. 생성된 이미지 우측 상단 메뉴를 클릭하면 아래 그림과 같이 이미지 관련 메뉴가 출력됩니다.

차트 이미지 변환 완료

 

 

코드 분석하기

시트 할당

코드를 세분화 해서 보도록 하겠습니다. 현재 스프레드시트를 'ss' 변수에 할당하고, 현재 스트레드시트의 현재 시트를 'sheet' 변수에 할당합니다.

    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();

 

차트 가져오기

'getCharts' 함수를 이용하여 시트에 존재하는 차트 배열을 'chart' 변수에 할당합니다. 특정 차트를 작업하려면 배열 번호를 통해 차트를 불러오면 됩니다. 예시에서는 차트가 1개만 존재하기 때문에 'chart[0]'을 입력하여 차트 배열 첫 번째에 위치하는 차트를 불러 작업하면 됩니다.

    var chart = sheet.getCharts()

 

차트 형식 변환

'getAs' 함수를 이용하여 차트를 'image/png' 형식으로 변환하고 'image' 변수에 할당합니다. getAs 함수의 인자 값으로 전달되는 콘텐츠 형식은 'image/png' 외에도 'image/bmp', 'image/gif', 'image/jpeg', 'application/pdf' 등 다양합니다.

    var image = chart[0].getAs('image/png');

 

차트 이미지 삽입

'insertImage' 함수를 사용하여 시트에 차트 이미지를 삽입합니다. insertImage 함수는 이미지, 이미지 왼쪽이 고정될 열 위치, 이미지 위쪽이 고정될 행 위치, 기준점으로부터 X축으로 이동할 픽셀 수, 기준점으로부터 Y축으로 이동할 픽셀 수를 인자 값으로 전달받습니다. 예시에서는 다섯 번째 열, 열한 번째 행에 이미지가 위치하도록 설정하여 차트가 E11 셀 위치에 생성되었습니다.

    sheet.insertImage(image,5,11,0,0);

 

마치며...

이번 시간에는 앱스 스크립트를 이용하여 스프레드시트에 삽입되어 있는 차트를 이미지로 변환하여 저장하는 방법에 대해서 알아보았습니다. 앱스 스크립트를 이용하여 차트를 이미지로 변환하는 경우가 그리 자주 있을 것 같지는 않지만, 알아두면 언젠가 유용하게 사용하실 수 있을겁니다. 오늘도 긴 글 읽어주셔서 감사합니다.