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

차례

개요

지난 글에서 두 개의 구글 차트가 세로로 배치된 세로 배치형 구글 차트를 반응형으로 바꾸는 작업을 설명하였다. 

 

이번 글에서는 두 개의 구글 차트가 가로로 배치된 가로배치형 구글 차트를 반응형으로 바꾸는 작업을 설명하려고 한다.  가로배치형 구글 차트는 테이블을 이용하여 배치하는 방식이어서 결국 테이블을 PC 화면에서는 가로배치형으로 스마트폰에서는 세로 배치형으로 바꾸는 작업을 하는 것이 가로배치 반응형 구글 차트라고 보면 되겠다

 

다시 한번 설명하면 가로배치형 구글 차트는 반응형 테이블을 살짝 수정하여 만드는 것이다

 

반응형 작업이 되지 않는 가로배치형 구글 차트는 그리지 않으려고 한다.  그 이유는 가로배치형 구글 차트가 스마트폰에서 볼 때는 우측으로 화면이 벗어나게 되어서 구글 서치에서 "폭이 너무 큽니다", "글씨가 너무 작습니다" 등등의 귀찮은 오류 메시지를 받게 될 소지가 크기 때문이다

 

 

가로배치 반응형 구글 차트 코드

일단 반응형으로 완성된 코드를 코드 블록에 넣어 두고 반응형 작업으로 특별히 추가되는 코드에 대해서만 부가 설명하도록 하겠다.

 

<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:'100%',
			height:300};
		var chart = new google.visualization.PieChart(document.getElementById('numGraph1_div'));
		chart.draw(data, options);
//      	window.addEventListener('resize', numGraph1, false);
	}

	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:'100%',
			height:300};
		var chart = new google.visualization.PieChart(document.getElementById('numGraph2_div'));
		chart.draw(data, options);
//      	window.addEventListener('resize',numGraph2, false);
	}
</script>

<table class='responsive'>
  <tr>
    <td width=50%><div id="numGraph1_div"></div></td>
    <td width=50%><div id="numGraph2t_div"></div></td>
  </tr>
</table>

<style>
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    section {max-width:1920px; margin:30px auto; padding:30px;}
    table {width: 100%;}
    th, td { padding: 10px; border: 1px solid #ddd; }
    th { background: #f4f4f4;}
    .responsive th { width: 100%; text-align: left; }
    @media only screen and (max-width:768px) {
    	.responsive { margin: 0 -10px; }
      .responsive th, .responsive td {width: 100%;display: block; border-top: none; }
    	.responsive tr:first-child th { border-top: 1px solid #ddd; }
    }
</style>

 

 

 

 

위에 가로 배치된 두 개의 구글 차트는 테이블의 두 개의 column에 배치된 것으로 스마트폰으로 본 화면을 보게 되면 두 개의 차트가 세로 배치형으로 바뀌는 것을 볼 수 있다.

반응형 테이블을 응용한 것이라고 볼 수 있겠다.

 

반응형 구글 차트와 일반 구글 차트와 다른 점은

이전에 여러 개 구글 차트 그리기와 달라진 것을 아래와 같이 나열해본다

1. var options의 width를 100%로 변경한다

2. 각 콜백 함수의 마지막에 window.addEventListener() 함수를 삽입한다

3. 반응형 테이블 css를 <style> 태그를 이용해서 코드에 삽입한다

 

지금까지 구글 차트를 활용해서 파이 차트와 바 차트 그리기 예제를 해보았고 여러 개의 구글 차트를 동시에 세로 배치와 가로 배치하여 보았다.  이 과정에서 구글 차트의 폭이 화면을 벗어나는 오류를 해결하기 위해 반응형으로 변경하는 과정까지 살펴보았다.

 

이로써 구글 차트의 기초과정은 다 끝났다고 볼 수 있고 이제부터는 시간 나는 대로 각 corechart에 포함된 각 차트에 대한 옵션들을 각 예제를 통해 살펴보면서 배우는 글을 쓰려고 한다.

지금 하고 있는 일이 조금 바빠져서 다음 글이 좀 더뎌질 수도 있겠다.  빨리 정리하고 새로운 시도를 해봐야 하는데

 

 

반응형 테이블을 적용하는 과정에 이상한 현상이 일어나서 현재 구글 차트가 보이지 않는 것 같다.  여러 차례 시도해보다 스킨을 다른 것으로 바꿔서 해보니까 오류 없이 잘 나온다.  차트를 다 그려놓고 안보이니 참 난감하다.   아무래도 친효스킨과 어떤 스크립트 충돌 문제가 발생하고 있는 것이 아닌가 싶은데 나중에 좀 더 살펴보고 충돌을 피해 갈 수 있는 방법이 있을지 찾아봐야겠다

※ 확실히 자바스크립트가 스킨의 영향을 받는 듯함. 현재 스킨에서는 잘 작동되고 있는 것으로 확인했다

※ 5/20 가끔 글을 수정할 이유가 생겨서 HTML 편집을 하고 나면 이상하게 반응형 스크립트가 사라지고 차트에 반응형이 적용되지 않는다.  단순히 티스토리 스킨의 문제인 줄 알았는데 티스토리 편집기와 상관성이 있어 보인다.  일단 문제임을 알았으니 시간을 갖고 문제를 찾아 해결해볼 생각이다.

 

 

2020/04/17 - [구글 차트] - 구글 차트 배우기 (2) 파이 차트 그리기

2020/04/18 - [구글 차트] - 구글 차트 배우기 (3) 한 페이지에 여러 차트 그리기

2020/04/18 - [구글 차트] - 구글 차트 배우기 (4) 반응형 구글 차트 1

2020/05/01 - [구글 차트] - 구글 차트 배우기(6) - 영역 차트