차트와 상호작용

지금까지 살펴본 내용만으로도 많은 웹페이지에 충분합니다. 페이지에 차트를 그려 보았습니다. 그러나 사용자 클릭을 포착하거나 이미 그린 차트의 속성 또는 데이터를 조작해야 하는 경우 차트에서 발생한 이벤트를 수신 대기해야 합니다.

모든 차트에는 몇 가지 종류의 이벤트가 발생합니다. 일반적인 원인은 다음과 같습니다.

  • ready - 차트를 페이지에 그린 후 메서드에 응답할 준비가 되면 발생합니다. 차트에서 정보를 요청해야 하는 경우 이 이벤트를 수신합니다.
  • 선택 - 사용자가 차트에서 항목을 선택하면 일반적으로 막대나 원형 슬라이스를 클릭하면 발생합니다.
  • error - 일반적으로 DataTable 형식이 잘못되어 전달된 데이터를 차트에서 렌더링할 수 없는 경우에 발생합니다.
  • onmouseover 및 onmouseout - 사용자가 특정 차트 요소 위에 마우스를 올리거나 내릴 때 각각 발생합니다.

이벤트를 수신 대기하는 것은 간단합니다. 차트에 핸들을 전달하는 google.visualization.events.addListener(), 포착할 이벤트 이름, 이벤트가 발생할 때 호출할 핸들러의 이름을 호출하기만 하면 됩니다. 아직 draw()를 호출하지 않은 경우에도 모든 차트 핸들을 사용하여 이 메서드를 호출할 수 있습니다. 리스너를 제거하기 전에 리스너가 정확히 한 번 호출되도록 하려면 google.visualization.events.addOneTimeListener()를 호출하면 됩니다.

다음은 차트의 select 이벤트를 포착하도록 등록하는 방법을 보여주는 부분 코드 스니펫입니다.

load libraries...

function drawChart() {

  prepare data...

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

  // The select handler. Call the chart's getSelection() method
  function selectHandler() {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var value = data.getValue(selectedItem.row, selectedItem.column);
      alert('The user selected ' + value);
    }
  }

  // Listen for the 'select' event, and call my function selectHandler() when
  // the user selects something on the chart.
  google.visualization.events.addListener(chart, 'select', selectHandler);

  draw the chart...

}

다음은 새로운 선택 이벤트 리스너가 포함된 Hello 차트 코드 예시를 보여줍니다. 직접 해 보세요.

<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'));

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

        google.visualization.events.addListener(chart, 'select', selectHandler);    
        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>

 

추가 정보