차트 그리기 기법

이 페이지에는 차트를 인스턴스화하고 페이지에 그릴 수 있는 다양한 방법이 나와 있습니다. 각 방법에는 아래와 같은 장단점이 있습니다.

목차

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. 추가 정보

chart.draw()

다음은 이 문서의 Hello Chart! 예시에서 설명하는 기본 메서드입니다. 기본 단계는 다음과 같습니다.

  1. gstatic 라이브러리 로더, Google 시각화, 차트 라이브러리 로드
  2. 데이터 준비
  3. 차트 옵션 준비
  4. 차트 클래스를 인스턴스화하여 페이지 컨테이너 요소에 핸들을 전달합니다.
  5. 원하는 경우 차트 이벤트를 수신하도록 등록합니다. 차트의 메서드를 호출하려면 'ready' 이벤트를 수신 대기해야 합니다.
  6. chart.draw()를 호출하여 데이터와 옵션을 전달합니다.

장점:

  • 프로세스의 모든 단계를 완벽하게 제어할 수 있습니다.
  • 차트에서 발생한 모든 이벤트를 수신 대기하도록 등록할 수 있습니다.

단점:

  • 상세
  • 필요한 모든 차트 라이브러리를 명시적으로 로드해야 합니다.
  • 쿼리를 전송하는 경우 콜백을 위해 수동으로 구현하고, 성공 여부를 확인하고, 반환된 DataTable를 추출하여 차트에 전달해야 합니다.

예:

<html>
   <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
     var data;
     var chart;

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

ChartWrapper

ChartWrapper는 적절한 모든 차트 라이브러리를 자동으로 로드하고 차트 도구 데이터 소스에 대한 쿼리 전송도 간소화하는 편리한 클래스입니다.

장점:

  • 훨씬 적은 코드
  • 필요한 모든 차트 라이브러리를 자동으로 로드합니다.
  • Query 객체를 만들고 콜백을 처리하여 데이터 소스를 훨씬 쉽게 쿼리할 수 있습니다.
  • 컨테이너 요소 ID를 전달하면 컨테이너 요소 ID에서 getElementByID를 자동으로 호출합니다.
  • 데이터는 값 배열, JSON 리터럴 문자열, DataTable 핸들 등 다양한 형식으로 제출할 수 있습니다.

단점:

  • ChartWrapper는 현재 select, ready, error 이벤트만 전파합니다. 다른 이벤트를 가져오려면 래핑된 차트의 핸들을 가져오고 여기에서 이벤트를 구독해야 합니다. 예시는 ChartWrapper 문서를 참조하세요.

예:

다음은 로컬에서 구성된 데이터가 배열로 지정된 열 차트의 예입니다. 배열 문법을 사용하여 차트 라벨이나 날짜/시간 값을 지정할 수는 없지만 이러한 값으로 DataTable 객체를 수동으로 만들어 dataTable 속성에 전달할 수 있습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

다음은 Google 스프레드시트를 쿼리하여 데이터를 가져오는 선 차트의 예입니다. 코드는 콜백을 처리할 필요가 없습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

자동 로드와 함께 사용하면 매우 간결한 코드를 만들 수 있습니다.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

ChartWrapper와 함께 차트 편집기 사용

Google 스프레드시트에 내장된 차트 편집기 대화상자를 사용하여 차트를 디자인한 다음 차트를 나타내는 직렬화된 ChartWrapper 문자열을 요청할 수 있습니다. 그런 다음 이 문자열을 복사하여 붙여넣고 위의 ChartWrapper에 설명된 대로 사용할 수 있습니다.

자체 페이지에 차트 편집기를 삽입하고 사용자가 다른 데이터 소스에 연결하고 ChartWrapper 문자열을 반환하는 메서드를 노출할 수 있습니다. 자세한 내용은 ChartEditor 참조 문서를 확인하세요.

 

DrawChart()

DrawChartChartWrapper를 래핑하는 전역 정적 메서드입니다.

장점:

  • ChartWrapper와 동일하지만 사용하기에 약간 더 짧습니다.

단점:

  • 래퍼에 핸들을 반환하지 않으므로 어떤 이벤트도 처리할 수 없습니다.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

추가 정보