개요
지난 글에서 파이 차트와 바 차트를 동시에 가로 배치하여 함께 그리는 예제를 다룬 바 있다.
그런데 구글 차트를 배우면서 한 가지 불편한 점에 부딪히게 되었는데 구글 차트에서 생성된 이미지가 고정 사이즈라는 것이다. 이미지의 사이즈가 고정값이 되면 브라우저 크기가 달라지거나 브라우저를 축소할 때 이미지 일부분이 잘려서 안 보일 수 있다는 문제가 생긴다. 즉, 반응형 페이지가 불가능하게 된다.
아래 두 개의 이미지는 스마트폰에서 볼 때 우측 영역을 벗어나버린 오류난 이미지이다.
그래프의 폭이 글의 폭보다 커서 그래프가 글 우측으로 돌출되어 보이거나 또는 잘려서 안 보이는 오류가 발생하는 것이다
 |
 |
반응형 페이지가 안되면 구글 서치 콘솔로부터 수시로 오류 메시지로 지적받는 상황에 부딪히게 될 것이다.
그래서 이번 글에서는 바로 구글 차트 결과를 반응형으로 만드는 방법을 배워보도록 한다.
반응형 구글 차트의 예제
구글 차트 이미지를 반응형으로 만드는 것을 아래 제시된 것과 같이 두 가지를 예로 들 수 있는데 이번 글에서는 첫 번째 예만을 다루고 두 번째 예는 다음 글에서 다루고자 한다.
- 첫번째 예는 한페이지에 구글 차트 두개가 세로 배치된 경우의 반응형
: 비율을 유지하면서 폭만 줄어드는 방식 - 두번째 예는 한페이지에 구글 차트 두개가 가로 배치된 경우의 반응형
: 비율을 유지하면서 폭이 줄어들다가 화면이 작아지면 가로 배치에서 세로배치로 변경하는 방식
첫 번째 예제 : 세로 배치 반응형 구글 차트 그리기
먼저 지난 글에서 다루었던 구글차트 두 개를 동시에 그리는 예제를 약간 수정하여 세로로 그리는 예제로 만들면 아래 코드 블록에 있는 것과 같다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(numGraph1);
google.charts.setOnLoadCallback(numGraph2);
function numGraph1() {
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['미래한국당', 19],
['더불어시민당', 17],
['정의당', 5],
['국민의당', 3],
['열린민주당', 3]
]);
var options = {title:' 21대 국회의원 선거 정당별 비례대표 의석수',
width:350,
height:300};
var chart = new google.visualization.PieChart(document.getElementById('numGraph1_div'));
chart.draw(data, options);
}
function numGraph2() {
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['민주당-시민당', 180],
['통합당-미래한국', 103],
['정의당', 26],
['국민의당', 5],
['열린민주당', 3],
['무소속', 3]
]);
var options = {title:'21대 국회의원 선거 정당별 총 의석수',
width:350,
height:300};
var chart = new google.visualization.PieChart(document.getElementById('numGraph2_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div class="columns">
<div id="numGraph1_div" style="border: 1px solid #ccc"></div>
<div id="numGraph2_div" style="border: 1px solid #ccc"></div>
</div>
</body>
</html>
위의 코드 블록을 구글 차트로 그려보면 아래와 같이 보인다.
보이는 바와 같이 구글 차트 가로 크기가 고정되어서 보기에 썩 좋지 않다.
두 개의 차트의 가로폭을 100%로 만들고 크기가 반응형으로 변화하도록 만드는 작업을 다음과 같이 나열해 본다.
1. var option의 width를 반응형을 위해 100% 변경한다
2. 각 콜백 함수 내 chart.draw() 아래에 window.adEventeListener()를 삽입해준다
완전한 코드를 적어보면 아래 코드 블록과 같다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(numGraph3);
google.charts.setOnLoadCallback(numGraph4);
function numGraph3() {
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['미래한국당', 19],
['더불어시민당', 17],
['정의당', 5],
['국민의당', 3],
['열린민주당', 3]
]);
var options = {title:' 21대 국회의원 선거 정당별 비례대표 의석수',
width:'100%',
height:300};
var chart = new google.visualization.PieChart(document.getElementById('numGraph3_div'));
chart.draw(data, options);
window.addEventListener('resize', numGraph3, false);
}
function numGraph4() {
var data = new google.visualization.DataTable();
data.addColumn('string', '정당');
data.addColumn('number', '의석수');
data.addRows([
['민주당-시민당', 180],
['통합당-미래한국', 103],
['정의당', 26],
['국민의당', 5],
['열린민주당', 3],
['무소속', 3]
]);
var options = {title:'21대 국회의원 선거 정당별 총 의석수',
width:'100%',
height:300};
var chart = new google.visualization.PieChart(document.getElementById('numGraph4_div'));
chart.draw(data, options);
window.addEventListener('resize',numGraph4, false);
}
</script>
</head>
<body>
<div id="numGraph3_div"></div>
<div id="numGraph4_div"></div>
</body>
</html>
위 코드블록 내 코드를 HTMl코드 내에 삽입하여 그린 구글 차트를 아래에 나타내었다
처음에 그렸던 구글 코드와는 크기도 다르고 폭도 가로로 100% 가득 채워져 보인다.
그리고 이 페이지를 스마트폰으로 볼 경우에도 역시 아래 그림처럼 반응형으로 축소되어 역시 가로폭에 가득 차도록 보이게 된다.
다음 글에서는 가로배치 반응형 구글 차트 글을 작성해보도록 하겠다
2020/04/17 - [구글 차트] - 구글차트 배우기 (2) 파이 차트 그리기
2020/04/18 - [구글차트] - 구글 차트 배우기 (3) 한 페이지에 여러 차트 그리기
최근댓글