구글차트 검색 결과
6 개의 검색 결과가 있습니다.
구글차트

구글차트 배우기 ⑤ 반응형 구글차트2

차례 개요 지난 글에서 두 개의 구글 차트가 세로로 배치된 세로 배치형 구글 차트를 반응형으로 바꾸는 작업을 설명하였다. 이번 글에서는 두 개의 구글 차트가 가로로 배치된 가로배치형 구글 차트를 반응형으로 바꾸는 작업을 설명하려고 한다. 가로배치형 구글 차트는 테이블을 이용하여 배치하는 방식이어서 결국 테이블을 PC 화면에서는 가로배치형으로 스마트폰에서는 세로 배치형으로 바꾸는 작업을 하는 것이 가로배치 반응형 구글 차트라고 보면 되겠다 다시 한번 설명하면 가로배치형 구글 차트는 반응형 테이블을 살짝 수정하여 만드는 것이다 반응형 작업이 되지 않는 가로배치형 구글 차트는 그리지 않으려고 한다. 그 이유는 가로배치형 구글 차트가 스마트폰에서 볼 때는 우측으로 화면이 벗어나게 되어서 구글 서치에서 "폭이 너..

2020. 7. 24. 20:00
728x90
구글차트

구글차트 배우기 ④ 반응형 구글차트1

차례 개요 지난 글에서 파이 차트와 바 차트를 동시에 가로 배치하여 함께 그리는 예제를 다룬 바 있다. 그런데 구글 차트를 배우면서 한 가지 불편한 점에 부딪히게 되었는데 구글 차트에서 생성된 이미지가 고정 사이즈라는 것이다. 이미지의 사이즈가 고정값이 되면 브라우저 크기가 달라지거나 브라우저를 축소할 때 이미지 일부분이 잘려서 안 보일 수 있다는 문제가 생긴다. 즉, 반응형 페이지가 불가능하게 된다. 아래 두 개의 이미지는 스마트폰에서 볼 때 우측 영역을 벗어나버린 오류난 이미지이다. 그래프의 폭이 글의 폭보다 커서 그래프가 글 우측으로 돌출되어 보이거나 또는 잘려서 안 보이는 오류가 발생하는 것이다 반응형 페이지가 안되면 구글 서치 콘솔로부터 수시로 오류 메시지로 지적받는 상황에 부딪히게 될 것이다...

2020. 7. 24. 19:00
728x90
구글차트

구글차트 배우기 ③ 한 페이지에 여러 차트 그리기

차례 개요 이번 글에서는 한 페이지에 여러 개의 차트를 동시에 그리는 법을 배워보도록 한다. 구글 차트에서 제공하는 기능으로 한 페이지에 여러 차트 그리는 방법은 두 가지로 나눠 볼 수 있겠다. 첫 번째는 한 페이지에 여러 개 데이터로 여러 개 차트를 그리기 두 번째는 한 페이지에 한 개 데이터로 여러 개 차트를 그리기 한 페이지에 여러 개 여러 개 데이터로 여러 개 차트 그리기 제일 먼저 차트를 그릴 데이터를 정해야 한다. 여러 개 데이터를 준비해야 하는데 표 1, 표 2와 같은 두 개의 데이트를 준비하였다. 데이터는 현실감 있게 21대 국회의원 선거 결과 의석수로 정해보았다. 샘플데이터 준비 21대 국회의원 선거 정당별 비례대표 의석수 21대 국회의원 선거 정당별 총 의석수 샘플 코드 및 샘플 그래프..

2020. 7. 24. 18:00
728x90
구글차트

구글차트 배우기 ⑥ 영역차트

차례 개요 이전 글에서 파이 차트와 바 차트 그리는 것에 대해 글을 작성하였다 이번 글은 영역 차트 그리기이다 영역 차트는 라인 차트와 유사하다고 볼 수 있으나 라인의 아랫부분을 면적으로 표시하는 것이 다른 점이라고 볼 수 있다. 아래 그림 1과 같은 형식의 차트를 영역 차트 영어로는 Area chart라고 한다 그림 1에서 보듯이 여러 개의 선들의 아래 부분이 색상으로 영역 표시되어 있는 것을 볼 수 있다. 영역 차트는 그림 1의 왼쪽 차트처럼 모든 선들을 자신의 값 그대로 표시하기도 하고 오른쪽 차트처럼 각 값들을 적층 하여서 합계로 표시하기도 한다. 적층을 하게 되면 선들 간에 겹치는 부분이 사라지게 된다. 뒤에 설명하겠지만 누적을 실행하는 옵션은 isStacked이다. 편의상 지금부터 왼쪽 영역 ..

2020. 5. 1. 15:41
728x90
구글차트

구글차트 배우기 ② 파이차트 그리기

차례 개요 처음 시도하는 구글차트는 파이차트를 선택하려고 한다 구글차트를 이용해서 파이차트 그리는 것은 사실 너무나 간단하다. 구글이 만들어 놓은 식탁에서 그냥 숟가락질만 하는 듯한 느낌이다. 예제를 통해 구글차트가 어떻게 동작하는 것인지 그 구조에 대해 찬찬히 익혀보고자 한다 파이차트 예제 샘플데이터 준비 차트 그릴 때 제일 처음 할 일은 차트에 사용될 데이터를 준비하는 것이다. 데이터는 현실감을 높이기 위해 바로 얼마전 실시한 21대 국회의원 선거 결과 중 정당별 비례대표 의석수를 집계한 데이터를 선택해 보았다 공부하면서 선거결과도 한번 되짚어 보는 것은 일석이조인 거 같다. 21대 국회의원 선거 비례대표정당별 의석수 정당 미래한국당 더불어시민당 정의당 국민의당 열린민주당 의석수 19석 17석 5석 ..

2020. 4. 17. 19:21
728x90
구글차트

구글차트 배우기 ① 시작하면서

차례 개요 일상 통계자료를 그래프로 만들어 블로그에 올려 저장하기로 마음먹은 이후에 다양한 그래프를 만들어보고는 있는데 보기 쉽고 깔끔한 형태이 그래프를 지속적으로 만든다는 게 여간 어려운 일이 아님을 스스로 깨닫게 된다. 그래프를 그리는 기술들은 새롭게 빠른 속도로 너무나도 많이 눈앞에 펼쳐져 나오고 있는데 그것을 사용할 때 편리함보다는 새로운 것을 배워서 사용해야 한다는 두려움이 오히려 더 앞서서 쉽게 접근하기가 어려운 것 같다. 처음에는 엑셀로 차트 그리기를 주로 사용하였다 내가 그동안 그래프를 그리는 데 사용했던 도구는 주로 마이크로소프트 엑셀이었다. 누구나 많이 쓰는 툴이지만 엑셀에 데이터를 입력해서 차트 그리기로 하면 보고서나 제안서 등에 사용하기에는 나름대로 충분한 그래프를 만들 수 있어 지..

2020. 4. 17. 18:55
728x90