구글차트로 웹페이지에 세련되고 깔끔한 차트 적용-파이차트

블로그나 웹사이트에 그래프나 차트를 올릴 경우가 있습니다. 보통 엑셀에서 작성한 그래프를 캡처해서 사용하긴 하는데 왠지 세련되거나 깔끔해 보이지 않아서 아쉬웠었죠. 이번에 괜찮은 아이템을 발견했습니다. 구글에서 제공하는 구글 차트(google charts)라는 것인데 구글에서 만들어서 그런지 굉장히 세련되고 심플합니다. 제 마음에 쏙 드네요.

  

앞으로 블로그에 차트나 그래프를 쓸 때에는 구글 차트를 활용하려고 합니다. 다만 html로 차트를 구현하다 보니 초보자에겐 어렵긴 하지만 html을 모르는 저도 하다보니 금방 적응이 되더라구요.

단, 차트의 크기가 고정크기라서 반응형 홈페이지에서는 차트가 잘리는 현상이 발생합니다. 해결방법을 못찾았네요.

구글 그래프

오늘은 파이챠트를 그려보려고 합니다. 먼저 구글챠트 홈페이지에 접속하세요.

【구글차트 홈페이지】

1. 구글차트 홈페이지 구성

구글 차트 홈페이지에 접속하여 메인 화면에서 more버튼을 누릅니다.

구글차트

그러면 차트 갤러리로 들어갈 수 있습니다. 구글 차트에서는 막대그래프, 바차트등 수많은 그래프를 지원합니다. 여기서 필요한 차트를 선택해서 소스코드를 수정하여 사용하면 됩니다.

차트 갤러리

2. 파이차트 만들어 보기

차트 갤러리에서 Pie Charts를 찾아서 들어가면 아래와 같이 Example이 나옵니다. 파이차트도 여러가지가 있는데 다양한 양식을 제공하고 있습니다.

파이 차트

html을 수정하려면 별도의 편집툴을 사용하는게 편합니다. 하나씩 수정하면서 결과가 어떻게 나오는지 확인해야 되니까요. 다행히 구글에서 웹으로 바로 편집을 할 수 있는 툴을 제공하네요. 편집툴은 Example 아래 CODE IT OURSELF ON JSFIDDLE 버튼을 누르면 됩니다.

그러면 fiddle이란 편집툴로 들어갑니다. 저도 html 이나 CSS, 자바스크립트 전혀 모릅니다. 너무 두려워하지 않아도 됩니다. 저는 티스토리 포스팅에 3D 파이차트를 붙여볼 생각입니다.

먼저 편집툴에 있는 내용을 다 지우고 3D 차트의 샘플코드를 복사해서 편집툴의 html 공간에 붙여 넣습니다.

fiddle 편집툴

샘플코드는 그대로 긁어서 복사해도 되고 코드 오른쪽 상단을 클릭하면 자동으로 복사됩니다.

파이차트 코드 수정

편집툴에 샘플코드를 붙여넣고 이제 수정을 해야 되는데요. 저는 "나의 하루 활동 시간"이란 차트로 24시간 기준 제가 어떤 활동을 하나 정리해봤습니다. 샘플코드에서 건드릴건 별로 없어요. 제목과 숫자만 바꿔주면 됩니다. 나머지는 구글에서 다 알아서 만들어 놨어요.

중간중간에 편집툴 왼쪽 상단의 RUN버튼을 누르면 변경내용이 적용되어 차트모양이 바뀝니다. 그렇게 차트 수정을 모두 마쳤습니다. html 편집이라 해서 괜히 겁먹었는데 수정하는데에는 3분도 안걸리네요.

수정이 다 끝나면 코딩한 내용을 그대로 복사해서 티스토리에 붙여 넣으면 됩니다.

티스토리 html모드

티스토리 편집툴에서 왼쪽 상단에 html란을 체크하면 html모드로 편집할수 있습니다.

이게 완성한 3D 파이 차트입니다. 단순히 스캔한 이미지와는 차원이 다르죠. 차트 위에 마우스를 움직여 보세요. 마우스를 데면 숫자와 글자가 보여지죠. 어떤가요? 세련되고 깔끔하지 않나요? 저는 구글의 이런 화려하지 않고 심플한 디자인이 좋더라구요.

문제는 반응형 웹에서 사이즈가 잘 안맞네요ㅠ. 이 부분은 좀더 알아봐야 될거 같네요. 구글 차트에서는 파이차트 외에도 다양한 차트를 지원하고 있으니 한번 사용해보면 좋을 거 같습니다.