[JS] 구글차트 사용해보기! #googleChart #구글차트 #JS구글차트 #자바스크립트차트 #무료그래프

 

 

 

googleChart.html

 

안녕하세요,
용테크의 용사장 입니다.

 

 

요즘 세상이 좋아져서

무료로 제공되는 좋은 라이브러리들이 넘처납니다!

 

 

특히 예전 같았으면 자바스크립트로 만들기가 참 어려웠을
차트, 그래프들도 아주 쉽게 만들 수 있는데요!

 

 

오늘은 바로 차트와 그래프들을

손쉽게 만들 수 있는 구글차트를 알아볼까 합니다!

 

 

 

 

위에 것을 그려볼까합니다.

어때요? 어렵다 생각드시나요?

 

생각보다 아주 간단하고 단순합니다.

소스코드를 한번 쭉 훑어봅시다.

 

 

 

여기서 느낌이

빡 오시는분들은 똑똑이합니다.

 

 

하지만! 저를 포함해서 대부분이

느낌이 안오실테니 구분해서 봐보겠습니다.

 

 

 

 

● 구조를 파악하자!

 

 

 

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

 

 

1. 라이브러리 Load
2. 함수정의(차트생성)
  - 데이터 Setting
  - 옵션 Setting
  - 차트 그리기

 

 

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

 

 

하나씩 뜯어보겠습니다!

 

 

 

 

● 라이브러리 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 는 아래에

선언할 함수명임을 알아주셔야해요!

 

 

최신버전 말고 다른 버전을 이용하시려면

아래같이 설정하면 된다고 합니다.

 

 

근데 처음하시는 분들은 그냥 최신 쓰심이 좋아요!

 

 

 

 

● 데이터 Setting

 

 

 

 
drawVisualization 함수 속에 차트에

들어갈 데이터를 셋팅해줘야합니다.

 

 

데이터 셋팅이야 뭐 배열식으로 셋팅되는거니까
어렵지 않게 보실 수 있으실겁니다.

 

 

 

 

● 옵션 Setting

 

 

 
X축, Y축 레이블 설정과

타이들등을 정의할 수 있습니다.

 

 

"각각 그래프에 대한 타입도 따로 정의할 수 있다"는거!
알아두시면 좋겠네요.
series: {5: {type: 'line'}}

 

 

 

 

● 차트 그리기

 

 

아래에 선언해놓은

div객체에 맵핑시켜서 차트를 만들어줍니다.

 

 

여기서 ComboChart 라고 되어있는부분 보이시죠?

 

저 부분을 변경해줌으로써

차트의 모양을 변경해줄 수 있습니다!

 

 

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

 

 

 

 

샘플로 작성한 소스는

첨부파일로 올려드리니 활용하시면 되구요,

 

 

구글차트 페이지에 많은 샘플들이랑 자료가 있으니
참조해서 만드시면 더 다양하게 만드실 수 있습니다!

 

https://developers.google.com/chart/

 

 

이만,
용테크의 용사장 이였습니다.