데이터 준비

<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 객체를 수신할 수 있습니다. 쿼리 전송 방법은 고급 데이터 소스인 데이터 소스 쿼리를 참조하세요.

 

추가 정보