차트 그리기 

<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>

마지막 단계는 차트를 그리는 것입니다. 먼저 사용할 차트 클래스의 인스턴스를 인스턴스화한 후 인스턴스에서 draw()를 호출해야 합니다.

차트 인스턴스화

각 차트 유형은 차트 문서에 나열된 다른 클래스를 기반으로 합니다. 예를 들어 원형 차트는 google.visualization.PieChart 클래스를 기반으로 하고 막대 그래프는 google.visualization.BarChart 클래스를 기반으로 하는 식입니다. 원형 차트와 막대 그래프는 모두 이 튜토리얼의 시작 부분에서 로드한 corechart 패키지에 포함되어 있습니다. 하지만 페이지에 트리맵 또는 지역 차트를 사용하려면 '트리맵' 또는 '지역 지도' 패키지를 추가로 로드해야 합니다.

Google 차트 생성자는 시각화를 그릴 DOM 요소에 대한 참조인 단일 매개변수를 사용합니다.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

차트 그리기

데이터와 옵션이 준비되었으면 차트를 그릴 준비가 된 것입니다.

페이지에 차트를 담을 HTML 요소 (일반적으로 <div>)가 있어야 합니다. 차트에 이 요소에 대한 참조를 전달해야 하므로 document.getElementById()를 사용하여 참조를 검색하는 데 사용할 수 있는 ID를 이 요소에 할당해야 합니다. 차트를 그리면 이 요소 안에 있는 내용이 차트로 대체됩니다. 이 <div> 요소의 크기를 명시적으로 지정해야 하는지 고려하되 지금은 <div> HTML에서 차트 크기를 지정합니다.

모든 차트는 두 가지 값, 즉 데이터를 보유하는 DataTable (또는 DataView) 객체와 선택적 차트 옵션 객체를 사용하는 draw() 메서드를 지원합니다. 옵션 객체는 필수 항목이 아니며, 이를 무시하거나 null을 전달하여 차트의 기본 옵션을 사용할 수 있습니다.

draw()를 호출하면 차트가 페이지에 그려집니다. 데이터 또는 옵션을 변경하고 차트를 업데이트하려고 할 때마다 draw() 메서드를 호출해야 합니다.

draw() 메서드는 비동기식입니다. 즉, 즉시 반환되지만 반환되는 인스턴스를 즉시 사용하지 못할 수 있습니다. 대부분의 경우 문제 없습니다. 차트는 결국 그려집니다. 그러나 draw()를 호출한 후 차트에서 값을 설정하거나 가져오려면 값이 채워졌음을 나타내는 준비 이벤트가 발생할 때까지 기다려야 합니다. 이벤트 수신 대기에 대해서는 다음 페이지에서 다룹니다.

문제 해결

차트가 페이지에 그려지지 않는 경우 다음 몇 가지 방법으로 문제를 해결할 수 있습니다.

  • 오타를 찾습니다. 자바스크립트는 대소문자를 구분하는 언어입니다.
    • Javascript 디버거를 사용합니다. Firefox에서는 JavaScript 콘솔, Venkman 디버거 또는 Firebug 부가기능을 사용할 수 있습니다. Chrome에서는 개발자 도구(Shift + Ctl + J)를 사용할 수 있습니다.
  • Google 시각화 API 토론방을 검색합니다. 질문에 대한 답변을 제공하는 게시물을 찾을 수 없는 경우 문제를 보여주는 웹페이지 링크와 함께 질문을 그룹에 게시하세요.

 

 

 

추가 정보