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

차례

개요

지난 글에서 파이 차트와 바 차트를 동시에 가로 배치하여 함께 그리는 예제를 다룬 바 있다.

그런데 구글 차트를 배우면서 한 가지 불편한 점에 부딪히게 되었는데 구글 차트에서 생성된 이미지가 고정 사이즈라는 것이다. 이미지의 사이즈가 고정값이 되면 브라우저 크기가 달라지거나 브라우저를 축소할 때 이미지 일부분이 잘려서 안 보일 수 있다는 문제가 생긴다. 즉, 반응형 페이지가 불가능하게 된다.

아래 두 개의 이미지는 스마트폰에서 볼 때 우측 영역을 벗어나버린 오류난 이미지이다.

그래프의 폭이 글의 폭보다 커서 그래프가 글 우측으로 돌출되어 보이거나 또는 잘려서 안 보이는 오류가 발생하는 것이다

(예1) 구글이미지가 모바일의 가로폭보다 너무 커서 다른 글씨들이 너무 작게 보이는 문제

반응형 페이지가 안되면 구글 서치 콘솔로부터 수시로 오류 메시지로 지적받는 상황에 부딪히게 될 것이다.

그래서 이번 글에서는 바로 구글 차트 결과를 반응형으로 만드는 방법을 배워보도록 한다.

반응형 구글 차트의 예제

구글 차트 이미지를 반응형으로 만드는 것을 아래 제시된 것과 같이 두 가지를 예로 들 수 있는데 이번 글에서는 첫 번째 예만을 다루고 두 번째 예는 다음 글에서 다루고자 한다.

첫번째 예는 한페이지에 구글 차트 두개가 세로 배치된 경우의 반응형
: 비율을 유지하면서 폭만 줄어드는 방식
두번째 예는 한페이지에 구글 차트 두개가 가로 배치된 경우의 반응형
: 비율을 유지하면서 폭이 줄어들다가 화면이 작아지면 가로 배치에서 세로배치로 변경하는 방식

첫 번째 예제 : 세로 배치 반응형 구글 차트 그리기

먼저 지난 글에서 다루었던 구글차트 두 개를 동시에 그리는 예제를 약간 수정하여 세로로 그리는 예제로 만들면 아래 코드 블록에 있는 것과 같다.

<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) 한 페이지에 여러 차트 그리기

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

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

728x90

저작자표시 비영리 변경금지

'구글차트' 카테고리의 다른 글

구글차트 배우기 ⑤ 반응형 구글차트2 (0)	2020.07.24
구글차트 배우기 ③ 한 페이지에 여러 차트 그리기 (1)	2020.07.24
구글차트 배우기 ⑥ 영역차트 (0)	2020.05.01
구글차트 배우기 ② 파이차트 그리기 (2)	2020.04.17
구글차트 배우기 ① 시작하면서 (0)	2020.04.17