<html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.charts.load('current', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.charts.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { // Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); // Set chart options var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300}; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <!--Div that will hold the pie chart--> <div id="chart_div" style="width:400; height:300"></div> </body> </html>
DataTable
를 만드는 방법
모든 차트에는 데이터가 필요합니다. Google Chart Tools 차트에는 google.visualization.DataTable
라는 자바스크립트 클래스로 데이터를 래핑해야 합니다. 이 클래스는 이전에 로드한 Google 시각화 라이브러리에 정의됩니다.
DataTable
는 행과 열이 있는 2차원 테이블입니다. 각 열에는 데이터 유형, ID, 라벨(선택사항)이 있습니다. 위 예에서는 다음 테이블을 만듭니다.
유형: 문자열 라벨: 토핑 |
유형: 숫자 라벨: 슬라이스 |
---|---|
버섯 | 3 |
양파 | 1 |
올리브 | 1 |
애호박 | 1 |
페퍼로니 | 2 |
DataTable
를 만드는 방법에는 여러 가지가 있습니다. DataTables 및 DataView에서 각 기법의 목록과 비교를 확인할 수 있습니다. 데이터를 추가한 후에 수정할 수 있으며 열과 행을 추가, 수정, 삭제할 수 있습니다.
차트의 DataTable
을 차트에서 예상하는 형식으로 구성해야 합니다. 예를 들어 막대와 원형 차트에는 각 행이 슬라이스 또는 막대를 나타내는 2열 테이블이 필요합니다. 첫 번째 열은 슬라이스 또는 막대 라벨이며 두 번째 열은 슬라이스 또는 막대 값입니다. 다른 차트에는 더 복잡하고 더 복잡한 테이블 형식이 필요합니다. 필수 데이터 형식을 알아보려면 차트 문서를 참고하세요.
테이블을 직접 채우는 대신 차트 도구 데이터 소스 프로토콜을 지원하는 웹사이트(예: Google 스프레드시트 페이지)를 쿼리할 수 있습니다. google.visualization.Query
객체를 사용하면 웹사이트에 쿼리를 전송하고 차트에 전달할 수 있는 채워진 DataTable
객체를 수신할 수 있습니다. 쿼리 전송 방법은 고급 데이터 소스인 데이터 소스 쿼리를 참조하세요.