데이터 준비

<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 객체를 수신할 수 있습니다. 쿼리를 보내는 방법을 알아보려면 데이터 소스 쿼리 고급 주제를 참조하세요.

 

추가 정보