[JavaScript] 구글차트 사용법

자바스크립트 #googleChart #그래프 #이미지 #라이브러리

안녕하세요, 배곧동개발자 입니다.

요즘 세상이 좋아져서 무료로 제공되는 좋은 라이브러리들이 넘처납니다!

특히 예전 같았으면 자바스크립트로 만들기가 참 어려웠을 차트, 그래프들도 아주 쉽게 만들 수 있는데요. 오늘은 바로 차트와 그래프들을 손쉽게 만들 수 있는 구글차트를 알아볼까 합니다.

1. 구글차트

구글차트란, 구글에서 제공하는 무료 라이브러리 입니다. 이것을 이용하면 아주 쉽게 그래프를 그릴 수 있지요. 말로 백번 설명하는 것보다 직접 예시를 들며 확인해보는게 당연히 더 좋겠지요?

자 그럼 예시로 위에 그래프를 그려볼까합니다. 어때요? 어렵다 생각드시나요? 생각보다 아주 간단하고 단순합니다. 소스코드를 한번 쭉 훑어봅시다.

여기서 느낌이 빡 오시는분들은 똑똑이합니다. 하지만! 저를 포함해서 대부분이 느낌이 안오실테니 구분해서 봐보겠습니다.

2. 구조를 파악하자!

보시면 알겠지만 크게 2가지 구조로 나뉩니다.

” 라이브러리 Load ” 와 ” 함수정의(데이터 Setting / 옵션 Setting / 차트 그리기) “

아, body안에 div는 단순 선언이므로 생략합니다. 그림이 그려지는 객체이니 무조건 있어야되는거는 아시지요? 하나씩 뜯어보겠습니다!

3. 라이브러리 Load

js 파일을 다운로드 받아서 어디 폴더에 넣고 어떻게하고.. 그런 귀찮은 행동은 거절합니다. 위에 보시는 부분만 넣어주시면 됩니다.

// 라이브러리를 참조하고 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
// 차트 버전을 최신으로 불러와주고 
google.charts.load('current', {'packages':['corechart']});
// 차트를 로드한다 
google.charts.setOnLoadCallback(drawVisualization);

여기서 drawVisualization 는 아래에 선언할 함수명임을 알아주셔야해요!

최신버전 말고 다른 버전을 이용하시려면 아래같이 설정하면 된다고 하는데, 처음하시는 분들은 그냥 최신 쓰심이 좋아요!

4. 데이터 Setting

drawVisualization 함수 속에 차트에 들어갈 데이터를 셋팅해줘야합니다. 데이터 셋팅이야 뭐 배열식으로 셋팅되는거니까 어렵지 않게 보실 수 있으실겁니다.

5. 옵션 Setting

X축, Y축 레이블 설정과 타이틀등을 정의할 수 있습니다. “각각 그래프에 대한 타입도 따로 정의할 수 있다”는거! 알아두시면 좋겠네요. ( 예시 : series: {5: {type: ‘line’}} )

6. 차트 그리기

아래에 선언해놓은 div객체에 맵핑시켜서 차트를 만들어줍니다. 여기서 ComboChart 라고 되어있는부분 보이시죠? 저 부분을 변경해줌으로써 차트의 모양을 변경해줄 수 있습니다!

구글차트 사이트에 들어가시며 다양한 차트들이 존재하니 참조해서 만드시면 좋겠네요.

샘플로 작성한 소스는 첨부파일로 올려드리니 활용하시면 되구요. 구글차트 페이지에 많은 샘플들이랑 자료가 있으니 참조해서 만드시면 더 다양하게 만드실 수 있습니다!

이만, 배곧동개발자 였습니다.