<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 차트 도구 차트를 사용하려면 데이터를 google.visualization.DataTable라는 JavaScript 클래스로 래핑해야 합니다. 이 클래스는 이전에 로드한 Google 시각화 라이브러리에 정의되어 있습니다.
DataTable은 행과 열이 있는 2차원 표로, 각 열에는 데이터 유형, 선택적 ID, 선택적 라벨이 있습니다. 위의 예시에서는 다음 테이블을 만듭니다.
| 유형: 문자열 label: 토핑 |
유형: 숫자 label: Slice |
|---|---|
| 버섯 | 3 |
| 양파 | 1 |
| 올리브 | 1 |
| 애호박 | 1 |
| 페퍼로니 | 2 |
DataTable를 만드는 방법에는 여러 가지가 있습니다. DataTables 및 DataViews에서 각 기법의 목록과 비교를 확인할 수 있습니다. 데이터를 추가한 후에 데이터를 수정할 수 있으며 열과 행을 추가, 수정 또는 삭제할 수도 있습니다.
차트의 DataTable는 차트에 맞는 형식으로 구성해야 합니다. 예를 들어 막대 및 원형 차트에는 각 행이 슬라이스 또는 막대를 나타내는 2열 테이블이 필요합니다. 첫 번째 열은 슬라이스 또는 막대 라벨이고 두 번째 열은 슬라이스 또는 막대 값입니다. 다른 차트에는 다르고 더 복잡한 테이블 형식이 필요할 수 있습니다. 필요한 데이터 형식을 알아보려면 차트 문서를 참고하세요.
테이블을 직접 채우는 대신 차트 도구 데이터 소스 프로토콜을 지원하는 웹사이트(예: Google 스프레드시트 페이지)를 쿼리할 수 있습니다. google.visualization.Query 객체를 사용하여 웹사이트에 쿼리를 전송하고 차트에 전달할 수 있는 채워진 DataTable 객체를 수신할 수 있습니다. 쿼리를 보내는 방법을 알아보려면 데이터 소스 쿼리 고급 주제를 참조하세요.