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

안녕하세요. 이번 시간에는 구글 앱스 스크립트(Google Apps Script)를 이용하여 차트를 만드는 방법에 대해서 알아보도록 하겠습니다. 본 글에서는 막대 차트를 예로 들어 설명드릴 예정이지만, 다른 차트도 이번에 설명드리는 내용과 비슷한 방법으로 생성 가능하니 참고하시면 도움이 되실 겁니다.

앱스 스크립트 차트 만들기

 

들어가기 전에...

구글 앱스 스크립트(Google Apps Script)를 처음 접하시는 분은 아래 링크를 통해서 앱스 스크립트의 기본적인 사용법을 먼저 살펴보시는 것을 추천드립니다. 앱스 스크립트 사용법이 익숙하지 않으시면 본 글 내용을 따라오기 어려울 수 있습니다.

구글 앱스 스크립트(Google Apps Script) 실행하기 (개념, 실행방법, 업무 자동화)

구글 앱스 스크립트(Google Apps Script) 실행하기 (개념, 실행방법, 업무 자동화)

 

막대 차트 만들기

샘플 데이터 작성

새 스프레드시트를 생성하고 빈 시트에 아래 그림과 같이 샘플 데이터를 작성합니다. 데이터 작성이 완료되면 상단 메뉴바에서 [확장 프로그램] 메뉴 하위의 [Apps Script] 메뉴에 접근합니다.

스프레드시트 샘플 데이터 작성

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

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

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

    var range = sheet.getRange("B1:C6")
    var chart = sheet.newChart()
        .setChartType(Charts.ChartType.BAR)
        .addRange(range)
        .setNumHeaders(1)
        .setPosition(5, 5, 0, 0)
        .setOption('title', '차트 만들기 예제')
        .setOption('height', 200)
        .setOption('width', 400)
        .setOption('backgroundColor.fill', 'yellow')
        .setOption('series', [{'color':'green'}])
        .build();

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

 

결과 확인

MakeChart 함수를 실행하면 구글 계정 엑세스 허용 여부를 물어보는 메시지 창이 출력됩니다. 메시지 창에서 [허용] 버튼을 클릭하고 스프레드시트를 확인해보면 아래 그림과 같이 'E5' 셀에 막대 차트가 생성되어 있습니다.

앱스 스크립트 실행 결과 확인

 

 

코드 분석하기

시트 할당

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

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

 

데이터 범위 지정

'range' 변수를 선언하고 차트가 참조할 데이터 범위를 지정합니다. 예시에서는 B1에서부터 C6까지를 데이터 범위로 지정하였습니다.

    var range = sheet.getRange("B1:C6")

 

차트 빌더 생성

'newChart' 함수를 사용하여 시트에 새 차트를 생성하는 차트 빌더를 생성하고 'chart' 변수에 빌더를 할당합니다.

    var chart = sheet.newChart()

 

차트 유형 지정

'setChartType' 함수를 이용하여 차트 유형을 지정합니다. 예시에서는 차트 유형을 'BAR'로 지정하여 막대 차트를 사용하도록 설정하였습니다. 만약, 다른 유형의 차트를 사용하고자 하신다면 ChartType을 참고하시면 됩니다.

        .setChartType(Charts.ChartType.BAR)

 

차트가 참고할 데이터 범위 지정

'addRange' 함수를 이용하여 차트 빌더가 참고할 데이터 범위를 지정합니다. 예시에서는 'range' 변수를 인자 값으로 전달하여 위에서 지정한 데이터 범위가 전달되도록 하였습니다.

        .addRange(range)

 

헤더 행열 수 지정

'setNumHeaders' 함수를 이용하여 헤더로 처리할 행 또는 열의 수를 지정합니다. 예시에서는 1로 설정하였기 때문에  첫 번째 행을 헤더로 설정하게 됩니다. 음수를 입력할 경우 자동으로 헤더를 설정합니다.

        .setNumHeaders(1)

 

차트 위치 지정

'setPosition' 함수를 이용하여 차트가 생성될 위치를 지정합니다. setPosition 함수는 차트 위쪽이 고정될 행 위치, 차트 왼쪽이 고정될 행 위치, 기준점으로부터 X축으로 이동할 픽셀 수, 기준점으로부터 Y축으로 이동할 픽셀 수를 인자 값으로 전달받습니다. 예시에서는 다섯 번째 행, 다섯 번째 열에 차트가 위치하도록 설정하여 차트가 E5 셀 위치에 생성된 것을 확인할 수 있습니다.

        .setPosition(5, 5, 0, 0)

 

차트 제목 설정

'setOption' 함수는 차트의 다양한 옵션을 설정할 수 있는 함수입니다. 차트 제목을 설정하기 위해 첫 번째 인자 값으로 'title'을 입력하고 두 번째 인자 값으로 차트 제목으로 사용할 문자열을 입력합니다.

        .setOption('title', '차트 만들기 예제')

 

 

차트 높이 설정

'setOption' 함수를 이용하여 차트 높이를 설정합니다. 첫 번째 인자 값으로 'height'을 입력하고 두 번째 인자 값으로 차트 높이로 지정할 픽셀 수를 입력합니다. 예시에서는 200을 입력하였습니다.

        .setOption('height', 200)

 

차트 너비 설정

'setOption' 함수를 이용하여 차트 너비를 설정합니다. 첫 번째 인자 값으로 'width'를 입력하고 두 번째 인자 값으로 차트 너비로 지정할 픽셀 수를 입력합니다. 예시에서는 400을 입력하였습니다.

        .setOption('width', 400)

 

차트 백그라운드 색 지정

'setOption' 함수를 이용하여 차트 백그라운드 색을 지정합니다. 첫 번째 인자 값으로 'backgroundColor.fill'을 입력하고 두 번째 인자 값으로 지정할 색을 입력합니다. 예시에서는 노란색을 'yellow'로 입력하였지만, 노란색을 16진수로 표현한 값인 '#ffff00'을 입력해도 동일한 결과를 얻을 수 있습니다.

        .setOption('backgroundColor.fill', 'yellow')

 

차트 그래프 색 지정

'setOption' 함수를 이용하여 차트 그래프 색을 지정합니다. 첫 번째 인자 값으로 'series'를 입력하고 두 번째 인자 값으로 그래프 색을 입력합니다. 예시에서는 길이가 1인 배열 '[{'color':'green'}]'을 입력하여 그래프 색을 초록색으로 표현하였지만, '{0:{'color':'green'}})'와 같이 오브젝트 형태를 입력해도 동일한 결과를 얻을 수 있습니다. 색은 위와 동일한 방식으로 16진수 값을 입력하는 것이 가능합니다.

        .setOption('series', [{'color':'green'}])
        .setOption('series', {0:{'color':'green'}})

 

차트 빌드

'build' 함수를 이용하여 차트 빌더가 요구하는 조건의 차트를 작성하고 시트에 삽입 가능한 상태로 만듭니다. 이 단계에서는 아직 시트에 차트가 삽입된 상태는 아닙니다.

        .build();

 

차트 삽입

'insertChart' 함수를 이용하여 지정한 시트에 차트를 삽입합니다. 인자 값으로 build 함수를 이용하여 삽입 가능한 상태로 가공된 차트 빌더를 입력받습니다.

    sheet.insertChart(chart);

 

마치며...

이번 시간에는 구글 앱스 스크립트(Google Apps Script)를 이용하여 차트를 만드는 방법에 대해서 알아보았습니다. 앱스 스크립트를 이용해서 차크를 만드는 경우에 한번 활용해보시기 바랍니다. 반복작업이 많은 경우에는 생각보다 유용하게 사용하실 겁니다. 오늘도 긴 글 읽어주셔서 감사합니다.