Взаимодействие с диаграммой

То, что мы рассмотрели до сих пор, достаточно для многих веб-страниц: вы нарисовали свою диаграмму на странице. Однако, если вы хотите перехватывать клики пользователей или вам нужно манипулировать свойствами или данными на уже нарисованной диаграмме, вам нужно прослушивать события, создаваемые диаграммой.

Во всех чартах происходят какие-то события. Вот наиболее распространенные:

  • ready — вызывается, когда диаграмма отрисовывается на странице и готова реагировать на методы. Прослушайте это событие, если вам нужно запросить информацию из диаграммы.
  • select — Вызывается, когда пользователь выбирает что-то на диаграмме: обычно щелкает полосу или сектор круговой диаграммы.
  • error — вызывается, когда диаграмма не может отобразить переданные данные, как правило, из-за неправильного формата DataTable .
  • onmouseover и onmouseout — вызывается, когда пользователь наводит указатель мыши на определенный элемент диаграммы или от него соответственно.

Прослушивание событий просто; просто вызовите google.visualization.events.addListener() , передав дескриптор диаграммы, имя события, которое нужно перехватить, и имя обработчика, который будет вызываться при возникновении события. Вы можете вызывать этот метод с любым дескриптором диаграммы, даже если вы еще не вызывали draw() . Обратите внимание, что вы можете вызвать google.visualization.events.addOneTimeListener() , если хотите, чтобы прослушиватель вызывался ровно один раз перед удалением самого себя.

Вот частичный фрагмент кода, показывающий, как зарегистрироваться, чтобы перехватывать событие выбора диаграммы:

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 Charts с новым прослушивателем событий select. Попробуйте сами.

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

Дополнительная информация