Google 차트 시각화 JavaScript API

이 기사에서는 Google 차트 JavaScript API를 사용하여 간단한 차트를 빠르게 만드는 방법을 보여줍니다. Google 차트 JavaScript API를 사용하여 다양한 차트를 만들 수 있지만 이 문서는 간단한 세로 막대형 차트를 만들기 위해 API를 사용하여 시작하는 방법에 대한 간략한 소개입니다.

Google 차트 시각화 API는 Google CDN URL에서 로드할 수 있습니다. https://www.gstatic.com/charts/loader.js

그런 다음 차트 시각화 API를 로드하고 API가 로드될 때 호출될 콜백 함수를 설정해야 합니다. 이것은 이 두 줄의 코드로 수행됩니다.

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

drawChart(...) 콜백 함수는 1980년부터 2021년까지의 각 연도에 대한 인구 데이터 배열에서 DataTable을 만듭니다.
그런 다음 ColumnChart 개체가 생성된 다음 데이터 테이블과 함께 populationChart div에 추가됩니다.

다음은 일부 인구 데이터의 세로 막대형 차트를 만드는 html 페이지의 전체 예제 코드입니다.

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <h1>Population</h1>
    <div id="populationChart"></div>
    <script type="text/javascript">
        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            const populationData = google.visualization.arrayToDataTable([
                ['Year', 'Population'],
                [1980, 5122065],[1981, 5123989],[1982, 5119155],
                [1983, 5116464],[1984, 5112130],[1985, 5111108],
                [1986, 5116273],[1987, 5124794],[1988, 5129254],
                [1989, 5129778],[1990, 5135409],[1991, 5146469],
                [1992, 5162126],[1993, 5180614],[1994, 5196642],
                [1995, 5215718],[1996, 5251027],[1997, 5275121],
                [1998, 5294860],[1999, 5313577],[2000, 5330020],
                [2001, 5349212],[2002, 5368354],[2003, 5383507],
                [2004, 5397640],[2005, 5411405],[2006, 5427459],
                [2007, 5447084],[2008, 5475791],[2009, 5511451],
                [2010, 5534738],[2011, 5560628],[2012, 5580516],
                [2013, 5602628],[2014, 5627235],[2015, 5659715],
                [2016, 5707251],[2017, 5748769],[2018, 5781190],
                [2019, 5806081],[2020, 5822763],[2021, 5840045]
            ], false);
            const options = {
                width: 820,
                height: 400
            };
            var populationChart = new google.visualization.ColumnChart(document.getElementById('populationChart'));
            populationChart.draw(populationData, options);
        }
    </script>
</body>
</html>

차트는 브라우저에서 다음과 같이 표시됩니다.

Google 차트 시각화 API는 여기에 많은 예제가 포함되어 매우 잘 문서화되어 있습니다. https://developers.google.com/chart/interactive/docs