2022. 10. 29. 16:50ㆍ무료강좌&튜토리얼/PHP
[PHP] 설문조사 결과 데이터 차트 만들기 (3/4) - 구글 차트
구글에서 제공하는 차트 라이브러리를 사용하면 여러 데이터를 목적에 맞게 시각적으로 알기 쉽게 표현할 수 있다.
구글차트의 사이트 URL은 https://developers.google.com/chart/interactive/docs/gallery 이다.
구글차트 사이트에 접속하면 제공하는 차트의 종류를 볼 수 있다.
이 포스팅에서 survey 테이블의 데이터를 표시할 차트는 Bar 차트와 Pie 차트이다.
Bar 차트의 기본 코드를 보면서 사용 방법을 확인해보자.
[예제: 194_googleChart.php ]
<!DOCTYPE html>
<html lang="ko">
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['종류','수'],
['오프라인 서점', 10],
['온라인 서점', 50],
]);
var options = {
title: '제목',
chartArea: {width: '80%'},
hAxis: {
title: '명',
minValue: 0
},
vAxis: {
title: '경로'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>1. 구글 차트의 라이브러리를 불러오는 코드이다. script 태그 내에서 자바스크립트 코드를 작성할 수 있으며, src 속성을 사용하여 자바스크립트 파일을 불러올 수 있다.
2. 구글 차트의 데이터를 입력하기 위해 script 태그를 연다.
3. 구글 차트는 다양한 차트를 제공한다. 그 중 어떠한 차트를 사용할지 명시한다.
4. 구글 차트 라이브러리 코드 사용 준비가 되면 실행할 함수명을 google.charts.setOnLoadCallback() 함수의 아규먼트로 사용한다.
5. google.charts.setOnLoadCallback() 함수 아규먼트로 사용할 함수를 생성한다. drawChart() 함수에서는 차트에 표시할 데이터와 옵션값을 지정하는 역할을 한다.
6. 구글 차트에서 출력할 값의 필드명을 첫 번째 값으로 입력한다.
두 번째 값부터는 실제 출력될 데이터를 입력한다. 첫 번째 값은 레이블명을 입력하고 두 번째는 수치 데이터를 입력한다.
7. 구글 차트의 제목, 사이즈 등의 옵션을 지정한다.
8. google.visualization.BarChart 클래스의 생성자에 전달하는 값은 id 속성의 값이 chart_div인 태그를 의미하며 이는 차트를 표시하는 태그를 의미한다.
9. 차트에서 사용될 데이터와 옵션값으로 차트를 그린다.
10. body 태그 내에 차트를 표시할 태그를 만든다.
실행 URL은 http://localhost/php/gChart/194_googleChart.php 이다.
실행결과
초보자를 위한 PHP 200제
김태영 지음 | 정보문화사
'무료강좌&튜토리얼 > PHP' 카테고리의 다른 글
| [PHP] 웹에서 입력한 코드 결과 보기 (1/2) - 코드 입력폼 만들기 (0) | 2022.10.29 |
|---|---|
| [PHP] 설문조사 결과 데이터 차트 만들기 (4/4) - survey 테이블의 데이터를 차트로 보기 (0) | 2022.10.29 |
| [PHP] 설문조사 결과 데이터 차트 만들기 (2/4) - survey 테이블의 데이터를 JSON으로 생성하기 (0) | 2022.10.29 |
| [PHP] 설문조사 결과 데이터 차트 만들기 (1/4) - survey 테이블에 임의의 데이터 입력하기 (0) | 2022.10.29 |
| [PHP] 설문조사 프로그램 만들기 (4/4) - 설문조사 결과 확인하기 (0) | 2022.10.29 |