웹 페이지에 Google Charts(구글 차트)를 추가하는 방법

웹 페이지에 Google Charts(구글 차트)를 추가하는 것은 생각보다 간단합니다. Google이 제공하는 loader.js 라이브러리를 불러온 뒤, 차트를 표시할 컨테이너를 준비하고, 데이터와 옵션을 지정해 차트를 그려주면 됩니다.

Google Charts 추가 기본 절차

https://www.gstatic.com/charts/loader.js 스크립트를 페이지의 <head> 영역에 포함시킵니다.
google.charts.load() 메서드를 호출해 필요한 패키지(예: corechart)를 로드합니다.
차트가 렌더링될 HTML 컨테이너(예: <div>)를 마련합니다.
google.visualization.arrayToDataTable()로 데이터 테이블을 만들고, 차트 객체의 draw() 메서드를 호출해 화면에 출력합니다.

예제 코드

웹 페이지에 Google Charts를 추가하는 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>Google Charts 튜토리얼</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load("current", { packages: ["corechart"] });
</script>
<style>
    .barchartContainer {
        width: 550px;
        height: 400px;
        margin: 0 auto;
        font-weight: bold;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">
웹 페이지에 구글 차트 추가하기 예제
</h1>
<div class="barchartContainer"></div>
<script language="JavaScript">
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ["연도", "인도"],
            ["2013", 500],
            ["2014", 800],
            ["2015", 1000],
            ["2016", 1200],
            ["2017", 1400]
        ]);
        var options = { title: "교육받은 인구(단위: 백만 명)" };
        var chart = new google.visualization.BarChart(
            document.querySelector(".barchartContainer")
        );
        chart.draw(data, options);
    }
    google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

코드 핵심 포인트

라이브러리 로드: google.charts.load("current", { packages: ["corechart"] })를 통해 막대 차트, 원형 차트 등 기본 차트에 필요한 corechart 패키지를 불러옵니다.
데이터 정의: arrayToDataTable() 함수에 2차원 배열을 전달하여 첫 번째 행은 열 제목(연도, 인도), 이후 행은 실제 데이터로 구성됩니다.
차트 옵션: options 객체에서 차트 제목 등 표시 설정을 지정할 수 있습니다.
콜백 등록: google.charts.setOnLoadCallback(drawChart)는 라이브러리 로딩이 완료된 후에 차트 그리기 함수가 실행되도록 보장합니다.

실행 결과

위 코드를 실행하면 연도별 교육받은 인구를 보여주는 다음과 같은 막대 차트가 출력됩니다.

웹 페이지에 Google Charts(구글 차트)를 추가하는 방법