Google 차트 시각화 JavaScript API

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

Google 차트 시각화 API는 Google CDN URLhttps://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
Javascript의 템플릿 리터럴
Git을 사용하여 버전이 지정된 Terraform 모듈

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage