개요
지금까지, 몇 만개 가량의 수치 데이터를 표현하기 위한 화면을 설계하고 프로시저와 트리거를 이용해 통계 테이블을 만들었습니다. 이제 화면에 구현을 해보려고하고 그래프를 구현하기 위한 라이브러리로 Google Charts를 선택했습니다.
구글 차트를 선택한 이유
그래프를 그리기위해 우선 관련 라이브러리 리서치를 했습니다. 정말 다양한 라이브러리가 있었고 그 중 Chart.js 와 Google Chart 두가지 라이브러리 중에서 고민하고 Google Chart를 선택한 이유에 대해서 말씀 드리겠습니다.
우선 Chart.js 입니다.
- CANVAS 베이스로 빠른 렌더링 속도를 가지고 있습니다.
- 작은 라이브러리 용량과 공식문서 가이드만 봐도 쉽고 간단하게 그래프를 그릴 수 있다는 점이 가장 큰 메력이었습니다.
다른 그래프 라이브러리들도 적은 용량에 빠른 렌더링 속도를 장점으로 내세운 라이브러리들이 있었지만, 그 중 가장 간편한 기능을 가지고 있었고 무엇보다 주변의 추천이 많았습니다.
그렇다면 Google Chart에 대해서도 설명드리겠습니다.
- SVG 베이스로 비교적 느린 렌더링 속도와 라이브러리 용량이 상당히 무겁습니다.
- 무거운 만큼 정말 다양한 종류의 차트를 입맛데로 만들 수 있으며
- 공식문서만 봐도 어지러울 만큼 사용방법이 비교적 어려웠지만, 그만큼 커스텀을 다양하게 할 수 있으며 다양한 기능을 가지고 있습니다.
간단한 사이드 프로젝트에서 Chart.js가 많은 추천을 받았는지 잘 알수 있는 부분이었지만, Google Chart를 선택한 이유는 다양한 종류의 차트와 커스텀 기능들 이었습니다.
익히고 화면에 표현하는 데 까지 비교적 많은 시간을 소요하겠지만, 예정보다 빠르게 프로젝트를 진행한 덕에 시간은 충분히 있었고, 지금은 간단한 Line Chart만 만들면 되지만 향후 대시보드 페이지 까지 도입을 고려하고 있었기에 많은 차트 종류를 제공하는 Google Chart 를 선택하게 되었습니다.
사용 예제
해당 포스트에서 구글 차트를 설치부터 설정하는 방법에 대해서는 소개드리지 않을 것 입니다. 공식문서에 한국어로 잘 설명되어 있으니, 공식문서를 참조하여 구글 차트를 웹 페이지에 적용시키기 바랍니다.
해당 포스트에서는 커스텀 하면서 유용했던 기능들에 대해 예제를 통해 소개드립니다. 또한 선 차트(Line Chart)에 대해서만 설명드리니 참고 바랍니다.
Animation
animation:{
duration:1000, // animation 시간
easing:'inAndOut', // animation 동작 속도 함수
startup:true // 최조 그래프 그릴 시 animation 적용 여부
},
hAxis ( 가로축 )
hAxis: {
title: '일시', // 가로축 이름
showTextEvery: 36, // 표시할 가로출 라벨 수
allowContainerBoundaryTextCutoff: false, // 차트 컨테이너가 라벨을 자르도록 허용 여부
}
vAxis ( 세로축 )
vAxis: {
viewWindow: {
max:maximum + 2, // 세로축 라벨 최대 값
min:minimum - 2 // 세로축 라벨 최소 값
}
},
반응형 디자인
다른 라이브러리를 안써봐서 모르지만, 구글 차트의 경우 차트가 첫 화면 기준으로 width와 height값이 고정되는 문제가 있었습니다. 첫 렌더링 되는 화면이 작다면 그래프의 크기가 거기에 맞춰진 상태로 유지되며, 크면 반대로 화면이 줄어들어도 큰 크기 만큼 그대로 차지 했습니다.
웹페이지의 크기를 조금만 수정해도 상당히 어색하게 보인다는 단점이 있었습니다. 이러한 문제를 해결하기 위해서 Javascript로 강제로 차트를 다시 그리는 방법을 채택했고 그 코드는 다음과 같습니다.
function drawChart() {
....
//차트 그리는 함수 내부 코드
function resizeChart() {
chart.draw(data, options);
}
if (document.addEventListener) {
window.addEventListener('resize', () => {
resizeChart();
});
}
...
}
정리
Google Chart를 선정한 이유에 대해서 설명 하긴 했지만, 마음속 한켠으로는 그래프 그리는게 어려워 봤자, 커스텀하는게 힘들어 봤자 얼마나 힘들겠어? 하는 마음도 있었습니다. 그렇지만 공식문서의 설명이 생각보다?? 번역이 이해하기 힘들었고 내부 함수가 너무 많아서 어려움을 겪었던것 같습니다.
특히 반응형 디자인을 설계하기 전까지 %로 width와 height 설정해도 안되는 모습에서 구글차트의 원리를 이해하는데 까지 시간이 걸렸던것 같습니다.
구글 차트 그 중, Line Chart를 커스텀하는데 조금이나마 도움이 되었으면 합니다.