Amazing Paul

이 블로그의 한 부분에서 파이썬을 통해 초4-1과정의 차트를 그리는 법을 소개했다. 최근 프로그램 언어는 자바스크립트와 파이썬이 가장 인기가 있고 배우기도 쉬우므로 자바스크립트도 소개를 한다. 자바스크립트는 구글차트와 Chart.js를 소개하려 한다. 이 포스트는 그 중 구글차트에 대해 다룬다.

이 글의 자바스크립트는 html문서에 삽입된 형태로 다룬다. 이 블로그의 다음 두 글이 html문서를 만드는 데 도움을 줄 수 있다.

https://softwares.tistory.com/15?category=666810

https://softwares.tistory.com/16?category=666810

우선은 구글 차트의 공식 사이트를 소개한다.

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

위 링크를 따라가면 다음과 같은 사이트가 나온다.

현재 구글차트는 느리기는 하지만 내부적으로 계속 개발이 진행중인 상태다. 따라서, 상황에 따라 내용이 바뀔 수도 있다. 이 때 이 공식 사이트에서 도움을 받을 수 있으므로 알아두는 것이 좋다.

막대그래프와의 첫 만남

우선 구글 차트를 사용하려면 최소한 다음 부분이 html파일 안에 있어야 한다.

왼쪽의 숫자는 편의상 표시한 줄번호이고, 실제 입력에 숫자는 없다. 위 소스를 다운로드하고 더블클릭을 하면 웹브라우저가 뜨면서 아래 그림과 같은 화면이 나올 것이다.

그림의 상자표시 내부가 자료를 입력하는 부분인데, 나중에 자료를 추가로 입력하거나 할 때 위치를 빨리 찾을 수 있도록 하려면 자료입력을 하는 부분은 여백을 많이 두는 것이 좋다. 이 결과로 알 수 있는 것은 구글차트에서는 기본적으로 가로방향의 차트를 그려주고, 눈금선도 자동으로 그려짐을 알 수 있다.

자료입력

다음 표를 보자.

무작위로 동물 종류에 따른 동물수를 정해놓은 의미없는 표다. 이 표를 차트에 반영하려면 다음과 같이 html 파일을 만들면 된다.

이 파일은 앞서 봤던 파일과 대부분이 같고, 그림에 둥근박스로 표시된 부분만 자료를 입력하느라 변경이 되었다. 코딩을 처음 하는 학생들의 경우 자료 입력을 할 때 한 행의 자료가 입력되고나서 쉼표,를 잘 빼먹는데 조심하기 바란다. 위 파일을 웹브라우저로 읽어들이면 다음과 비슷한 차트가 나올 것이다.

웹브라우저 화면의 크기에 따라 칸 구분은 다양한 방식으로 이루어질 수 있다. 웹브라우저의 폭을 바꿔서 다시로드 ↻ 버튼을 클릭해서 변하는 모양을 확인해 보기 바란다. 위 그림에 나온 말풍선 부분은 마우스가 해당 막대 위에 있을 때 나타나는 것이다. 덤으로 해당 막대는 다른 막대보다 살짝 강조표시가 된다. 오른쪽 상단의 동물수라는 범례 옆의 상자에 마우스를 올리면 네 막대 모두 강조표시가 되기도 한다. 이 정도까지의 효과는 구글차트에서 기본으로 지원한다. 단순 데이터 입력으로 구현된 막대그래프의 기본형은 이렇게 가로방향의 막대그래프 모양이다.

세로형 막대그래프

앞서 사용한 표를 그대로 가져다가 세로형 막대그래프로 바꿔보기로 하자. 세로형 막대그래프는 아래와 같이 앞 코드의 18째 줄의 BarChart를 ColumnChart로 바꿔주기만 하면 된다.

차트의 형태만 다르고 앞서 지원하던 자동말풍선, 강조효과는 동일하게 지원됨을 확인할 수 있다.