차트 그리기

<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에서는 자바스크립트 콘솔, Venkman 디버거 또는 Firebug 부가기능을 사용할 수 있습니다. Chrome에서는 개발자 도구(Shift + Ctl + J)를 사용할 수 있습니다.
  • Google 시각화 API 토론 그룹을 검색하세요. 질문에 답변하는 게시물을 찾을 수 없는 경우 문제를 보여주는 웹페이지 링크와 함께 질문을 그룹에 게시합니다.

 

 

 

추가 정보